django博客开发:添加富文本编辑器ckeditor

Markdown用的不太习惯,于是决定添加一个富文本编辑器。ckeditor是一个老牌的编辑器,GitHub上有一个第三方模块django-ckeditor封装了所有功能,把import到我们的项目里,然后设置一下参数,就可轻松使用了。

github地址: https://github.com/django-ckeditor/django-ckeditor

EDIT:通过网友反应的一些问题,以及后来我对djangk-ckeditor的深入使用,决定对本文重新编辑一下,让各位学友少踩一些坑,同时增加一些功能的介绍。

开发环境: Python 3.5、Django 1.10

安装

使用pip安装 django-ckeditor 和 pillow,pillow用于生成缩略图,用来在编辑器里浏览上传的图片

pip install django-ckeditor
pip install pillow

QUICK START

在 project/settings.py 里进行如下设置:

INSTALLED_APPS = [
    'ckeditor',
    'ckeditor_uploader',
]

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
CKEDITOR_UPLOAD_PATH = 'upload/'
CKEDITOR_IMAGE_BACKEND = 'pillow'

1. 首先将 'ckeditor'和 'ckeditor_uploader'加入到INSTALLED_APPS中,

2. 设置 MEDIA_ROOT 和 MEDIA_URLCKEDITOR_UPLOAD_PATH = 'upload/',图片将上传到项目下的media/upload路径下,图片的url是 /media/upload/

3. 设置CKEDITOR_IMAGE_BACKEND = 'pillow', 用于生成图片缩略图,在编辑器里浏览上传的图片


4. 在project/urls.py里,加入 ckeditor_uploader.url

from django.conf.urls import url,include
from django.conf.urls.static import static
from django.conf import settings
from django.contrib import admin

