fckeditor

javascript获取FCKeditor内容

发表:   阅读: 335次  关键字：FCKeditor   字体:[ ]

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

// 获取编辑器中HTML内容
function getEditorHTMLContents(EditorName) {
    var oEditor = FCKeditorAPI.GetInstance(EditorName);
    return(oEditor.GetXHTML(true));
}

// 获取编辑器中文字内容
function getEditorTextContents(EditorName) {
    var oEditor = FCKeditorAPI.GetInstance(EditorName);
    return(oEditor.EditorDocument.body.innerText);
}

// 设置编辑器中内容
function SetEditorContents(EditorName, ContentStr) {
    var oEditor = FCKeditorAPI.GetInstance(EditorName) ;
    oEditor.SetHTML(ContentStr) ;
}

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

在当前页获得 FCK 编辑器实例：
var Editor = FCKeditorAPI.GetInstance('InstanceName');

从 FCK 编辑器的弹出窗口中获得 FCK 编辑器实例：
var Editor = window.parent.InnerDialogLoaded().FCK;

从框架页面的子框架中获得其它子框架的 FCK 编辑器实例：
var Editor = window.FrameName.FCKeditorAPI.GetInstance('InstanceName');

从页面弹出窗口中获得父窗口的 FCK 编辑器实例：
var Editor = opener.FCKeditorAPI.GetInstance('InstanceName');

获得 FCK 编辑器的内容：
oEditor.GetXHTML(formatted); // formatted 为：true|false，表示是否按HTML格式取出
也可用：
oEditor.GetXHTML();

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

插入内容到 FCK 编辑器：
oEditor.InsertHtml("html"); // "html"为HTML文本

检查 FCK 编辑器内容是否发生变化：
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

使用方法如下：
oEditor.Commands.GetCommand('FitWindow').Execute();

= FCKConfig.BasePath + 'plugins/' 
// FCKConfig.Plugins.Add( 'placeholder', 'en,it' ) ;

 

使用JS获取FCKEditor中的内容

2008年4月21日

1. // 获取FCKEditor中的内容: content为Editor实例的ID
2. function getEditorContents(){
3.    var oEditor = FCKeditorAPI.GetInstance("content");
4.    alert(oEditor.GetXHTML(true));
5. }
7. // 向编辑器插入指定代码
8. function insertHTMLToEditor(codeStr){
9.    var oEditor = FCKeditorAPI.GetInstance("content");
10.    if (oEditor.EditMode==FCK_EDITMODE_WYSIWYG){
11.      oEditor.InsertHtml(codeStr);
12.    }else{
13.      return false;
14.    }
15. }
17. // 统计编辑器中内容的字数
18. function getLength(){
19.    var oEditor = FCKeditorAPI.GetInstance("content");
20.    var oDOM = oEditor.EditorDocument;
21.    var iLength ;
22.    if(document.all){
23.      iLength = oDOM.body.innerText.length;
24.    }else{
25.      var r = oDOM.createRange();
26.      r.selectNodeContents(oDOM.body);
27.      iLength = r.toString().length;
28.    }
29.    alert(iLength);
30. }
32. // 执行指定动作
33. function ExecuteCommand(commandName){
34.    var oEditor = FCKeditorAPI.GetInstance("content") ;
35.    oEditor.Commands.GetCommand(commandName).Execute() ;
36. }
38. // 设置编辑器中内容
39. function SetContents(codeStr){
40.    var oEditor = FCKeditorAPI.GetInstance("content") ;
41.    oEditor.SetHTML(codeStr) ;
42. }

 

fckeditor常用Js,获取fckeditor内容,统计fckeditor字数,向fckeditor写入指定代码

2010-09-11 15:52:36 作者： 来源：

fckeditor常用Js,获取fckeditor内容,统计fckeditor字数,向fckeditor写入指定代码

