ckeditor4.2.2插件应用

最新推荐文章于 2024-08-10 23:07:18 发布

原创最新推荐文章于 2024-08-10 23:07:18 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

ckeditor 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在Web应用中使用CKEditor替代传统的TextArea，并提供了自定义工具栏的方法，包括导入CKEditor插件、配置工具栏选项、改变样式以及基本的配置参数，帮助开发者提升编辑体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先下载最新的ckeditor的插件ckeditor4.2.2和ckeditor-java-core-3.5.3的jar文件
下载链接：http://ckeditor.com/download
ckeditor解压后ckeditor复制到webroot目录下，把ckeditor-java-core-3.5.3文件复制到WebRoot/WEB-INF/lib下

在当前jsp页面中：导入<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

标题：<input name="title" type="text"/>
           <br />
内容：<textarea name="content" row="10" cols="20"></textarea><br>

用ckeditor代替textarea的方法：
方法一：<textarea name="content" row="10" cols="20"></textarea>
后面添加：
<script type="text/javascript">CKEDITOR.replace('content');</script>
方法二：定义一段javascript

<script type="text/javascript">
   window.onload = function()
   {
       CKEDITOR.replace( 'content' );
   };
</script>

注意；要改变ckeditor的样式，需要重新配置config.js文件
简单的一些配置：
config.language = 'zh-cn';// 界面语言，默认为 'en'
    config.width = 400; // 设置宽高
    config.height = 400;// 设置高度
    config.skin = 'v2';// 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'
    config.uiColor = '#FFF'; // 背景颜色

Ckeditor工具栏自定义设置
// 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js
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'],
'/',
['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.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];