urlpatterns = [
    url(r'', include('ckeditor_uploader.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) #没有这一句无法显示上传的图片

注意

在开发环境里debug模式下,static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) 这句是必不可少的,没有的话,你上传的图片将无法显示。将这段代码Python shell里运行一下,会发现其实就是解析了media_url

当我们在服务器部署时,需要用nginx来配置静态资源,在nginx的配置文件里

location /media {
                alias /path-to/media;
        }

4. 在blog/models.py的Post类,让正文字段使用 RichTextUploadingField()

from ckeditor_uploader.fields import RichTextUploadingField

class Post(models.Model):
    content = RichTextUploadingField(verbose_name='正文')

5. 最后还是不要忘了迁移数据库

pyhton manage.py makemigrations
python manage.py migrate

进入admin后台去添加文章,就会发现编辑器已经在那里了,是不是很开心啊

django-ckeditor

其他可选配置

CKEDITOR_ALLOW_NONIMAGE_FILES = False 不允许非图片文件上传,默认为True

CKEDITOR_BROWSE_SHOW_DIRS = True 在编辑器里浏览上传的图片时,图片会以路径分组,日期排序

CKEDITOR_RESTRICT_BY_USER = True 限制用户浏览图片的权限,只能浏览自己上传的图片,图片会传到以用户名命名的文件夹下,超级管理员依旧可以看所有图片

NOTICE

django-ckeditor默认的只允许管理员(staff member)上传图片,当普通用户使用编辑器时(比如评论区、留言板、发帖子),如果要使他们上传图片的话,需要对django-ckeditor的源码进行修改

在ckeditor_uploader/urls.py里,它的upload 和 browse方法用了staff_member_required装饰器,把它换成login_required装饰器即可

if django.VERSION >= (1, 8):
    urlpatterns = [
        url(r'^upload/', login_required(views.upload), name='ckeditor_upload'),
        url(r'^browse/', never_cache(login_required(views.browse)), name='ckeditor_browse'),
    ]

自定义编辑器

如果想要自定义编辑器,添加或删除一些按钮的话,需要在settings.py里设置 CKEDITOR_CONFIGS

CKEDITOR_CONFIGS = {
    # 配置名是default时,django-ckeditor默认使用这个配置
    'default': {
        # 使用简体中文
        'language':'zh-cn',
        # 编辑器的宽高请根据你的页面自行设置
        'width':'auto',
        'height':'150px',
        'image_previewText':' ',
        'tabSpaces': 4,
        'toolbar': 'Custom',
        # 添加按钮在这里
        'toolbar_Custom': [
            ['Bold', 'Italic', 'Underline', 'Format', 'RemoveFormat'],
            ['NumberedList', 'BulletedList'],
            ['Blockquote', 'CodeSnippet'],
            ['Image', 'Link', 'Unlink'],
            ['Maximize']
        ],
        # 插件
        'extraPlugins': ','.join(['codesnippet','uploadimage','widget','lineutils',]),
    }
}

当配置名称是 'default',django-ckeditor会默认使用这个配置,CKEDITOR_CONFIGS里可以添加多个配置,比如

CKEDITOR_CONFIGS = {
    # 配置名是default时,django-ckeditor默认使用这个配置
    'default': {

    }  
    # 名为custom的配置  
    'custom': {

    }
}

当需要使用非默认配置是,需要在 RichTextUploadingField() 里指定该配置名称

class Post(models.Model):
    content = RichTextUploadingField(config_name='custom')

添加代码功能

写技术博客的话,我们的编辑器自然需要添加代码块的功能。需要用到插件codesnippet,ckeditor的插件放在了ckeditor/static/ckeditor/ckeditor/plugins/路径下。

当我们添加一个功能插件时,需要在CKEDITOR_CONFIGS里的extraPlugins对应的value里添加该插件的名字(名字字母小写),如果该插件还有相对应的按钮,则在toolbar对应的value里添加名字(首字母大写),以codesnippet为例,在下面代码的第16行和21行分别添加了 'CodeSnippet' 和 'codesnippet'

NOTICE

在21行的extraPlugins里还添加了 'uploadimage',这个插件的作用是允许用户直接在编辑器里粘贴(ctrl + v)图片

CKEDITOR_CONFIGS = {
    # 配置名是default时,django-ckeditor默认使用这个配置
    'default': {
        # 使用简体中文
        'language':'zh-cn',
        # 编辑器的宽高请根据你的页面自行设置
        'width':'730px',
        'height':'150px',
        'image_previewText':' ',
        'tabSpaces': 4,
        'toolbar': 'Custom',
        # 添加按钮在这里
        'toolbar_Custom': [
            ['Bold', 'Italic', 'Underline', 'Format', 'RemoveFormat'],
            ['NumberedList', 'BulletedList'],
            ['Blockquote', 'CodeSnippet'],
            ['Image', 'Link', 'Unlink'],
            ['Maximize']
        ],
        # 插件
        'extraPlugins': ','.join(['codesnippet','uploadimage','widget','lineutils',]),
    }
}

代码高亮、代码行数  

从ckeditor官网下载 插件prism(点这里直接下载),然后将其解压到ckeditor/static/ckeditor/ckeditor/plugins路径下,同样的我们需要在CKEDITOR_CONFIGS里将extraPlugins对应的value里加入插件 'prism' 和另外两个插件"lineutils""widget" ,这两个插件无须下载,在django-ckeditor中已经有了

'extraPlugins': ','.join(['codesnippet','uploadimage','prism','widget','lineutils',]),

 去prismjs官网下载css文件http://prismjs.com/download.html,选择你喜欢的主题,勾选支持的语言,以及别忘选择line-numbers功能,下载后把他解压到static/blog/css

然后在模板中引用静态文件

<script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'blog/css/prism.css' %}">

在admin以外的地方使用django-ckeditor

如果在admin以外的地方使用django-ckeditor,比如添加评论功能

在渲染表单的那个页面需要引入 ckeditor-init.js 和 ckeditor.js 两个文件,否则编辑器无法显示

{% load static %}
<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>

当然还有另外一种方法,本质上跟前者一样的

<form>
    {{ myform.media }}
    {{ myform.as_p }}
    <input type="submit"/>
</form>

编辑框响应式

1. 需要CKEDITOR_CONFIGS里设置 'width': 'auto'

2.

<script>
    $(".django-ckeditor-widget").removeAttr('style');
</script>



原文地址:

http://www.aaron-zhao.com/post/1/#在admin以外的地方使用django-ckeditor

  • 1
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: Django 上最好用的富文本编辑器可能因人而异,不过以下几个编辑器都是比较受欢迎的: 1. CKEditor:功能强大,支持多种格式,易于集成和自定义,可以通过插件扩展功能。 2. TinyMCE:功能齐全,支持多种格式,易于使用,可以通过插件扩展功能。 3. Summernote:轻量级,易于使用,支持多种格式,可以自定义样式和插件。 4. Froala Editor:功能强大,支持多种格式,易于使用,可以通过插件扩展功能。 不过需要注意的是,这些编辑器都需要自己手动集成到 Django 项目中。 ### 回答2: 在Django中,最好用的富文本编辑器Django CKEditorDjango CKEditor是基于CKEditor的一个插件,它提供了强大且易于使用的富文本编辑功能。使用Django CKEditor,我们可以在Django项目中轻松集成和使用富文本编辑器Django CKEditor具有以下几个优点: 1. 易于集成:Django CKEditor提供了与Django完美集成的API和管理界面。通过简单的配置,可以很容易地将Django CKEditor集成到现有的Django表单或模型字段中。 2. 强大的功能:Django CKEditor具有丰富的编辑器功能,包括文字格式化、插入图片、插入表格、超链接等。它还支持可自定义的工具栏,可以根据需求进行个性化配置。 3. 很好的用户体验:Django CKEditor提供了直观的用户界面,用户可以方便地进行编辑和格式化文本。它还支持即时预览,使用户可以在编辑时实时查看最终的展示效果。 4. 安全性:Django CKEditor自带了安全机制,可以防止恶意的代码注入和跨站脚本攻击。它使用配置选项和过滤器来限制用户输入的内容,有效保护网站的安全性。 总而言之,Django CKEditor是一个强大且易于使用的富文本编辑器。它在Django中的集成和配置都非常简单,同时具备丰富的编辑功能和良好的用户体验。无论是开发博客、新闻网站还是内容管理系统,Django CKEditor都是一个理想的选择。 ### 回答3: Django上最好用的富文本编辑器CKEditorCKEditor是一个功能强大的富文本编辑器,广泛应用于各种网站开发中,包括Django项目。它具有直观的用户界面和丰富的功能,能够方便地进行文本编辑和格式化。 在Django项目中使用CKEditor非常简单。首先,需要从CKEditor的官方网站上下载并安装CKEditor的版本文件。然后,在Django的设置文件中进行相应的配置,指定CKEditor的静态文件路径。 在网页中使用CKEditor时,只需在相应的表单字段上使用CKEditor的widget即可。例如,在一个文章编辑页面上,可以将文本内容字段的widget设置为CKEditor,从而实现富文本编辑的功能。 CKEditor的优势在于其丰富的插件生态系统。它提供了许多扩展插件,可以用于添加各种额外的功能,例如图片上传、代码高亮、拼写检查等。这些插件可以根据项目的需求进行选择和配置,使得编辑器可以满足不同场景的需求。 此外,CKEditor还支持通过自定义配置文件进行个性化的设置,包括编辑器的外观样式、工具栏按钮的定制、插件的引入等等。这使得CKEditor成为Django开发者首选的富文本编辑器之一。 总之,CKEditorDjango上最好用的富文本编辑器之一,它具有丰富的功能和简单的使用方式,能够满足大多数Django项目中对富文本编辑需求的要求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值