标签归档：CKEditor

RSS feed of CKEditor

Django CKEditor未保存窗口关闭提醒
作者是 发布于 在 CKEditor, django, JavaScript.

在使用文本编辑器写博客时，有时可能不小心将页面关闭，或者刷新页面，来不及保存的博文就会消失的无影无踪，令人感到十分沮丧。

如果使用Django CKEditor文本编辑器，只需添加一个js插件并进行简单的配置就可以防止不小心关闭表单尚未保存页面的情况，设置步骤如下：

1. 添加jquery.AreYouSure插件，该插件可以在关闭包含未保存表单的页面时弹出相应提示，Github项目地址为：https://github.com/codedance/jquery.AreYouSure。

2. 修改ckeditor\templates\ckeditor\widget.html，将内容替换为下面的代码：

<p><textarea{{ final_attrs|safe }}>{{ value }}</textarea></p>
<script type="text/javascript" src="/static/js/jquery.are-you-sure.js"></script>
<script type="text/javascript">
    if (typeof CKEDITOR == "undefined") {
        $( document ).ready(function() {
            CKEDITOR.replace("{{ id }}", {{ config|safe }});
            $('form').areYouSure();
        });
    } else {
        CKEDITOR.replace("{{ id ...

继续阅读

CKEditor允许输入空标签配置方法
作者是 发布于 在 CKEditor, JavaScript.

使用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 ...

继续阅读

django-blog-zinnia添加文本编辑器ckeditor
作者是 发布于 在 CKEditor, django-blog-zinnia.

CKEditor文本编辑器是一款旨在简化Web内容编辑的即用（ready for use）的HTML文本编辑器。它是一款所见即所得（WYSIWYG）的编辑器，涵盖了常用的文本编辑功能。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': ...

继续阅读