CKEditorWord下载.docx

CKEditorWord下载.docx

《CKEditorWord下载.docx》由会员分享，可在线阅读，更多相关《CKEditorWord下载.docx（23页珍藏版）》请在冰豆网上搜索。

textareaname="

editor1"

&

lt;

p&

gt;

Initialvalue.&

/p&

/textarea>

∙注意，如果你想要加载一些数据到编辑器中，例如从数据库中读出数据，只需要把数据放在文本区域（textarea）内就可以了，就像上面的例子一样。

在这个例子中，我们已经将文本区域（textarea）命名这“editor1”.当接收POST提交的数据时，这个名字将被用在服务器操作。

现在，开始使用CKEditorJavascriptAPI,我们用一个编辑器实例来“替换（replace）”这个普通的文本区域（textarea），为此一段JavaScript命令是必须的：

CKEDITOR.replace（'

editor1'

）;

∙上面的脚本块只能包含在网页的<

textarea>

标签之后。

也可以在<

标签内运行这个替换过程，但是在这种情况下你需要对“window.onload”事件进行监听：

window.onload=function（）

{

};

∙第三步：

保存编辑器内容数据

∙按照先前的描述，编辑器正如一个文本区域（textarea）一样工作，所以，当提交一个包含一个编辑器实例的表单时，他的数据也将是很简单的传递，用文本区域（textarea）的名称作为健名来接收数据。

举个例子，按照上面的例子，在PHP中我们需要像这样来处理数据：

?

php

$editor_data=$_POST['

];

∙客户端数据处理

∙一些用应中（如ajax应用）需要在客户端处理完所有的数据，然后用它自己的方式向服务器发送数据，在这些情况下，使用CKEditorAPI就足以轻松获取编辑器实例中的内容。

例如：

vareditor_data=CKEDITOR.instances.editor1.getData（）;

∙完整例子

html>

title>

Sample-CKEditor<

/title>

body>

formmethod="

post"

p>

MyEditor:

br/>

/p>

inputtype="

submit"

/>

/form>

/body>

/html>

CKEditor

百科名片

CKEditor即大名鼎鼎的FCKeditor，它终于在最近发布新版本了，与增加版本号不同，这次完全把它改名了，更名为CKeditor。

这应该是和它的开发公司CKSource的名字有关吧，该公司的另一个产品为CKFinder（一个Ajax文件管理器），这次可能为了保持一致，将FCK更改为CK，但是版本号继承了下来，为CKeditor3.0版。

　　开发者指南

　　安装安装CKEditor是一件容易的工作，只需要按照下面的简单步骤就可以完成。

　　1.从CKEditor官方网站上下载CKEditor的最新版本。

　　2.将下载的文件解压到你网站目录下的“ckeditor”文件夹里。

　　注意：

测试你的安装编辑器附带有一些用来验证安装结果是否能正常运行的简单的例子网页，请查看“_samples”目录。

http:

/_samples/index.html

　　例如：

　　http:

//www.您的网站.com/ckeditor/_samples/index.html集成有若干个方式能将CKEditor集成到你的网页中，在这里介绍最常用的实现方法。

第一步：

载入CKEditorCKEditor是一个JavaScript应用程序，你只需要在你的网页中包含一个文件引用就能加载它。

<

　　...

　　<

用以上方式加载，CKEditorJavaScriptAPI就准备就绪，可以使用了。

第二步：

创建一个编辑器实例CKEditor就像一个在你网页中的文本区域（textarea）一样工作，它提供了一个简单易写的用户界面、版式和丰富的文字输入区域，但用文本区域要实现同样的效果，并不容易，它需要用户输入html代码。

　　但是，实际上，CKEditor仍然是使用一个文本区域来传递它的数据到服务器上，这个文本区域对使用者来说是不可见的，所以，你必需创建并编辑一个实例,首先创建一个实例：

注意，如果你想要加载一些数据到编辑器中，例如从数据库中读出数据，只需要把数据放在文本区域（textarea）内就可以了，就像上面的例子一样。

　　CKEDITOR.replace（'

上面的脚本块只能包含在网页的<

　　window.onload=function（）

　　{

　　};

第三步：

保存编辑器内容数据按照先前的描述，编辑器正如一个文本区域（textarea）一样工作，所以，当提交一个包含一个编辑器实例的表单时，他的数据也将是很简单的传递，用文本区域（textarea）的名称作为健名来接收数据。

php