content相当于你例子中的FCKeditor1。
代码如下:
//获取格式化的编辑器内容
function getEditorContents(){
var oEditor = FCKeditorAPI.GetInstance(“content”);
alert(oEditor.GetXHTML(true));
}
//向编辑器插入指定代码
function insertHTMLToEditor(codeStr){
var oEditor = FCKeditorAPI.GetInstance(“content”);
if (oEditor.EditMode==FCK_EDITMODE_WYSIWYG){
oEditor.InsertHtml(codeStr);
}else{
return false;
}
}
//统计编辑器中内容的字数
function getLength(){
var oEditor = FCKeditorAPI.GetInstance(“content”);
var oDOM = oEditor.EditorDocument;
var iLength ;
if(document.all){
iLength = oDOM.body.innerText.length;
}else{
var r = oDOM.createRange();
r.selectNodeContents(oDOM.body);
iLength = r.toString().length;
}
alert(iLength);
}
//执行指定动作
function ExecuteCommand(commandName){
var oEditor = FCKeditorAPI.GetInstance(“content”) ;
oEditor.Commands.GetCommand(commandName).Execute() ;
}
//设置编辑器中内容
function SetContents(codeStr){
var oEditor = FCKeditorAPI.GetInstance(“content”) ;
oEditor.SetHTML(codeStr) ;
}

 

 

三种方法调用FCKeditor

2009-06-03 17:05

三种方法调用FCKeditor
1.FCKeditor自定义标签 (必须加头文件 <%@ taglib uri="/TestFCKeditor" prefix="FCK" %> )
2.script脚本语言调用 (必须引用 脚本文件 )
3.FCKeditor API 调用 (必须加头文件 <%@ page language="java" import="com.fredck.FCKeditor.*" %> )
--%>

<%--

width="700" height="500" skinPath="/TestFCKeditor/FCKeditor/editor/skins/silver/"
toolbarSet = "Default">
内容

--%>

input

<%--

<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "content" ) ;
oFCKeditor.setBasePath( "/TestFCKeditor/FCKeditor/" ) ;
oFCKeditor.setValue( "input" );
out.println( oFCKeditor.create() ) ;
%>

--%>


添加文件/TestFCKeditor/show.jsp:
<%
String content = request.getParameter("content");
out.print(content);
%>


＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝


1、适时打开编辑器
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
很多时候，我们在打开页面的时候不需要直接打开编辑器，而在用到的时候才打开，这样一来有很好的用户体验，另一方面可以消除FCK在加载时对页面打开速度的影响，点击“Open Editor"按钮后才打开编辑器界面。

实现原理：
使用JAVASCRIPT版的FCK，在页面加载时（未打开FCK），创建一个隐藏的TextArea域，这个TextArea
的name和ID要和创建的FCK实例名称一致，然后点击"Open Editor"按钮时，通过调用一段函数，使用
FCK的ReplaceTextarea()方法来创建FCKeditor，代码如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－




2、使用FCKeditor 的 API
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKeditor编辑器，提供了非常丰富的API，用于给End User实现很多想要定制的功能，比如最基本的数据验证，如何在提交的时候用JS判断当前编辑器区域内是否有内容，FCK的API提供了GetLength()方法；

再比如如何通过脚本向FCK里插入内容，使用InsertHTML()等；

还有，在用户定制功能时，中间步骤可能要执行FCK的一些内嵌操作，那就用ExecuteCommand()方法。

详细的API列表，请查看FCKeditor的Wiki。而常用的API，请查看FCK压缩包里的_samples/html/sample08.html。此处就不贴代码了。


3、外联编辑条（多个编辑域共用一个编辑条）
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
这个功能是2.3版本才开始提供的，以前版本的FCKeditor要在同一个页面里用多个编辑器的话，得一个个创建，现在有了这个外联功能，就不用那么麻烦了，只需要把工具条放在一个适当的位置，后面就可以无限制的创建编辑域了。

要实现这种功能呢，需要先在页面中定义一个工具条的容器：

，然后再根据这个容器的id属性进行设置。

JAVASCRIPT实现代码：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

FCKeditor 1:



FCKeditor 2:

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
此部分的详细DEMO请参照_samples/html/sample11.html，_samples/html/sample11_frame.html


4、文件管理功能、文件上传的权限问题
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
一直以来FCKeditor的文件管理部分的安全是个值得注意，但很多人没注意到的地方，虽然FCKeditor在各个Release版本中一直存在的一个功能就是对上传文件类型进行过滤，但是她没考虑过另一个问题：到底允许谁能上传？到底谁能浏览服务器文件？

之前刚开始用FCKeditor时，我就出现过这个问题，还好NetRube（FCKeditor中文化以及FCKeditor ASP版上传程序的作者）及时提醒了我，做法是去修改FCK上传程序，在里面进行权限判断，并且再在fckconfig.js里把相应的一些功能去掉。但随之FCK版本的不断升级，每升一次都要去改一次配置程序fckconfig.js，我发觉厌烦了，就没什么办法能更好的控制这种配置么？事实上，是有的。

