Tag Archives: fckeditor

写写程序.Code

给 typecho 换个 fckeditor 编辑器

2009 年 8 月 20 日 – 上午 3:42

typecho默认的编辑器 tinyMCE 功能好少，而且在某些功能上面用起来好奇怪。

还是回归以前sa时代用的fckeditor。这个插件使用的编辑器是 Sablog-X 系列开发者 4ngle 所制作的精简版的 fckeditor，我把它弄到 typecho 里面来了。

这个编辑器的优点就是有插入代码功能，不过启用之后，感觉加载速度要比默认的tinyMCE慢一些。

下载地址：Fckeditor lite for Typecho

下载完成之后，将解压缩的文件夹放置在 usrplugins 文件夹下，并在后台激活插件即可。

注意：这个插件还未完成，发文章没有问题，可是编辑发表后的文章就有些问题了，而且自动保存功能自己不会写了……

本来想把 4ngle 的地址摆出来的，结果忘记他的地址了……

不过，还是求高手帮我把这个插件完成……JS实在是不通啊！

Tags fckeditor, plugins, typecho, 插件, 插入代码 | Permalink | Comments (3)
生活记录.Log

更新了后台的编辑器并且重写了部分模板源代码

2008 年 8 月 10 日 – 下午 1:04

今天在angle的博客下载了新的精简版的fckeditor2.6，更新到了自己的博客上面，多了很多功能，特别是加上了插入代码的功能。自己修改了一下fckeditor的代码，保留了我更新的表情功能。

但是使用插入代码功能的时候和以前模板的css有些冲突，下午重新整理了一下模板，但是发现了一个问题，顶部的登陆和搜索框好像写的不符合标准，在文章浏览页面的时候CSS控制不了那里的格式，FF和IE会字体变大，IE下面还会在左边显示一个白条。自己初学CSS，实在是找不到解决办法了！

Tags css, fckeditor, 插入代码, 模板 | Permalink | Comment (0)
写写程序.Code

Sablog-x 表情功能BUG、hack留言插入表情和设置自定义表情

2008 年 7 月 27 日 – 下午 5:58

[face=frisk]BUG描述：

  1. 2.0编辑器插入表情插入的是相对地址，导致使用静态链接的用户无法在文章中正常显示表情
  2. 1.6表情使用的是静态地址，当更换域名或者更换路径之后，表情无法正常显示问题，2.0的BUG或许就是为了解决这个，但是却忽略了静态地址问题。

[face=dissatisfy]功能缺陷：

  1. 评论框不能添加表情。
  2. 编辑器不能使用自定义表情

[face=dream]hack思路：

  1. 修改fckeditor编辑器，实现添加表情的字标，然后由程序后台即时将表情字标转换成为图片链接。
  2. 留言框添加插入表情功能

[face=innocent]hack过程：

全过程需要修改11个文件，后面会一一讲述如何修改。注意：我每用一个[face=plaint]表情的地方，表示要重新打开一个文件了。文章内容很长，大家细心看。

首先是修改fckeditor编辑器

[face=plaint]打开includeeditoreditorjsfckeditorcode_ie.js，使用ctrl+f查找功能查找以下代码（在第42行）

    

  1. var C=FCK.EditorDocument.createElement("IMG");C.className="Smile";C.src=A;C.alt=B;C.title=B;FCK.InsertElement(C); 
    2.

将以上代码替换为：

    

  1. FCK.InsertHtml("[face="+B+"]"); 
    2.

[face=plaint]然后再打开includeeditoreditorjsfckeditorcode_gecko.js，在第41行，找到和前面fckeditorcode_ie.js中一样的代码，并将其替换为：

    

  1. FCK.InsertHtml("[face="+B+"]"); 
    2.

编辑器修改完毕。

然后修改输出文件

[face=plaint]打开/modules/article.php文件，大约在244行左右，找到：

    

  1. //处理PHP高亮 
    2. 

  2. $article["content"] = preg_replace("/s*[php](.+?)[/php]s*/ies", "phphighlite("1")", $article["content"]); 
    3.

