源码 https://github.com/django-ckeditor/django-ckeditor
通过pip安装。

pip3 install django-ckeditor
pip3 install Pillow

在settings.py的INSTALLED_APPS里添加ckeditor和ckeditor_uploader两个应用。

INSTALLED_APPS = (
    #
    'ckeditor',
    'ckeditor_uploader'
)

同时需要在settings.py里设置ckeditor的文件上传路径(在此之前需要配置MEDIA_URL和MEDIA_ROOT)。

CKEDITOR_UPLOAD_PATH = "content"

然后在settings.py里进行ckeditor的相关配置。

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Full',
    },
}

接下来在urls.py里配置ckeditor相关的url。

urlpatterns = [
    #
    url(r'^ckeditor/', include('ckeditor_uploader.urls')),
]

最后修改需要使用富文本编辑器的Django APP的目录下的models.py。其中RichTextField拥有TextField的全部参数,还拥有其他的一些参数。

from ckeditor.fields import RichTextField
#
instructions = RichTextField() # 将需要使用富文本编辑器的字段改为RichTextField

这样就可以在相应Django APP的Admin界面中使用富文本编辑器编辑了。
当然上面配置ckeditor的CKEDITOR_CONFIGS时比较简单粗暴,其实可以看到这就是一个Python的dict,可以同时运用多种ckeditor的配置并命名。

CKEDITOR_CONFIGS = {
    'awesome_ckeditor': {
        'toolbar': 'Basic',
    },
    'default_ckeditor':{
        'toolbar': 'Full',
    },
}

当然这里也只是简单配置了一下toolbar,其他的一些配置可以看源码和文档。
这样在models.py中就可以通过RichTextField的config_name进行选择。

learn = RichTextField(config_name='default_ckeditor')
instructions = RichTextField(config_name='awesome_ckeditor')

Django添加ckeditor富文本编辑器的更多相关文章

  1. django中ckeditor富文本编辑器使用

    1.安装模块 (pillow是python的一个图像处理库) pip install django-ckeditor pip install pillow 2.编辑seetings.py配置文件 IN ...

  2. 搭建自己的博客(十三):为博客后台添加ckeditor富文本编辑器

    使用django默认的编辑器感觉功能太少了,所以集成一下富文本编辑器. 1.安装和使用 (1).安装 pip install django-ckeditor (2).注册应用 在django的sett ...

  3. CKEditor富文本编辑器

    CKEditor 富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带格式的文本,我们引入富文本编辑 ...

  4. Django中CKEditor富文本编译器的使用

    CKEditor富文本编辑器 1. 安装 pip install django-ckeditor 2. 添加应用 在INSTALLED_APPS中添加 INSTALLED_APPS = [ ... ' ...

  5. day82:luffy:课程详情页面显示&章节和课时显示&视频播放组件&CKEditor富文本编辑器

    目录 1.初始课程详情页面 2.视频播放组件 3.课程详情页面后端接口实现 4.课程详情页面-前端 5.CKEditor富文本编辑器 6.课程章节和课时显示-后端接口 7.课程章节和课时显示-前端 1 ...

  6. 项目页面集成ckeditor富文本编辑器

    步骤一.引入ckeditor.js (注:本实例以ThinkPHP3.2框架为载体,不熟悉ThinkPHP的朋友请自行补习,ckeditor文件代码内容也请去ckeditor官网自行下载) 作为程序员 ...

  7. django后台集成富文本编辑器Tinymce的使用

    富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...

  8. ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  9. Django集成百度富文本编辑器uEditor

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包, ...

随机推荐

  1. 加入域的计算机重定向到指定的OU

    在我曾经呆过一个企业里,我们使用的是AD环境,计算机加入域时,我们需要使用一个单独的加域工具,里面有需要将计算机加入到指定OU的选项.所以每次加域我们都需要找个这个工具,实现加域过程.最后我发现其实最 ...

  2. Linux网卡配置文件参数注释

    Linux网卡配置文件参数注释 作者:Eric 微信:loveoracle11g [root@linux-node2 ~]# cat /etc/sysconfig/network-scripts/if ...

  3. Change default network name (ens33) to old “eth0” on Ubuntu 18.04 / Ubuntu 16.04

    Change default network name (ens33) to old “eth0” on Ubuntu 18.04 / Ubuntu 16.04 By Raj Last updated ...

  4. vue事件深入

    事件对象: @click="show($event)" ev.clientX---接收 事件冒泡: 阻止冒泡: 1. ev.cancelBubble=true; 2.@click. ...

  5. CentOS安装nginx以及负载均衡的搭建

    依赖环境,没有安装的需要安装一下 yum install gcc yum install pcre-devel yum install zlib zlib-devel yum install open ...

  6. 第16课 右值引用(3)_std::forward与完美转发

    1. std::forward原型 template <typename T> T&& forward(typename std::remove_reference< ...

  7. make install 时指定安装路径

    The  make install target dir is representationed by var :  DESTDIR, if we set this var to the locati ...

  8. .NET/C#发起GET和POST请求的几种方法

    using System.Net; GET:   1 2 3 var request = (HttpWebRequest)WebRequest.Create("http://www.lead ...

  9. 23.1纯 CSS 创作一个菜单反色填充特效

    交互效果地址:https://scrimba.com/c/cEwREJs6 HTML代码: <nav> <ul> <li><span>Home</ ...

  10. 详解一个ThreadLocal 的谜题

    多线程如果不理解透彻, 那么 ThreadLocal 始终是有些会有所迷糊的. ThreadLocal 本身的命名有有问题, 这些美国精英整出来的技术,再加上一个奇怪的命名.对我们中国人来说,就是一场 ...