在fckconfig.js里面，有关于是否打开上传和浏览服务器的设置，在创建FCKeditor时，通过程序来判断是否创建有上传浏览功能的编辑器。首先，我先在fckconfig.js里面把所有的上传和浏览设置全设为false，接着我使用的代码如下：

JAVASCRIPT版本：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－


在按钮旁边加文字
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
打开 editor/js/ 两个js文件
fckeditorcode_gecko.js
fckeditorcode_ie.js

第一个是支持非ie浏览器的
第二个文件是支持ie浏览器的

搜索 FCKToolbarButton，可以看到许多类似这样的语句：
case 'Save':B = new FCKToolbarButton('Save', FCKLang.Save, null, null, true, null, 3); break;

'Save'是按钮英文名字
FCKToolbarButton 的四个参数分别是：
按钮命令名称，按钮标签文字，按钮工具提示，按钮样式，按钮是否在源代码模式可见，按钮下拉菜单其中将第4项参数设置为 FCK_TOOLBARITEM_ICONTEXT 即可使按钮旁边出现文字，注意没有引号。
例如：
case 'Preview':B = new FCKToolbarButton('Preview', FCKLang.Preview, null, FCK_TOOLBARITEM_ICONTEXT, true, null, 5);
这样我们就可以将 我们经常用的3种模式源代码、预览、全屏编辑按钮都加上文字了。


解释fck样式的工作原理
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
fck的样式设置涉及到了两个文件，一个是你定义好的样式表文件.css，另一个是告诉fck样式表如何使用的xml文件，两个文件确一不可。
css文件的位置是不做要求的，但是需要你在应用的编辑器的页面上插入样式表文件的链接。这样才能显示出来样式。
fckstyles.xml 在与editor目录同级的目录下。该文件定义了那些样式可以使用在那些标签里面。

这就是fck自带的样式xml定义：










每一个

如果你在fck选定了文字 “经典论坛 》 前台制作与脚本专栏 》 FCKeditor 实战技巧 - 1 》 编辑帖子” 应用该样式 则原来文字就会变成经典论坛 》 前台制作与脚本专栏 》 FCKeditor 实战技巧 - 1 》 编辑帖子

注意：如果编辑器呈整页编辑状态，那么整页里面也需要插入样式表链接才能显示出来样式。


＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝


FCKeditor JavaScript API（翻译整理）
原文地址：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCK 编辑器加载后，将会注册一个全局的 FCKeditorAPI 对象。

FCKeditorAPI 对象在页面加载期间是无效的，直到页面加载完成。如果需要交互式地知道 FCK 编辑器已经加载完成，可使用“FCKeditor_OnComplete”函数。


在当前页获得 FCK 编辑器实例：
var oEditor = FCKeditorAPI.GetInstance('InstanceName');

从 FCK 编辑器的弹出窗口中获得 FCK 编辑器实例：
var oEditor = window.parent.InnerDialogLoaded().FCK;

从框架页面的子框架中获得其它子框架的 FCK 编辑器实例：
var oEditor = window.FrameName.FCKeditorAPI.GetInstance('InstanceName');

从页面弹出窗口中获得父窗口的 FCK 编辑器实例：
var oEditor = opener.FCKeditorAPI.GetInstance('InstanceName');

获得 FCK 编辑器的内容：
oEditor.GetXHTML(formatted); // formatted 为：true|false，表示是否按HTML格式取出
也可用：
oEditor.GetXHTML();

设置 FCK 编辑器的内容：
oEditor.SetHTML("content", false); // 第二个参数为：true|false，是否以所见即所得方式设置其内容。此方法常用于“设置初始值”或“表单重置”操作。

插入内容到 FCK 编辑器：
oEditor.InsertHtml("html"); // "html"为HTML文本

检查 FCK 编辑器内容是否发生变化：
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
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
使用方法如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
oEditor.Commands.GetCommand('FitWindow').Execute();
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

 

 

直接通过FckEditorAPI获取编辑器实例，然后修改：


准备条件：执行初始化代码：
 

如何取值？取值相对比较简单：
var content = FCKeditorAPI.GetInstance("FCKmessage").GetXHTML("true");  


如何赋值？赋值的情况相对比较复杂。这是因为FCKEditor编辑器有两种模式，一种是源代码模式，一种是可视化编辑模式。这两种模式赋值的情况是不一样的。
实现代码如下,代码实际没这么复杂，可以参考简化实现。
 

简化模式
 

调用：
var htmlStr = "我要重新设置的内容";
SetFCKEditor(htmlStr);