在这段代码下面添加上如下几行代码：（效果是将标准模式浏览界面下的表情字标转换为表情图片）

    

  1.  //处理表情 
    2. 

  2.  $article["content"] = preg_replace("/[face=(w*)]/i","<img class=smile alt="1" src="".$options[url]."images/smiles/1.gif" />", $article["content"]);    
    3.

[face=plaint]打开/modules/show.php文件，大约在142行左右，找到：

    

  1.  //处理PHP高亮 
    2. 

  2.  $article["content"] = preg_replace("/s*[php](.+?)[/php]s*/ies", "phphighlite("1")", $article["content"]); 
    3.

在其下面添加上如下几行代码：（效果是将显示文章的页面中的表情字标转换为表情图片）

    

  1.  //处理文章表情 
    2. 

  2.  $article["content"] = preg_replace("/[face=(w*)]/i","<img class=smile alt="1" src="".$options[url]."images/smiles/1.gif" />", $article["content"]);    
    3.

还是show.php文件，继续往下，大约在232行左右，找到：

    

  1. $comment["content"] = html_clean($comment["content"]); 
    2.

将这行代码替换为：(效果是将显示文章页面下部的评论中的表情字标转换为表情图片)

    

  1.  //处理评论表情 
    2. 

  2.  $comment["content"] = preg_replace("/[face=(w*)]/i","<img class=smile alt="[face=1]" src="".$options[url]."images/smiles/1.gif" />", html_clean($comment["content"])); 
    3.

[face=plaint]打开modulescomments.php，大约在29行左右，找到：

    

  1.  $comment["content"] = html_clean($comment["content"]); 
    2.

将这行代码替换为：（效果是将评论页面中的表情字标转换为表情图片）

    

  1. //处理评论表情 
    2. 

  2. $comment["content"] = preg_replace("/[face=(w*)]/i","<img class=smile alt="[face=1]" src="".$options[url]."images/smiles/1.gif" />", html_clean($comment["content"])); 
    3.

[face=plaint]打开includefunccache.func.php文件，大约在154行，找到：

    

  1. $newcomment["content"] = preg_replace("/[quote=(.*?)]s*(.+?)s*[/quote]/is", "", $newcomment["content"]); 
    2.

在其下方添加上一行代码：（效果，将侧边栏中的表情字标用表情的英文名替代输出，避免别人留言只留表情，而导致侧栏空白）

    

  1. $newcomment["content"] = preg_replace("/[face=(w*)]/i", "1 ", $newcomment["content"]); 
    2.

[face=plaint]打开includefunc emplate.func.php文件，大约在64行那里（空白行），插入一个新的函数：

    

  1. function addsmiles($var) {  
    2. 

  2.     return str_replace(""", """, preg_replace("/[([a-zA-Z0-9_-.x7f-xff]+)]/s", "["1"]", $var));  
    3. 

  3. }  
    4.

