您的位置：首页 > 编程语言 > Java开发

ckeditor的使用以及配置

2016-12-26 00:00 309 查看

摘要: 本博客主要介绍ckeditor的replace,replaceall,ckeditor实例，javascript使用ckeditor的四种方式，另外，介绍ckeditor的相关配置，以方便自定义使用

1.使用ckeditor需要做的准备工作

需要下载ckeditor相关的.war文件(官网下载即可)，所谓的.war文件，其实就是我们一般的所说的项目归档文件；

将下好的文件，粘贴到我们的tomact服务器下面的webapps文件夹中；

手动启动服务器，这时候，webapps下面就会多出来一个ckeditor的项目，其实就是我们.war文件的解压。

##2.使用ckeditor标签替换页面的指定文本域

既然是使用ckeditor标签，自然，我们就需要导入相关的包。那包文件在哪里找呢？其实，上面我们不是说过，服务器启动后，会多出来一个ckeditor的项目，我这里是ckeditor-java-3.6.6.2，这就是一个开源项目，我们在里面的WEB-INF->lib找到一个.jar文件，就是我们需要导入的标签库的包，我这里是ckeditor-java-core-3.5.3.jar；

我们在jsp页面中引入标签库，跟我们引入jstl的标签库一样的方式

<%@ taglib prefix="ckeditor" uri="http://ckeditor.com" %>

至于相关参数，例如，prefix等我们怎么知道，填什么的呢？我们将jar文件粘贴到我们项目的WEB-INF->lib中后，就会生成一个Referenced Libraries，在里面找到我们的jar文件，其中在META-INF中会有一个ckeditor.tld的文件，这个里面就有我们所需要的参数；

我们将tomacat->wbeapps中的ediotr项目中的ckeditor文件夹拷贝到我们项目的webroot下面。因为我们替换时需要指定basePath；

我们在jsp页面中写一个textarea,并给它一个id，接着用ckeditor标签去进行替换

<form>
<textarea id="content" style=""></textarea>
</form>
<ckeditor:replace replace="content" basePath="ckeditor"></ckeditor:replace>

其中，replace属性是我们的textarea的id，basePath指我们的ckeditor文件夹的路径

##2.使用ckeditor替换页面所有的文本域

具体的实现方法与上面一样，可能在页面中我们有多个textarea标签,(注意要设置每个标签的id不一样)，然后我们利用repaceAll来具体实现

<form>
<textarea id="content"></textarea>
<textarea id="content2"></textarea>
</form>
<ckeditor:replaceAll basePath="ckeditor"></ckeditor:replaceAll>

##3.使用ckeditor创建实例

这里我们可能就不再需要textarea标签了，而是直接创建一个ckeditor实例

<form>
<ckeditor:editor editor="content" basePath="ckeditor" config="<%=cfg %>"></ckeditor:editor>
</form>

其中这里的editor属性，类似于，我们创建textarea时指定的name和id，config是我们的配置信息，我们可能需要配置ckeditor。(后面我会写到)

##4.使用javascript直接替换文本域

上面的三种方式，都有一种共同点，就是我们需要使用到java语言。那么我们能不能用一种与服务端无关的语言去进行替换呢？实际上，我们是可以直接利用javascript进行文本域的替换。

1、在页面<head>中引入ckeditor核心文件ckeditor.js
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
2、在使用编辑器的地方插入HTML控件<textarea>
<textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>
如果是ASP.NET环境，也可用服务器端控件<TextBox>
<asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox>
注意在控件中加上 class="ckeditor" 。
3、将相应的控件替换成编辑器代码
<script type="text/javascript">
CKEDITOR.replace('TextArea1');
//如果是在ASP.NET环境下用的服务器端控件<TextBox>
CKEDITOR.replace('tbContent');
//如果<TextBox>控件在母版页中，要这样写
CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$") %>');
</script>

