Velocity 和 JS 操作 FCKEditor
发表于：2007-07-10 | 零回复

　　其实很早以前就使用过FCKeditor，那是在做一个新闻发布系统中，当时使用jsp + struts来开发，FCKeditor在jsp下的配置在网上有很多相关的文章，这里就不多说了。现在使用Velocity开发tycho时，也用到了 FCKeditor，其实配置和jsp一样，只是思维需要转换一下，即，网上所介绍的jsp下使用FCKeditor一般都是在jsp页面上生成实例，而 Velocity并不能完成这一需求，那么我们将FCKeditor的实例放在后台bean中生成，并放入request，然后在Velocity中对其进行设置。后台bean中写法如下：

  1. FCKeditor fckEditor = new FCKeditor(super.getRequest()); 
  2. request.setAttribute("fckEditor", fckEditor); 

Velocity页在中取到这个实例并对其进行设置：

  1. $!{fckEditor.setHeight("190")} 
  2. $!{fckEditor.setWidth("420")} 
  3. $!{fckEditor.setBasePath("fckeditor/")} 
  4. $!{fckEditor.setToolbarSet("Basic")} 
  5. $!{fckEditor.setInstanceName("comment")} 
  6. $!{fckEditor.create()} 

非常简单，比用jsp实现要容易多了。至少不用设置page。

利用Javascript取和设FCKeditor值也是非常容易的，如下：

  1. // 获取编辑器中HTML内容 
  2. function getEditorHTMLContents(EditorName) { 
  3.     var oEditor = FCKeditorAPI.GetInstance(EditorName); 
  4.     return(oEditor.GetXHTML(true)); 
  5. } 
  6. // 获取编辑器中文字内容 
  7. function getEditorTextContents(EditorName) { 
  8.     var oEditor = FCKeditorAPI.GetInstance(EditorName); 
  9.     return(oEditor.EditorDocument.body.innerText); 
  10. } 
  11. // 设置编辑器中内容 
  12. function SetEditorContents(EditorName, ContentStr) { 
  13.     var oEditor = FCKeditorAPI.GetInstance(EditorName) ; 
  14.     oEditor.SetHTML(ContentStr) ; 
  15. } 

FCKeditorAPI是FCKeditor加载后注册的一个全局对象，利用它我们就可以完成对编辑器的各种操作。

在当前页获得 FCK 编辑器实例：

  1. var Editor = FCKeditorAPI.GetInstance(‘InstanceName’); 

从 FCK 编辑器的弹出窗口中获得 FCK 编辑器实例：

  1. var Editor = window.parent.InnerDialogLoaded().FCK; 

从框架页面的子框架中获得其它子框架的 FCK 编辑器实例：

  1. var Editor = window.FrameName.FCKeditorAPI.GetInstance(‘InstanceName’); 

从页面弹出窗口中获得父窗口的 FCK 编辑器实例：

  1. var Editor = opener.FCKeditorAPI.GetInstance(‘InstanceName’); 

获得 FCK 编辑器的内容：

  1. oEditor.GetXHTML(formatted); // formatted 为：true|false，表示是否按HTML格式取出 

也可用：

  1. oEditor.GetXHTML(); 

设置 FCK 编辑器的内容：

  1. // 第二个参数为：true|false， 
  2. // 是否以所见即所得方式设置其内容。 
  3. // 此方法常用于"设置初始值"或"表单重置"哦作。 
  4. oEditor.SetHTML("content", false);  

插入内容到 FCK 编辑器：

  1. oEditor.InsertHtml("html"); // "html"为HTML文本 

检查 FCK 编辑器内容是否发生变化：

  1. oEditor.IsDirty(); 

在 FCK 编辑器之外调用 FCK 编辑器工具条命令：

DocProps, Templates, Link, Unlink, Anchor, BulletedList, NumberedList, About, Find, Replace, Image, Flash, SpecialChar, Smiley, Table, TableProp, TableCellProp, UniversalKey, Style, FontName, FontSize, FontFormat, Source, Preview, Save, NewPage, PageBreak, TextColor, BGColor, PasteText, PasteWord, TableInsertRow, TableDeleteRows, TableInsertColumn, TableDeleteColumns, TableInsertCell, TableDeleteCells, TableMergeCells, TableSplitCell, TableDelete, Form, Checkbox, Radio, TextField, Textarea, HiddenField, Button, Select, ImageButton, SpellCheck, FitWindow, Undo, Redo

使用方法如下：

  1. oEditor.Commands.GetCommand(‘FitWindow’).Execute(); 

　　这只是 FCKEditor 庞大体系中的一点点东西。

评论留言