ckeditor富文本编辑器注意事项

阅读量:1004

发布时间:2015-10-02 08:59:18


修改内容的时候,代码容易丢失

ckeditor是一款简单的富文本编辑器,在引入标签以后可以类是于word文本的编辑器

源码中只能修改标签,如 

<p><pre>

不能修改内容,修改内容会被清空

在数据提交的时候使用正则表达式,将

<pre>

替换为

<pre class="prettyprint">

搭配prettyprint插件即可显示语法高亮

 

注意事项

在代码高亮中,出现 在本编辑器的编辑视图中会删除class属性,否则会自动删除

解决方法:可以是在输入输出的时候自动替换掉class 或者是 修改配置文件中的替换规则:见附录1

<pre>

将无法修改,这是小概率事件,暂时不做修改

 

后台修改的时候:

1. <pre class="prettyprint"> 替换为 <pre>

2. 将 & 转义一下,方便前台显示 &amp;

$pattern = '/<pre class="prettyprint">/';
$content['content_text'] = preg_replace($pattern, '<pre>', $content['content_text']);

//HTML中不能显示 & 所有对转义过的  < > 空格 ($lt; &gt; $nbsp;) 中的 & 还需要转义一次
$content['content_text'] = preg_replace('/&/', '&amp;', $content['content_text']);

 

 

附录1:

config.js 并设置:

config.allowedContent = true;

只有重启浏览器才会生效

 

自定义过滤规则:Configuring内容过滤

例如, 你可以扩展默认CKEditors配置为接受所有: div类

config.extraAllowedContent = 'div(*)';

或一些东西Bootstrap :

config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';









流逝在指尖活在当下

测试

流逝在指尖活在当下 2015-10-10 18:41:02

测试提交是否有误!

流逝在指尖活在当下
流逝在指尖活在当下 2015-10-10 18:42:04

回复呢?