　　$editor_data=$_POST['

　　?

客户端数据处理一些用应中（如ajax应用）需要在客户端处理完所有的数据，然后用它自己的方式向服务器发送数据，在这些情况下，使用CKEditorAPI就足以轻松获取编辑器实例中的内容。

　　vareditor_data=CKEDITOR.instances.editor1.getData（）;

完整例子<

　　MyEditor:

CKeditorHYPERLINK"

文章分类:

WebHYPERLINK"

第一步：

基本配置

CKEditor+CKFinder配置流水账：

CKEditor：

1.解压CKEditor到webRoot目录，在应用页面加载其ckeditor.js;

2.页面textarea：

[html]<

textareacols=”80″;

name=”editor1″rows=”10″>

;

[/html]

CKFinder：

3.解压CKFinder到webRoot目录（最好与CKEditor同级），在应用页面加载其ckfinder.js;

4.页面script：

（最好textarea之后）

[javascript]

if（typeofCKEDITOR==‘undefined’）{

document.write（’加载CKEditor失败’）;

}

else{

vareditor=CKEDITOR.replace（’editor1′）;

CKFinder.SetupCKEditor（editor,‘../ckeditor/ckfinder/’）;

//ckfinder总目录的相对路径.

[/javascript]

整合：

（把俩js加载到同一文件其实就已经基本整合好了，还需要修改的配置如下）

5.打开\ckfinder\config.php，修改$baseUrl=‘（上传附件的存放路径）’;

//以webRoot为起始的绝对路径，其目录下会自动生成images、flash等子目录；

默认是在webRoot的根目录下，注意修改。

至此配置完毕，如果需要自定义界面，可进行以下的高级修改：

6.在ckeditor\config.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码：

[css]

//字体.

config.font_names=‘宋体;

楷体;

新宋体;

黑体;

隶书;

幼圆;

微软雅黑;

Arial;

ComicSansMS;

CourierNew;

Tahoma;

TimesNewRoman;

Verdana;

’;

//工具按钮.

config.toolbar=

[

['

Source'

'

-'

Save'

NewPage'

Preview'

Templates'

],

Cut'

Copy'

Paste'

PasteText'

PasteFromWord'

Print'

SpellChecker'

Scayt'

Undo'

Redo'

Find'

Replace'

SelectAll'

RemoveFormat'

Form'

Checkbox'

Radio'

TextField'

Textarea'

Select'

Button'

'

ImageButton'

HiddenField'

‘/’,

Bold'

Italic'

Underline'

Strike'

Subscript'

Superscript'

NumberedList'

BulletedList'

Outdent'

Indent'

Blockquote'

JustifyLeft'

JustifyCenter'

JustifyRight'

JustifyBlock'

Link'

Unlink'

Anchor'

Image'

Flash'

Table'

HorizontalRule'

Smiley'

SpecialChar'

PageBreak'

Styles'

Format'

Font'

FontSize'

TextColor'

BGColor'

Maximize'

ShowBlocks'

About'

]

];

//宽度

config.width=500;

//高度

config.height=400;

//皮肤

config.skin=’v2′;

//等等……

[/css]

安装CKFinder后才能有上传功能:

第二步：

设置CKFinder的上传功能

由于本次CKEditor全新改版，没有提供文件上传功能，所以选择整合CKFinder是个不错的选择

需要修改一下CKEditor插件文件夹下的JS源码，以image插件为例（Flash及Files同理）：

Code

//将下边的代码做一些修改

//{type:

button'

id:

browse'

align:

center'

label:

mon.browseServer,hidden:

false,filebrowser:

info:

txtUrl'

}]}]},

//2009-07-13将浏览服务器按钮置为显示状态（hidden:

false）,增加onClick函数，用于打开ckfinder页面,紧接着上面的代码添加

{type:

'

id:

align:

label:

mon.browseServer,hidden:

false,filebrowser:

onClick:

function（）{varfinder=newCKFinder（）;

finder.BasePath='

../ckfinder20090716/'

finder.SelectFunction=SetFileField;

finder.Popup（）;

}}]}]},

在方法体外增加下边的函数

//用于取回ckfinder返回的图片地址并对路径文本框和预览图片进行赋值

functionSetFileField（fileUrl）

{

//获取主Div下的所有文本框控件

varinputStr=document.getElementById（"

cke_txtContent_dialog"

）.getElementsByTagName（"

Input"

）;

for（vari=0;

i<

inputStr.length;

i++）

{

if（inputStr[i].type=="

text"

）

//第一个输入框控件是图像路径，得到ID，设置新的图片路径

CKEDITOR.document.getById（inputStr[i].id）.setValue（fileUrl）;

break;

}

CKEDITOR.document.getById（'

previewImage'

）.setAttribute（'

src'

decodeURI（fileUrl））;

第三步：

CKFINDER上传问题：

出现“因为安全原因，文件不可浏览.请联系系统管理员并检查CKFinder配置文件“

整合后会出现“因为安全原因，文件不可浏览.请联系系统管理员并检查CKFinder配置文件“

TheSolution:

1.Thereisnowriteaccessforthedefaultuploadfolder$baseUrl='

/userfiles/'

inckfinder/config.php.

对于目标文件夹$baseUrl='

没有写入权限

2.ThisismaybebecausetheReturnvalueofFuncationCheckAuthentication（）isalwaysFALSEbydefaultinckfinder/config.php.ChangetheValidationConditionaccordingtoyourcondition,notrecommendtosetthereturnvaluetotruedirectly.

因为出于安全考虑ckfinder/config.php文件中的CheckAuthentication（）函数默认返回值是false,需要手动修改验证条件,不建议直接返回true

一、使用方法：

1、在页面<

中引入ckeditor核心文件ckeditor.js

ckeditor/ckeditor.js"

2、在使用编辑器的地方插入HTML控件<

textareaid="

TextArea1"

cols="

20"

rows="

2"

class="

ckeditor"

如果是ASP.NET环境，也可用服务器端控件<

TextBox>

asp:

TextBoxID="

tbContent"

runat="

server"

TextMode="

MultiLine"

/asp:

注意在控件中加上class="

。

3、将相应的控件替换成编辑器代码

CKEDITOR.replace（'

TextArea1'

//如果是在ASP.NET环境下用的服务器端控件<

tbContent'

//如果<

控件在母版页中，要这样写

%=tbContent.ClientID.Replace（"

_"

"

$"

）%>

4、配置编辑器

ckeditor的配置都集中在ckeditor/config.js文件中，下面是一些常用的配置参数：

//界面语言，默认为'

en'

config.language='

zh-cn'

//设置宽高

config.width=400;

config.height=400;

//编辑器样式，有三种：

kama'

（默认）、'

office2003'

、'

v2'

config.skin='

//背景颜色

config.uiColor='

#FFF'

//工具栏（基础'

Basic'

、全能'

Full'

、自定义）plugins/toolbar/plugin.js

config.toolbar='

这将配合：

config.toolbar_Full=[

],

'