[face=plaint]打开includejscriptshow.js文件，大约在30行，找到：

    

  1. text = text.replace(/alt=("|)([^"s]*)("|)/g,"> $2 <");  
    2. 

  2. text = text.replace(/<[^<>]+>/g,"
");  
    3.

将其替换为：（效果，修正在引用别人留言时，表情字标的传递和显示）

    

  1. text = text.replace(/alt=("|)([^"s]*)("|)/g,">$2<"); 
    2. 

  2. text = text.replace(/<[^<>]+>/g,""); 
    3.

然后继续在show.js代码中，移动到45行（应该是空白行），添加一个新函数：

    

  1. function addsmiles(facename){ 
    2. 

  2.     $("content").value += "[face="+facename+"]"; 
    3. 

  3.     $("content").focus(); 
    4. 

  4. } 
    5.

最后是修改模板文件了

[face=plaint]打开templates你的模板文件夹show.php文件，找到评论框位置，找到如下内容（相似也行）

  1. 评论内容 (必填):<br />

在其后面添加上：

    

  1. <img style="cursor:pointer;" onclick="addsmiles("surprise")" src="$options[url]images/smiles/surprise.gif" /> 
    2. 

  2. <img alt="glade" style="cursor:pointer;" onclick="addsmiles("glade")" src="$options[url]images/smiles/glade.gif" /> 
    3. 

  3. <img alt="love" style="cursor:pointer;" onclick="addsmiles("love")" src="$options[url]images/smiles/love.gif" /> 
    4. 

  4. <img alt="cry" style="cursor:pointer;" onclick="addsmiles("cry")" src="$options[url]images/smiles/cry.gif" /> 
    5. 

  5. <img alt="sing" style="cursor:pointer;" onclick="addsmiles("sing")" src="$options[url]images/smiles/sing.gif" /> 
    6. 

  6. <img alt="fight" style="cursor:pointer;" onclick="addsmiles("fight")" src="$options[url]images/smiles/fight.gif" /> 
    7. 

  7. <img alt="bitter" style="cursor:pointer;" onclick="addsmiles("bitter")" src="$options[url]images/smiles/bitter.gif" /> 
    8. 

  8. <img alt="dream" style="cursor:pointer;" onclick="addsmiles("dream")" src="$options[url]images/smiles/dream.gif" /> 
    9. 

  9. <img alt="approve" style="cursor:pointer;" onclick="addsmiles("approve")" src="$options[url]images/smiles/approve.gif" /> 
    10. 

  10. <img alt="dissatisfy" style="cursor:pointer;" onclick="addsmiles("dissatisfy")" src="$options[url]images/smiles/dissatisfy.gif" /> 
    11. 

  11. <img alt="question" style="cursor:pointer;" onclick="addsmiles("question")" src="$options[url]images/smiles/question.gif" /> 
    12. 

  12. <img alt="plaint" style="cursor:pointer;" onclick="addsmiles("plaint")" src="$options[url]images/smiles/plaint.gif" /> 
    13. 

  13. <img alt="slaver" style="cursor:pointer;" onclick="addsmiles("slaver")" src="$options[url]images/smiles/slaver.gif" /> 
    14. 

  14. <img alt="incisor" style="cursor:pointer;" onclick="addsmiles("incisor")" src="$options[url]images/smiles/incisor.gif" /> 
    15. 

  15. <img alt="whistle" style="cursor:pointer;" onclick="addsmiles("whistle")" src="$options[url]images/smiles/whistle.gif" /> 
    16. 

  16. <img alt="pain" style="cursor:pointer;" onclick="addsmiles("pain")" src="$options[url]images/smiles/pain.gif" /> 
    17. 

  17. <img alt="feed" style="cursor:pointer;" onclick="addsmiles("feed")" src="$options[url]images/smiles/feed.gif" /> 
    18. 

  18. <img alt="esotropia" style="cursor:pointer;" onclick="addsmiles("esotropia")" src="$options[url]images/smiles/esotropia.gif" /> 
    19. 

  19. <img alt="faint" style="cursor:pointer;" onclick="addsmiles("faint")" src="$options[url]images/smiles/faint.gif" /> 
    20. 

  20. <img alt="innocent" style="cursor:pointer;" onclick="addsmiles("innocent")" src="$options[url]images/smiles/innocent.gif" /><br /> 
    21. 

  21. <img alt="fuck" style="cursor:pointer;" onclick="addsmiles("fuck")" src="$options[url]images/smiles/fuck.gif" /> 
    22. 

  22. <img alt="young" style="cursor:pointer;" onclick="addsmiles("young")" src="$options[url]images/smiles/young.gif" /> 
    23. 

  23. <img alt="football" style="cursor:pointer;" onclick="addsmiles("football")" src="$options[url]images/smiles/football.gif" /> 
    24. 

  24. <img alt="dead" style="cursor:pointer;" onclick="addsmiles("dead")" src="$options[url]images/smiles/dead.gif" /> 
    25. 

  25. <img alt="terror" style="cursor:pointer;" onclick="addsmiles("terror")" src="$options[url]images/smiles/terror.gif" /> 
    26. 

  26. <img alt="none" style="cursor:pointer;" onclick="addsmiles("none")" src="$options[url]images/smiles/none.gif" /> 
    27. 

  27. <img alt="smile" style="cursor:pointer;" onclick="addsmiles("smile")" src="$options[url]images/smiles/smile.gif" /> 
    28. 

  28. <img alt="awkard" style="cursor:pointer;" onclick="addsmiles("awkard")" src="$options[url]images/smiles/awkard.gif" /> 
    29. 

  29. <img alt="frisk" style="cursor:pointer;" onclick="addsmiles("frisk")" src="$options[url]images/smiles/frisk.gif" /> 
    30. 

  30. <img alt="fire" style="cursor:pointer;" onclick="addsmiles("fire")" src="$options[url]images/smiles/fire.gif" /> 
    31. 

  31. <img alt="sick" style="cursor:pointer;" onclick="addsmiles("sick")" src="$options[url]images/smiles/sick.gif" /> 
    32. 

  32. <img alt="sinister" style="cursor:pointer;" onclick="addsmiles("sinister")" src="$options[url]images/smiles/sinister.gif" /> 
    33. 

  33. <img alt="sleep" style="cursor:pointer;" onclick="addsmiles("sleep")" src="$options[url]images/smiles/sleep.gif" /> 
    34. 

  34. <img alt="shutup" style="cursor:pointer;" onclick="addsmiles("shutup")" src="$options[url]images/smiles/shutup.gif" /> 
    35. 

  35. <img alt="tongue" style="cursor:pointer;" onclick="addsmiles("tongue")" src="$options[url]images/smiles/tongue.gif"<

/span> /> 
    36. 

  36. <img alt="cool" style="cursor:pointer;" onclick="addsmiles("cool")" src="$options[url]images/smiles/cool.gif" /> 
    37. 

  37. <img alt="disch" style="cursor:pointer;" onclick="addsmiles("disch")" src="$options[url]images/smiles/disch.gif" /> 
    38. 

  38. <img alt="deride" style="cursor:pointer;" onclick="addsmiles("deride")" src="$options[url]images/smiles/deride.gif" /> 
    39. 

  39. <img alt="angry" style="cursor:pointer;" onclick="addsmiles("angry")" src="$options[url]images/smiles/angry.gif" /> 
    40. 

  40. <img alt="shy" style="cursor:pointer;" onclick="addsmiles("shy")" src="$options[url]images/smiles/shy.gif" /><br /> 
    41.

修改RSS页面输出

[face=plaint]打开
ss.php，找到大约150行的如下代码：

    

  1. //处理PHP高亮 
    2. 

  2. $article["content"] = preg_replace("/s*[php](.+?)[/php]s*/ies", "phphighlite("1")", $article["content"]); 
    3.

在这段代码后面插入：      

    

  1. //处理文章表情 
    2. 

  2. $article["content"] = preg_replace("/[face=(w*)]/i","<img class=smile alt="1" src="".$options[url]."images/smiles/1.gif" />", $article["content"]); 
    3.

修改WAP页面输出

[face=plaint]打开wapindex.php文件，找到587行，如下：

    

  1. $article["content"] = html2text(str_replace(array("[php]","[/php]"),"",$article["content"])); 
    2.

在这一行前面添加上：

    

  1. //处理文章表情 
    2. 

  2. $article["content"] = preg_replace("/[face=(w*)]/i","<img class=smile alt="1" src="".$options[url]."images/smiles/1.gif" />", $article["content"]);    
    3.

[face=plaint]完成这以上所有工作了，我们现在打开includeeditoreditorimagessmiles文件夹，然后发现里面很多表情。然后我们打开imagessmiles文件夹，先将这里面的表情备份到别处，然后将includeeditoreditorimagessmiles这个里面的全部表情复制到imagessmiles中，这样，所有表情就能够正常使用了。

如果需要自定义表情

[face=approve]需要自定义表情，请先将新表情肤知道imagessmiles文件夹中，然后打开includeeditoreditorfckconfig.js文件，拉到最后，找到FCKConfig.SmilesImages，将后面方括号中的表情文件名称按照原来的格式修改为新的表情的文件名，为了美观，也可以将表情框宽度"FCKConfig.SmilesPanelWidth  = 200 ;"修改一下，最后就是修改模板文件中的show.php，将原来的图片按照格式换成新的图片，自定义表情就完成了。

PS.这篇文章总共重新修改了3遍，修改的文件太多，写的时候，就写漏了，现在的应该没有问题了。文末附上部分文件修改后的代码，解压缩后，直接覆盖即可。

PS.我这是第五遍修改了……[face=dead]

如果在修改过程中发现什么问题，请留言！[face=tongue]

Tags bug, fckeditor, Sablog-x, 自定义, 表情 | Permalink | Comments (6)