Ckeditor-富文本编辑器安装使用加实战

2017-10-22

JS工具

字数统计: 1.9k | 阅读时长≈ 8 分钟

移步官网（https://ckeditor.com/）

安装

安装CKEditor是一件容易的工作，只需要按照下面的简单步骤就可以完成。

1.从CKEditor官方网站上下载CKEditor的最新版本。

2.将下载的文件解压到你网站目录下的“ckeditor”文件夹里。

注意：你也可以将这些文件放在你网站的任何一个地方，默认为“ckeditor”。测试你的安装编辑器附带有一些用来验证安装结果是否能正常运行的简单的例子网页，请查看“_samples”目录。访问如下的地址进行测试：

1
2
3

http://<你的网站域名>/<CKEditor 安装路径>/_samples/index.html

例如：http://www.您的网站.com/ckeditor/_samples/index.html

集成

有若干个方式能将CKEditor集成到你的网页中，在这里介绍最常用的实现方法。

第一步：载入CKEditor

CKEditor 是一个JavaScript 应用程序，你只需要在你的网页中包含一个文件引用就能加载它。

如果你已经将CKEditor安装在了你网站的“ckeditor”目录，你可参照如下示例：

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

用以上方式加载，CKEditor JavaScript API 就准备就绪，可以使用了。

第二步：创建一个编辑器实例

CKEditor就像一个在你网页中的文本区域（textarea）一样工作，它提供了一个简单易写的用户界面、版式和丰富的文字输入区域。但用文本区域要实现同样的效果，并不容易，它需要用户输入html代码。

但是，实际上，CKEditor仍然是使用一个文本区域来传递它的数据到服务器上，这个文本区域对使用者来说是不可见的。所以，你必需创建并编辑一个实例,首先创建一个实例：

1	<textarea name="editor1"><p>Initial value.</p></textarea>

注意，如果你想要加载一些数据到编辑器中，例如从数据库中读出数据，只需要把数据放在文本区域（textarea）内就可以了，就像上面的例子一样。在这个例子中，我们已经将文本区域（textarea）命名这“editor1”。当接收POST提交的数据时，这个名字将被用在服务器操作。现在，开始使用CKEditor Javascript API,我们用一个编辑器实例来“替换（replace）”这个普通的文本区域（textarea），为此，必须加入如下一段JavaScript代码：

1
2
3

<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>

上面的脚本块只能包含在网页的<textarea>标签之后。也可以在<head>标签内运行这个替换过程，但是在这种情况下，你必须确定已经载入完毕，通常可以写在window.onload事件里面（这时DOM肯定已经载入完毕啦）：

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

第三步：保存编辑器内容数据

按照先前的描述，编辑器正如一个文本区域（textarea）一样工作，所以，当提交一个包含一个编辑器实例的表单时，他的数据也将是很简单的传递，用文本区域（textarea）的名称作为健名来接收数据。举个例子，按照上面的例子，在PHP中我们需要像这样来处理数据：

1
2
3

<?php
$editor\_data = $\_POST\[ 'editor1' \];
?>

客户端数据处理一些用应中（如ajax应用）需要在客户端处理完所有的数据，然后用它自己的方式向服务器发送数据，在这些情况下，使用CKEditor API就足以轻松获取编辑器实例中的内容。例如：

1
2
3

<script type="text/javascript">
var editor_data = CKEDITOR.instances.editor1.getData();
</script>

完整小例子

<html>
<head>
<title>Sample - CKEditor</title>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>
<body>
<form method="post">
<p>
My Editor:<br />
<textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
</p>
<p><input type="submit" /></p>
</form>
</body>
</html>

实战例子

HTML

<form class="layui-form" action="">
 <div class="clear pd-15 bg-fafafa bor bor-col-e8ebf2">
 <div class="layui-form-item">
 <label class="layui-form-label pt-10 pb-10 pl-0 pr-0 col-black">文章标题：</label>
 <div class="layui-input-block">
 <input type="text" name="main_title" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input">
 </div>
 </div>
 <div class="layui-form-item">
 <label class="layui-form-label pt-10 pb-10 pl-0 pr-0 col-black">文章副标题：</label>
 <div class="layui-input-block">
 <input type="text" name="subheading" lay-verify="required" placeholder="请输入文章副标题" autocomplete="off" class="layui-input">
 </div>
 </div>
 <div class="layui-form-item">
 <label class="layui-form-label pt-10 pb-10 pl-0 pr-0 col-black">作者：</label>
 <div class="layui-input-block">
 <input type="text" name="author" lay-verify="required" placeholder="请输入作者" autocomplete="off" class="layui-input">
 </div>
 </div>
 <div class="layui-form-item">
 <label class="layui-form-label pt-10 pb-10 pl-0 pr-0 col-black">阅读量：</label>
 <div class="layui-input-block">
 <input type="text" name="readings" lay-verify="required|number" placeholder="请输入阅读量" autocomplete="off" class="layui-input">
 </div>
 </div>
 <div class="layui-form-item">
 <label class="layui-form-label pt-10 pb-10 pl-0 pr-0 col-black">主图地址：</label>
 <div class="layui-input-block">
 <input type="text" name="photo_address" lay-verify="required" placeholder="请输入主图地址" autocomplete="off" class="layui-input">
 </div>
 </div>
 </div>
 <p class="f-18 pt-15 pb-15 col-8d969d mt-10 mb-10">
 编辑文章主要内容
 </p>
 <div class="clear pd-15 bg-fafafa bor bor-col-e8ebf2">
 <textarea name="newseditor" id="newseditor">&lt;p&gt;在这里编辑文章内容&lt;/p&gt;</textarea>
 <div class="mt-20 mb-20">
 <div class="pull-right mr-40">
 <button type="button" class="layui-btn" lay-submit="" lay-filter="form\_news\_sub">立即提交</button>
 </div>
 </div>
 </div>
 </form>

js

$(document).ready(function() {
 /*定义ckeditor*/
 var editor = CKEDITOR.replace('newseditor', {
 customConfig: 'custom/ckeditor_config.js',
 height: 550,
 });

/\*layui方面js\*/
 layui.use(\['form', 'table', 'element'\], function() {
 var form = layui.form,
 layer = layui.layer,
 element = layui.element,
 table = layui.table;

//监听提交
 form.on('submit(form\_news\_sub)', function(data) {
 /*获取ck的数据*/
 var ck_val = CKEDITOR.instances.newseditor.getData();
 /*把ck的值推入到lay数组里面*/
 data.field.newseditor = ck_val;
 /*打印数组查看*/
 console.log(data.field);
 console.log(JSON.stringify(data.field));
 /*layer.alert(JSON.stringify(data.field), {
 title: '最终的提交信息'
 })*/
 return false;
 });
 
 });
});

ps:这个例子是ckeditor和layui一起的，JS里面包含了layui的一些代码，已经打好注释了。

效果

[

版权声明： 本博客所有文章，未经许可，任何单位及个人不得做营利性使用！转载请标明出处！如有侵权请联系作者。