ckeditor的使用以及配置

时间 2019-11-13

标签 ckeditor 使用以及配置繁體版

原文原文链接

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

须要下载ckeditor相关的.war文件(官网下载便可)，所谓的.war文件，其实就是咱们通常的所说的项目归档文件；
将下好的文件，粘贴到咱们的tomact服务器下面的webapps文件夹中；
手动启动服务器，这时候，webapps下面就会多出来一个ckeditor的项目，其实就是咱们.war文件的解压。

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

既然是使用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的文件，这个里面就有咱们所须要的参数；java

咱们将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文件夹的路径web

##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。(后面我会写到)app

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

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

一、在页面<head>中引入ckeditor核心文件ckeditor.js
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
二、在使用编辑器的地方插入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" 。
三、将相应的控件替换成编辑器代码
<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.jsjsp

<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”