档案日期2014的33

使用CKEditor编辑HTML文本时，有时可能需要插入带有样式的空标签，例如显示glyphicons图标的<i>标签：

<i class="glyphicon glyphicon-user"></i>

但是，默认设置下，CKEditor会过滤掉空的<i>标签。

在ckeditor.config.js中添加如下代码即可实现在CKEditor (4.3.x)编辑器中插入一个带有样式的空的<i>标签：

// allow i tags to be empty (for font awesome)
config.protectedSource.push(/<i[^>]><\/i>/g);
CKEDITOR.dtd.$removeEmpty['i'] = false;
config.allowedContent = true;

参考博文：Configure CKEditor to allow entering empty tags

原文步骤摘录如下：

The (empty) <i> tag kept on being removed ...

jQuery嵌套事件绑定时，如果逻辑处理不当，有时会出现事件重复绑定的问题，例如下面的例子。

点击“添加文本框”按钮时，会在div中新增一个textarea，同时使用bind方法为class为demo-textarea的元素绑定click事件

相关代码如下所示：

<script>
$(document).ready(function(){
  $("#add-btn").on("click",function(){
    $("#first-p").after('<p id="demo-p"><textarea class="demo-textarea">点击textarea弹出提示</textarea></p>');
    $("#demo-div").find(".demo-textarea").bind("click",function(){
      alert("Textarea Clicked!"); ...

CKEditor文本编辑器是一款旨在简化Web内容编辑的即用（ready for use）的HTML文本编辑器。它是一款所见即所得（WYSIWYG）的编辑器，涵盖了常用的文本编辑功能。CKEditor是一款开源的应用，也就是说开发者可以根据实际需求修改源码。下面是CKEditor的实例

这是一个CKEditor的实例。

django-blog-zinnia的生态系统提供了对ckeditor编辑器的支持

具体配置过程如下：

一、配置django-ckeditor：

1. 从https://github.com/shaunsephton/django-ckeditor/下载django-ckeditor的源码压缩包，解压后将ckeditor目录拷贝至django项目的工程目录下
2. 在settings.py文件的INSTALLED_APPS数组中添加ckeditor
3. 执行collectstatic管理命令manage.py collectstatic（或者将django-ckeditor源码目录/static/下的/ckeditor/手工拷贝至django工程项目的静态文件目录STATIC_ROOT下）
4. 在项目配置文件settings.py中添加CKEDITOR_UPLOAD_PATH配置，由此指定CKEditor的媒体上传路径，CKEditor使用Django的存储API。缺省设置下Django使用文件系统储存后端（使用MEDIA_ROOT和MEDIA_URL），如果没有另外指定存储后端，你需要对MEDIA_ROOT下的CKEDITOR_UPLOAD_PATH路径拥有写权限。
5. 在项目urls.py文件中新增CKEditor的URL配置：
(r'^ckeditor/', include('ckeditor.urls')),
6. 设置CKEDITOR_IMAGE_BACKEND来启用CKEditor缩略图，缺省设置下图像不显示缩略图，以全尺寸形式展现。

二、配置zinnia-wysiwyg-ckeditor：

1. 从https://github.com/django-blog-zinnia/zinnia-wysiwyg-ckeditor下载zinnia-wysiwyg-ckeditor源码压缩包，解压后将zinnia_ckeditor拷贝到django项目的工程目录下
2. 在settings.py文件的INSTALLED_APPS数组中添加zinnia_ckeditor（添加到zinnia之后）

三、修改zinnia WYSIWYG配置：

修改zinnia/settings.py文件的WYSIWYG_MARKUP_MAPPING字典，变更为如下内容：

WYSIWYG_MARKUP_MAPPING = {
    'textile': 'markitup',
    'markdown': 'markitup',
    'restructuredtext': 'markitup',
    'html': ...