文档章节

我的网站搭建 (第六天) Ckeditor编辑器

代码打碟手
 代码打碟手
发布于 08/27 19:18
字数 1223
阅读 64
收藏 0

    富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器,这是百度百科的对富文本编辑器的解释。我们可以借助富文本编辑器,编辑出来一个包含html的页面,从而页面的显示效果,可以由网站管理员定义,而不用完全依赖于开发的人员。我之前使用的是一个叫tinymce的富文本编辑,它比较精简,功能不是很丰富。在使用了一段tinymce后,就转用了django-ckeditor,后来发现是真的好用,当然还有一个叫做Ueditor的编辑器,听说也还不错,但我这里就用ckeditor来布置了。

    在这里,我会将步骤大致记录下来,但还是要推荐给大家一篇非常棒的关于ckeditor配置的文章,也是我之前参考学习的。Django博客开发:添加富文本编辑器ckeditor,网上大部分教程与此类似,但个人感觉都没有这篇写的详细,写的易懂。

安装环境

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

pip install django-ckeditor
pip install pillow

    2.在 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'

    3.在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) #没有这一句无法显示上传的图片

    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

自定义编辑器

    如果想要自定义编辑器,添加或删除一些按钮的话,需要在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')

添加代码功能

    为什么从tinymce编辑器传到ckeditor很大原因就是为平时都会用编辑器写一些代码,所以编辑器自然需要添加代码块的功能,tinymce似乎没有这个功能,至少我目前没有找到。而ckeditor只需要用到插件codesnippet,并且ckeditor的插件放在了ckeditor/static/ckeditor/ckeditor/plugins/路径下。以codesnippet为例,在下面代码的第16行和21行分别添加了 'CodeSnippet' 和 'codesnippet'

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>

编辑框响应式

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

2.

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

 

© 著作权归作者所有

共有 人打赏支持
代码打碟手
粉丝 32
博文 64
码字总数 114117
作品 0
宁波
程序员
私信 提问
PHP中配置Ckeditor+Ckfinder 完成图片上传

用久了fckeditor,看惯了其略显陈旧的界面,听说其弟弟CKeditor更酷更炫,今天就来试试吧。CKeditor文件下载:http://ckeditor.com/download ,目前的最新版本是CKEditor 3.4.2。 CKeditor是...

冯京宝
2012/07/20
0
0
CKeditor 在网页中的整合

1.在http://ckeditor.com/download上下载最新版本的CKeditor。将下载的文件解压,然后将4M多的文件减肥:可以删掉samples、source、tests这三个无用的文件夹;打开lang文件夹,删掉除languag...

frylan
2012/04/23
0
0
极地梦想/CKeditor编辑器数学公式插件

CKeditor编辑器数学公式插件 基于CKeditor编辑器的可视化的数学公式编辑器,可以返回数学公式。 演示地址 http://jdmath.jdun.org/ 使用说明 将 CKeditor编辑器的config.js打开,在 CKEDITOR...

极地梦想
11/12
0
0
用于 CKeditor 编辑器的可视化数学公式插件

基于CKeditor编辑器的可视化的数学公式编辑器,可以返回数学公式。 将 CKeditor编辑器的config.js打开,在 里面添加 然后在最后加入 以上是你编辑器的可视化部分,下面开始配置你的用户看到的...

技术小能手
11/14
0
0
CKEditor5 v10.0.1 发布,修复 Link 包重要安全漏洞

CKEditor 5 v10.0.1 已发布,主要包含对 Link 包 的安全修复 , 推荐所有 CKEditor 5 的用户升级。此外,此版本还解决了在编辑器中启用实时协作被阻止的问题。 安全问题修复 CKEditor 5 v10.0...

王练
05/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

day150-2018-11-17-英语流利阅读-待学习

歪果仁也疯狂:海外版抖音的征途 毛西 2018-11-17 1.今日导读 海外版抖音 TikTok 于 2017 年 5 月上线海外,至今覆盖全球 150 多个国家和地区,月活跃用户数已突破 5 亿。然而,“出海”的抖...

飞鱼说编程
今天
5
0
分布式学习最佳实践:从分布式系统的特征开始(附思维导图)

什么是分布式系统 回到顶部   分布式系统是由一组通过网络进行通信、为了完成共同的任务而协调工作的计算机节点组成的系统。分布式系统的出现是为了用廉价的、普通的机器完成单个计算机无法...

dragon_tech
今天
4
0
TOKEN设计

TOKEN设计 Api_Token 首先需要知道API是什么? API(Application Programming Interface)即应用程序接口。你可以认为 API 是一个软件组件或是一个 Web 服务与外界进行的交互的接口。而我们在...

DrChenXX
今天
3
0
浅谈“李氏代换”——从纪念金庸和斯坦李说起

李氏代换(LSP)简介 李氏代换是软件设计的一个原则,又名依赖倒转原则或依赖倒置原则,其衍生原则有接口分离原则等。该原则由Barbara Liskov于1988年提出。 该原则指出,程序中高级别的元素...

SamYjy
今天
35
0
JavaScript实现在线websocket WSS测试工具 -toolfk程序员工具网

本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱,ToolFk 特色是专注于程序员日常的开发工具,不用安装任何软件,只要把内容贴上按一个执行按钮,就能获取到想要的内容结果。T...

toolfk
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部