<form>
<textarea id="content" name="content"></textarea>
</form>
<script>
window.onload = function(){
CKEDITOR.replace("content");
}
</script>

在页面加载的时候，我们去执行CKEDITOR.replace("content");在这里我们需要导入ckeditor文件夹下面的ckeditor.js

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

上面我主要讲了ckeditor使用的4中方式，下面我介绍ckeditor的相关配置

##5.ckeditor常见的几种配置参数。这里只是简单列举。参数有很多

下面是ckeditor常见的几种配置参数

ckeditor的配置都集中在 ckeditor/config.js 文件中，下面是一些常用的配置参数：
// 界面语言，默认为 'en'
config.language = 'zh-cn';
// 设置宽高
config.width = 400;
config.height = 400;
//编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'
config.skin = 'v2';
// 背景颜色
config.uiColor = '#FFF';
// 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js
config.toolbar = 'Basic';
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']
];
//工具栏是否可以被收缩
config.toolbarCanCollapse = true;
//工具栏的位置
config.toolbarLocation = 'top';//可选：bottom
//工具栏默认是否展开
config.toolbarStartupExpanded = true;
// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js
config.resize_enabled = false;
//改变大小的最大高度
config.resize_maxHeight = 3000;
//改变大小的最大宽度
config.resize_maxWidth = 3000;
//改变大小的最小高度
config.resize_minHeight = 250;
//改变大小的最小宽度
config.resize_minWidth = 750;
// 当提交包含有此编辑器的表单时，是否自动更新元素内的数据
config.autoUpdateElement = true;
// 设置是使用绝对目录还是相对目录，为空为相对目录
config.baseHref = ''
// 编辑器的z-index值
config.baseFloatZIndex = 10000;

##6.ckeditor配置的两种方式

通过CKEditorConfig对象来进行配置，配置完成之后，要在ckeditor标签中绑定config信息

<%
CKEditorConfig cfg = new CKEditorConfig();
cfg.addConfigValue("width","600");//设置高度
cfg.addConfigValue("skin","office2003"); //设置主题
//设置禁止拖拽
cfg.addConfigValue("resize_enabled",false);
%>
<ckeditor:editor editor="content" basePath="ckeditor" config="<%=cfg %>"></ckeditor:editor>

可以看到，这样其实是很繁琐的，因为我们要以这种键值对的方式去进行设置，而且需要在jsp页面中写入java代码，于是，我们一般可以通过第二种方式。

通过设置config.js来进行配置

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.width = 700;
config.height = 300;
config.resize_enabled = false;

//自定义工具条
config.toolbar_Full = [
['Source','-','Save','NewPage','Preview','-','Templates']
];
};

我们可以修改config.js来进行ckeditor的相关配置，但是一定要注意引入的问题，我们需要引入这个js文件在第四种使用方式中，前三种不需要是因为，我们使用ckeditor标签的时候，指明的basePath。

##7.ckeditor提交表单

这里与我们普通的提交表单方式一样。

<form action="EditorServlet" method="post">
<textarea id="content" name="content"></textarea>
<input type="submit" value="提交"/>
</form>
<ckeditor:replace replace="content" basePath="ckeditor"></ckeditor:replace>

String content = request.getParameter("content");
System.out.println(content);
request.setAttribute("content",content);
request.getRequestDispatcher("result.jsp").forward(request, response);

<body>
${content }
</body>

其中，要注意的一点是，一般我们需要将内容存放到数据库中，再从数据库中取出来，这样一来，就很容易出现中文乱码的问题，为了防止这个问题，最好是将，我们的content采用url编码方式存放到数据库中，从数据库中取出来的时候，我们再利用url解码，这样就防止中文乱码问题。即URLEncoder.encode(s, enc)和URLEncoder.decode(s, enc)方法，其中s是我们的content，enc即我们需要设置的编码方式，一般“utf-8”

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CKEditor Java JSP Blog

相关文章推荐

新的分享

章节导航