ckeditor富文本编辑器注意事项

阅读量：2898

发布时间：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)';

---

---

---

发布评论

---