CY’s Weblog

集成WYSIWYG编辑器FCKeditor到MT等程序中

April 13, 2005 on 11:27 am | 电脑网络 | 4条评论

今天才下载了FCKeditor _2.0 rc3 一个功能f非常强大的所见即所得开源html编辑器（WYSIWYG ）。除了支持各种常用的功能外，还支持表格，文本域，添加图片表情，等等。。。（点这里看Demo）

还有一点，就是安装过程非常简单。

以Movable Type 3.15为例子的傻瓜安装过程。
[请注意，未必适用于其他MT版本！3.2建议步骤看下面]

首先到这里下载FCkeditor 2.0 rc3，解压，上传。
不过要注意两点

1. 在你的网站的根目录下的建立一个fckeditor目录，必须把编辑器传到这个目录下。
2. _docs _packager _samples _testcases 这四个目录里的文件不必上传。

然后进入 ../cgi-bin/mt/tmpl/cms 下，修改 edit_entry.tmpl 这个文件
在文件开头，<TMPL_INCLUDE NAME="header.tmpl"> 的下方加入下面的代码：

<head>
<script type="text/javascript" src="http://你的网站/fckeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( ‘text’ ) ;
  oFCKeditor.Height = "600" ;
  oFCKeditor.Width = "577" ;
  oFCKeditor.ReplaceTextarea() ;
}
    </script>
</head>

大功告成了！

如果你希望你的访客在给你留言的时候也能使用FKeditor。首先别忘了打开MT的评论功能，然后修改Individual Entry Archive这个模版。

最后保存重建，搞定！

至于在其他的论坛或blog程序中集成FCKeditor，你只要把 var oFCKeditor = new FCKeditor( ‘text’ ) ; 中的text改称你要替换的文本域的代号。

比如一下这个文本域的代号就是 “text”
<textarea tabindex="2" id="text" name="text" rows="10" cols="50"></textarea>

如果你希望了解更多，自己进一步自定义FCKeditor，可以参照_doc的中的文档。

－－－－－－

以上步骤可能不适用于MT 3.2，但是你也可试一试。:-)

如果不行，请看下面的步骤 by DDK

http://blog.cyberlynx.idv.tw/archives/000059.html 小人物記事本

参考原作者：
http://weblog.leidenuniv.nl/users/klaassenplf/archives/2005/06/10/tutorial_wysiwyg_under_movable_type_3x.html
　

在http://www.fckeditor.net/download/default.html下载的2.2版FCKeditor

　
1. 从自己网站下面将/cgi-bin/tmpl/cms 目录底下的header.tmpl以及edit_entry.tmpl两个文件抓下来修改

　
2. 首先用记事本打开header.tmpl，在<head>…..</head>中间加入：
　
<script type="text/javascript"
src="<TMPL_VAR NAME=STATIC_URI>FCKeditor/fckeditor.js"></script>

pFCKeditor = new FCKeditor( ‘text_more’ ) ;
pFCKeditor.BasePath = ‘<TMPL_VAR NAME=STATIC_URI>FCKeditor/’ ;
pFCKeditor.Width = 580 ;
pFCKeditor.Height = 400 ;
pFCKeditor.CheckBrowser = true ;
pFCKeditor.ReplaceTextarea() ;

qFCKeditor = new FCKeditor( ‘excerpt’ ) ;
qFCKeditor.BasePath = ‘<TMPL_VAR NAME=STATIC_URI>FCKeditor/’ ;
qFCKeditor.ToolbarSet = "MTExcerpt" ;
qFCKeditor.Width = 580 ;
qFCKeditor.Height = 200 ;
qFCKeditor.CheckBrowser = true ;
qFCKeditor.ReplaceTextarea() ;
}
</script>

3. 修改完后令存新文件：header_edit_entry.tmpl

　
4. 接着打开edit_entry.tmpl文件，将标头
<TMPL_INCLUDE NAME="header.tmpl">
修改成
<TMPL_INCLUDE NAME="header_edit_entry.tmpl">

　
5. 用搜寻功能找到<div class="field-buttons">，刪除其下
<script type="text/javascript">….</</script>中间的代码。
用意是將MT內建预设的內文编辑介面删除

　
6. 再用搜寻功能找到下一个<div class="field-buttons">，也將下面的
<script type="text/javascript">….</</script>删除。
这里是将延伸内问的部分

　
7. 打开FCKeditor目录底下的fckconfig.js文件，这里将修改预设载入的FCKeditor工具条。找到FCKConfig.ToolbarSets["Default"]
这段代码，用原始作者建议的代码覆盖。
　
FCKConfig.ToolbarSets["Default"] = [
['Source'],
['Cut','Copy','Paste','PasteText','PasteWord','-'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Table','Rule','Smiley','SpecialChar','UniversalKey'] ,
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
‘ /’,
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['About']
] ;

　
8. 接着上面的步骤继续贴上这段
　
FCKConfig.ToolbarSets["MTExcerpt"] = [
['Source'],
['Bold','Italic','Underline','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;

　
9. 将预设的image以及linkBrowser关闭
FCKConfig.LinkBrowser = false ;
FCKConfig.ImageBrowser = false ;

　
10. 至此，将edit_entry.tmpl以及header_edit_entry.tmpl两个文件传回原是目录，并在mt-static目录下面新增一个FCKeditor目录然后将里面的资料全部上传。

　
11. 登陆网站，到文章编辑介面应该就可以看到FCKeditor的编辑介面了！

By CY | 来自BlogCY

4 条评论 »

订阅本文之评论 |

看了你的blog很长学问，我是一名初学者

评论来自于 Anonymous | 21 May, 2005 #
给mt增加WYSIWYG编辑器FCKeditor

今天看了CY’s Weblog一篇为mt集成FCKeditor的blog，觉得非常有用，而且安装也非常方便，相比mt的其他pulgin或者hack，FCKeditor的集成对mt系统文件的修改相对较少，便于以后的升级。 1。到FCKeditor去下…

Trackback 来自于张微波的BLOG | 28 June, 2005 #
对JavaScript的重新认识

原以为许多网站的在线编辑器是采用ActiveX，阅读了下面两篇文章发现JavaScript具有这么强大的功能…

Trackback 来自于王志军个人空间 | 25 March, 2006 #
我出现了XML request Error (404 not found), 你知道如何解决么，谢谢!

评论来自于 Kris | 25 April, 2006 #