CKeditor 在网页中的整合

最新推荐文章于 2024-07-12 16:27:40 发布

weixin_34327223

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量93

点赞数

文章标签： javascript php ViewUI

原文链接：https://my.oschina.net/frylan/blog/54766

版权

为什么80%的码农都做不了架构师？>>>

1.在http://ckeditor.com/download上下载最新版本的CKeditor。将下载的文件解压，然后将4M多的文件减肥：可以删掉_samples、_source、_tests这三个无用的文件夹；打开lang文件夹，删掉除_languages.js、en.js、zh-cn.js以外的所有文件；如果你不用office2003和v2两种皮肤，可以把skin目录下的这两个目录也都删掉。这样就做的了准备工作。

将ckeditor压缩包解压放在网站根目录下的“ckeditor”文件夹里：

引入ckeditor.js文件：

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

你也可以将这些文件放在你网站的其他任何一个地方，默认为“ckeditor”。

2.在要使用ckeditor编辑器的地方插入脚本：

<script type="text/javascript">CKEDITOR.replace( '多行文本的name',{skin : "kama",width:520} );</script>

如：

<textarea cols="80" rows="10" name="message">Please input the content in here</textarea>

<script type="text/javascript">CKEDITOR.replace( 'message',{skin : "kama",width:520} );</script>

这样就将name为message的多行文本替换成了ckeditor编辑器形式的输入框

3.获取内容：

<?php

$message=$_POST['message'];

?>

4.自定义ckeditor

4-1.设置编辑器皮肤、宽高

如：

<textarea  cols="90" rows="10" id="content" name="content">cftea</textarea>

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

<script type="text/javascript">

<!--

CKEDITOR.replace("content",

  {

      skin: "kama", width:700, height:300

  });

//-->

</script>

4-2.自定义ckeditor的工具栏：

CKEditor 工具栏是一个JavaScript数组，

数组里面包含了要显示的工具的名字。

工具栏的命名规则为：“toolbar_<name>”，

“<name>”是定义的工具栏名字。

下面代码中是CKEditor默认定义好的两个工具栏，

“Full”和“Basic”，并且默认使用的是“Full”工具栏

config.toolbar = 'Full';

 

config.toolbar_Full =

[

['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'],

['BidiLtr', 'BidiRtl'],

'/',

['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

['Link','Unlink','Anchor'],

['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],

'/',

['Styles','Format','Font','FontSize'],

['TextColor','BGColor'],

['Maximize', 'ShowBlocks','-','About']

];

 

config.toolbar_Basic =

[

['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']

];

(1)用户可以在config.js里自定义工具栏：

CKEDITOR.editorConfig = function( config )

{

config.toolbar = 'MyToolbar';//把默认工具栏改为‘MyToolbar’

config.toolbar_MyToolbar =

[

    ['NewPage','Preview'],

    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],

    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],

    '/',

    ['Styles','Format'],

    ['Bold','Italic','Strike'],

    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],

    ['Link','Unlink','Anchor'],

    ['Maximize','-','About']

];

};

你也可以定义多个Toolbar，然后在不同的地方使用不同的toolbar属性的设置：

CKEDITOR.replace( 'editor1',

{

    toolbar : 'MyToolbar'

});

 

CKEDITOR.replace( 'editor2',

{

    toolbar : 'Basic'

});

(2)你也可以在调用CKEditor的地方直接定义新的工具栏

CKEDITOR.replace( 'editor1',

{

    toolbar :

    [

        ['Styles', 'Format'],

        ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']

    ]

});

这样网页中也可以有编辑器了。

转载于:https://my.oschina.net/frylan/blog/54766