ckeditor3.3.1 怎么使用啊

ckeditor 3.3.1 编辑器使用说明

1、编辑器调用：

=======================================================================

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

<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>

2、皮肤设置：【注意：脚本replace后的名称要和编辑器名称对应】

===============================皮肤一===================================

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

<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>

<script type="text/javascript">

//<![CDATA[

CKEDITOR.replace( 'editor1',

{

skin : 'kama'

})

//]]>

</script>

===============================皮肤二===================================

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

<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>

<script type="text/javascript">

//<![CDATA[

CKEDITOR.replace( 'editor1',

{

skin : 'office2003'

})

//]]>

</script>

===============================皮肤三===================================

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

<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>

<script type="text/javascript">

//<![CDATA[

CKEDITOR.replace( 'editor1',

{

skin : 'v2'

})

//]]>

</script>

3、用户界面颜色设置

===============================默认颜色===================================

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

<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>

<script type="text/javascript">

//<![CDATA[

// Replace the <textarea id="editor">with an CKEditor

// instance, using default configurations.

CKEDITOR.replace( 'editor1',

{

extraPlugins : 'uicolor',

toolbar :

[

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

[ 'UIColor' ]

]

})

//]]>

</script>

===============================#14B8C4颜色===================================

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

<textarea class="ckeditor" cols="80" id="editor1" name="editor2" rows="10"></textarea>

<script type="text/javascript">

//<![CDATA[

// Replace the <textarea id="editor">with an CKEditor

// instance, using default configurations.

CKEDITOR.replace( 'editor2',

{

extraPlugins : 'uicolor',

uiColor: '#14B8C4',

toolbar :

[

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

[ 'UIColor' ]

]

} )

//]]>

</script>

4、让编辑器支持文件、图片、Flash上传的调用方法【注意：必须配合ckfinder使用】

===========================================================================

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

<textarea class="ckeditor" cols="80" id="Content" name="Content" rows="10"></textarea>

<script type="text/javascript">

CKEDITOR.replace( 'Content',

{

filebrowserBrowseUrl : '/ckfinder/ckfinder.html',

filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',

filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',

filebrowserUploadUrl : '/ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Files',

filebrowserImageUploadUrl : '/ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Images',

filebrowserFlashUploadUrl : '/ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Flash'

})

</script>

5、ckeditor与ckfinder的配置【使用ckfinder必须安装AspJpeg组件】

============================================================================

CKEditor图片上传功能开启方法：

调用方法如下(假设CKFinder在网站根目录，可以使用相对路径)：

CKEDITOR.replace( 'editor1',

{

filebrowserBrowseUrl : '/ckfinder/ckfinder.html',

filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',

filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',

filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',

filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',

filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'

})

同时默认情况下是禁止上传的，还需要打开CKFinder目录下的config.php，CheckAuthentication()函数的权限值，如:CheckAuthentication = Session( "UserName" )

============================================================================

更改CKEditor图片上传路径：

打开CKFinder目录下的config.php，修改baseUrl = "/ckfinder/userfiles/"即可

=============================================================================

5、ckeditor与ckfinder的配置【使用ckfinder必须安装AspJpeg组件】

============================================================================

CKEditor图片上传功能开启方法：

调用方法如下(假设CKFinder在网站根目录，可以使用相对路径)：

CKEDITOR.replace( 'editor1',

{

filebrowserBrowseUrl : '/ckfinder/ckfinder.html',

filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',

filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',

filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',

filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',

filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'

})

同时默认情况下是禁止上传的，还需要打开CKFinder目录下的config.php，CheckAuthentication()函数的权限值，如:CheckAuthentication = Session( "UserName" )

============================================================================

更改CKEditor图片上传路径：

打开CKFinder目录下的config.php，修改baseUrl = "/ckfinder/userfiles/"即可

============================================================================

修改上传文件名为日期时间格式：

找到ckfinder\core\connector\asp\CommandHandler目录下的FileUpload.asp文件，查找下面语句

sFileName = oUFS.getFileNameWithoutExtension( sOriginalFileName ) &"(" &iCounter &")." &sExtension

修改为

sFileName = year(date) &month(date) &day(date) &hour(time) &minute(time) &second(time) &"." &sExtension

修改后生成的文件名格式如：2010620164241.jpg

添加“插入代码”的按钮，起名为code。在ckeditor/plugins下新建文件夹code，在code文件夹里加入一个小图片如code.gif，然后在code文件夹里新建plugin.js文件，内容如下：

01 CKEDITOR.plugins.add(

02 "code",

03 {

04 requires:["dialog"],

05 lang:["en"],

06 init:function (a)

07 {

08 a.addCommand("code", new CKEDITOR.dialogCommand("code"))

09 a.ui.addButton(

10 "Code",

11 {

12 label:"插入代码",

13 command:"code",

14 icon:this.path + "code.gif"

15 })

16 CKEDITOR.dialog.add("code", this.path + "dialogs/code.js")

17 }

18 }

19 )

3. 修改config.js来注册code插件。用如下代码替换config.js原来内容：

01 CKEDITOR.editorConfig = function( config )

02 {

03 config.language = 'zh-cn'

04 config.extraPlugins = 'code'

05 config.height = 400

06 config.uiColor = '#14B8C4'

07 config.skin = 'kama'

08 config.toolbar = [

09 ['Source'],

10 ['Image'],

11 ['SpecialChar'],

12 ['FontSize'],

13 ['TextColor'],

14 ['Smiley'],

15 ['Code'],

16 ]

17 }

注意我的CKEditor配置都是通过修改config.js来完成

4. 安装CKEditor，在要引入CKEditor的页面中script标签内添加如下js代码：

1 CKEDITOR.replace('editor1', {})

其中editor1是我的textarea的id名

5. 配置完成后效果

---