在线编辑器

最新推荐文章于 2020-12-19 21:12:55 发布

lishuanglearn

最新推荐文章于 2020-12-19 21:12:55 发布

阅读量353

点赞数

最近在自己做的项目中需要用到在线编辑器,在网上搜了下，发现了ckeditor，当然网上有好几种在线编辑器，不知道为什么选择了ckeditor,本来打算用Fckeditor的，但是看到网上还需要导入好几个JAR包，还要进行一堆配置，有点麻烦，本来项目中也就用一下，还要那么麻烦地去配置。

于是去ckeditor网站下载了最新版本的ckeditor，ckeditor是fckeditor的下一代版本，于是顺带把fckeditor和ckeditor都下载下来测试下哪个更好用。经过比较还是ckeditor的门槛比较低，两行代码就搞定了，但是配置了fckeditor却没有起作用，于是就选择了ckeditor，也许大家还是用fckeditor的比较多。不过既然ckeditor门槛低那就自然选择ckeditor了。

不多废话了，下面就来说下ckeditor的使用吧！

要使用ckeditor，当然首先就是去http://ckeditor.com/ (ckeditor网站)下载ckeditor的压缩包，现在最新的是ckeditor_3.3.zip

下载后将压缩包解压，将解压后文件夹中的ckeditor文件夹copy到自己的web项目的WebRoot目录下。

打开ckeditor目录，可以看到文件夹结构如下

ckeditor

---_samples

---_source

---adapters

---images

---lang

---plugins

---skins

---themes

....

---ckeditor.js

---config.js

...

从每个文件夹和每个文件的名字我们就可以很容易看出它们的作用，_samples文件夹下放的自然就是供我们学习如何使用的样例程序了。

拿到一个我们以前没用过的东西，首先要看的当然就是它给的例子了，这可以让我们对这个程序有个整体的了解并快速掌握简单的使用方法。

想要在JSP页面中引用ckeditor是非常简单的一件事，前面我们只要已经将解压的ckeditor文件夹copy到WebRoot目录下了，只需要在jsp文件的代码中要加入ckeditor的位置加上如下代码，(比如我们要在一个form中使用ckeditor)。

下面在index.jsp(笔者建的一个测试页面)中引用ckeditor并测试

<%@ page language="Java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/JavaScript" src="ckeditor/ckeditor.js"></script>
</head>

<body>
<%
  String content=request.getParameter("editor1");
  if(content!=null&&!content.equals("")){
   out.println(content);
  }
   %>
    <form name="testForm" method="post" action="<%=path %>/index.jsp">
    <textarea cols="80" id="editor1" name="editor1" rows="10">
      在此添加内容
    </textarea>
    <script type="text/javascript">
    CKEDITOR.replace( 'editor1',
     {
      skin : 'kama',
      language : 'zh-cn'
     });
   </script>
    <input type="submit" value="提交"/>
    </form>
</body>
</html>

比较关键的代码在代码中已用红色和蓝色标出，要能在页面中使用就要先将ckeditor目录下的ckeditor.js加入页面

form表单的写法还如我们未使用ckeditor时一样，只需要在页面中加入一段javascript代码，上面已经用蓝色

标出.

CKEDITOR.replace('要用ckeditor取代的textarea的name属性值或id属性值',{要设置的ckeditor属性:属性值,......});

上面的蓝色代码显示我将editor的皮肤风格设置为kama,在ckeditor的skins文件夹下默认还有office2003和vi两种皮肤风格

将ckeditor的语言设置为zh-cn(简体中文).当然你也可以根据个人需要设置更多的属性。这里不过多介绍，大家可以通过样例中

和压缩包中提供的文档进行学习

要想提取我们在编辑器中编辑的内容并在页面上显示也和我们提取表单数据一样

<%
  String content=request.getParameter("editor1");
  if(content!=null&&!content.equals("")){
   out.println(content);
  }
   %>

这段代码显示了如何提取编辑器中内容。这里我将表单提交到页面本身。

通过上面的介绍，大家应该可以看出使用ckeditor的方便快捷。大家不需要任何的改变就可以在项目中引用在线编辑器了。

当然要想根据自己的需求进行定制就需要进行一些更深入的学习，不过也并不难。

我们可以在项目中新建一个ckconfig.js文件专门用来定制自己的ckeditor，下面贴出一个本人自己的配置

[javascript] view plain copy print ?

/*
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'zh-cn'; //配置语言
config.uiColor = '#BFEFFF'; //背景颜色
config.width = 700; //宽度
config.height = 300; //高度
config.skin='kama';
//工具栏
config.toolbar =
[
['Source','Bold','Italic'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Smiley'],
['Styles','Font','FontSize'],
['TextColor'],
['Undo','Redo']
];
};

你可以根据自己的需要定制，下面贴出一个含有完整工具栏的配置文件 ,供大家参考定制自己的工具栏

[javascript] view plain copy print ?

/*
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config )
{
config.language = 'zh-cn';
config.width = 900;
config.height = 300;
config.skin = 'kama';
// 背景颜色
config.uiColor = '#BFEFFF';
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'],
['Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor']
];
};

CKEDITOR.editorConfig = function( config )
{
config.language = 'zh-cn';
    config.width = 900;
    config.height = 300;
    config.skin = 'kama';
// 背景颜色
    config.uiColor = '#BFEFFF';
  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'],
       ['Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
       '/',
        ['Styles','Format','Font','FontSize'],
        ['TextColor','BGColor']
    ];
    };

只要在页面中将你的配置文件和ckeditor.js同时引入页面，就可以显示你自己定义的ckeditor了。

lishuanglearn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在线编辑器

最近在自己做的项目中需要用到在线编辑器,在网上搜了下，发现了ckeditor，当然网上有好几种在线编辑器，不知道为什么选择了ckeditor,本来打算用Fckeditor的，但是看到网上还需要导入好几个JAR包，还要进行一堆配置，有点麻烦，本来项目中也就用一下，还要那么麻烦地去配置。于是去ckeditor网站下载了最新版本的ckeditor，ckeditor是fckeditor的下一代
复制链接

扫一扫