phpckeditor使用教程,PHP网页制作中ckEditor的使用方法

PHP网页制作中ckEditor的使用方法

点击次数&＃xff1a;        发布时间&＃xff1a;2015-12-24 09:34:23

一、ckEditor的调用方式——JS代码调用&＃xff1a;

Ckeditor的初始化内容&＃xff0c;作为textarea的value值. You are using CKEditor.

CKEDITOR.replace( &＃39;editor1&＃39; );

其实很简单&＃xff0c;包含Ckeditor的js文件&＃xff0c;生成textarea&＃xff0c;用就是语句替换。js预计替换&＃xff0c;可以进行更为详细的配置&＃xff0c;下文将做详细说明。

二、Ckeditor工具栏自定义设置

1.在Ckeditor根目录的config.js中设置&＃xff1a;

config.toolbar &＃61; &＃39;Full&＃39;;

config.toolbar_Full &＃61;

[

[&＃39;Source&＃39;,&＃39;-&＃39;,&＃39;Save&＃39;,&＃39;NewPage&＃39;,&＃39;Preview&＃39;,&＃39;-&＃39;,&＃39;Templates&＃39;],

[&＃39;Cut&＃39;,&＃39;Copy&＃39;,&＃39;Paste&＃39;,&＃39;PasteText&＃39;,&＃39;PasteFromWord&＃39;,&＃39;-&＃39;,&＃39;Print&＃39;, &＃39;SpellChecker&＃39;, &＃39;Scayt&＃39;],

[&＃39;Undo&＃39;,&＃39;Redo&＃39;,&＃39;-&＃39;,&＃39;Find&＃39;,&＃39;Replace&＃39;,&＃39;-&＃39;,&＃39;SelectAll&＃39;,&＃39;RemoveFormat&＃39;],

[&＃39;Form&＃39;, &＃39;Checkbox&＃39;, &＃39;Radio&＃39;, &＃39;TextField&＃39;, &＃39;Textarea&＃39;, &＃39;Select&＃39;, &＃39;Button&＃39;, &＃39;ImageButton&＃39;, &＃39;HiddenField&＃39;],

&＃39;/&＃39;,

[&＃39;Bold&＃39;,&＃39;Italic&＃39;,&＃39;Underline&＃39;,&＃39;Strike&＃39;,&＃39;-&＃39;,&＃39;Subscript&＃39;,&＃39;Superscript&＃39;],

[&＃39;NumberedList&＃39;,&＃39;BulletedList&＃39;,&＃39;-&＃39;,&＃39;Outdent&＃39;,&＃39;Indent&＃39;,&＃39;Blockquote&＃39;],

[&＃39;JustifyLeft&＃39;,&＃39;JustifyCenter&＃39;,&＃39;JustifyRight&＃39;,&＃39;JustifyBlock&＃39;],

[&＃39;Link&＃39;,&＃39;Unlink&＃39;,&＃39;Anchor&＃39;],

[&＃39;Image&＃39;,&＃39;Flash&＃39;,&＃39;Table&＃39;,&＃39;HorizontalRule&＃39;,&＃39;Smiley&＃39;,&＃39;SpecialChar&＃39;,&＃39;PageBreak&＃39;],

&＃39;/&＃39;,

[&＃39;Styles&＃39;,&＃39;Format&＃39;,&＃39;Font&＃39;,&＃39;FontSize&＃39;],

[&＃39;TextColor&＃39;,&＃39;BGColor&＃39;],

[&＃39;Maximize&＃39;, &＃39;ShowBlocks&＃39;,&＃39;-&＃39;,&＃39;About&＃39;]

];

config.toolbar_Basic &＃61;

[

[&＃39;Bold&＃39;, &＃39;Italic&＃39;, &＃39;-&＃39;, &＃39;NumberedList&＃39;, &＃39;BulletedList&＃39;, &＃39;-&＃39;, &＃39;Link&＃39;, &＃39;Unlink&＃39;,&＃39;-&＃39;,&＃39;About&＃39;]

];

上述代码中第一行&＃xff0c;即为设定默认工具栏的&＃xff0c;可以改写为&＃xff1a;

config.toolbar &＃61; &＃39;Basic&＃39;;

2.在用js代码调用Ckeditor时设置&＃xff1a;

CKEDITOR.replace( &＃39;editor1&＃39;,

{

toolbar :

[

[&＃39;Styles&＃39;, &＃39;Format&＃39;],

[&＃39;Bold&＃39;, &＃39;Italic&＃39;, &＃39;-&＃39;, &＃39;NumberedList&＃39;, &＃39;BulletedList&＃39;, &＃39;-&＃39;, &＃39;Link&＃39;, &＃39;-&＃39;, &＃39;About&＃39;]

]

});

3.以上两种方法的综合&＃xff1a;

在Ckeditor根目录下的config.js文件中设置好多组toolbar&＃xff0c;如方法1示

例代码去掉第一行&＃xff1b;调用Ckeditor时的代码如下&＃xff1a;

CKEDITOR.replace( &＃39;editor1&＃39;,

{

toolbar : &＃39;Full&＃39;

});

CKEDITOR.replace( &＃39;editor2&＃39;,

{

toolbar : &＃39;Basic&＃39;

});

三、Ckeditor语言、字体及皮肤样式自定义

Ckeditor支持多国语言&＃xff0c;并提供三种皮肤样式&＃xff1a;kama、office2003和v2&＃xff0c;可以在Ckeditor根目录下的config.js文件中进行设置&＃xff1a;

config.language &＃61; &＃39;zh-cn&＃39; ;

config.skin &＃61; &＃39;office2003&＃39;;

也可以在js调用Ckeditor时设置&＃xff1a;

CKEDITOR.replace( &＃39;editor1&＃39;,

{

toolbar : &＃39;Full&＃39;,

language : &＃39;zh-cn&＃39;,

skin : &＃39;office2003&＃39;

});

CKEDITOR.replace( &＃39;editor2&＃39;,

{

toolbar : &＃39;Basic&＃39;,

language : &＃39;zh-cn&＃39;;

skin : &＃39;kama&＃39;

});

四、Ckeditor添加中文字体

1.在Ckeditor根目录下的config.js文件中添加&＃xff1a;

config.font_names &＃61; &＃39;宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS&＃39;;

2.在用js代码调用Ckeditor时添加&＃xff1a;

CKEDITOR.replace( &＃39;editor1&＃39;,

{

toolbar : &＃39;Full&＃39;,

language : &＃39;zh-cn&＃39;,

skin : &＃39;office2003&＃39;,

config.font_names : &＃39;宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS&＃39;