加载CKeditor

最新推荐文章于 2024-11-15 14:43:33 发布

原创最新推荐文章于 2024-11-15 14:43:33 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #flash #date #session #office #2010

JavaScript 专栏收录该内容

162 篇文章

订阅专栏

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

回答者： wsljava - 二级 2010-6-22 16:41

在你想要添加编辑器的页面加上这些代码,注意js的路径

<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',//editor1是你文本域的ID

  {

   skin : 'kama'//想要使用的皮肤

  });

//]]>

</script>