有些人认识了很久，也未必很熟，有些人看到对方的第一眼，就会觉得很亲近。

使用富文本编辑器Ckeditor

网站开发过程中，文本编辑器直接调用第三方的编辑器会省下很多事情，并且相对来说比较安全。

常见的编辑器有ewebeditor，fckeditor，ueditor等等，这里使用ckeditor编辑器

安装过程

使用命令即可完成安装：

pip3 install django-ckeditor

然后添加到配置文件

修改

LANGUAGE_CODE = 'zh-hans'

到这里ckeditor就安装配置完毕，但是是没法使用图片上传功能的，这个时候需要另行安装图片处理库pillow

pip3 install pillow

在settings文件中的INSTALLED_APPS中添加注册

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

使用上传功能，需要设置上传位置。该文件是上传到media目录，所以也需要设置media。打开settings.py添加如下设置：

MEDIA_URL = '/media/'
# 放在django项目根目录，同时也需要创建media文件夹
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

CKEDITOR_UPLOAD_PATH = 'upload/'

CKEDITOR_IMAGE_BACKEND = 'pillow'

使用linux的话，需要在根目录下执行下面两行命令

mkdir media
cd media
mkdir upload
chomd 777 midia

即在根目录下创建一个media的文件夹，然后在media文件夹下面创建一个upload的文件夹

如上完成：

设置 MEDIA_ROOT 和 MEDIA_URL，CKEDITOR_UPLOAD_PATH = ‘upload/‘，图片将上传到项目下的media/upload路径下，图片的url是 /media/upload/
设置CKEDITOR_IMAGE_BACKEND = ‘pillow’, 用于生成图片缩略图，在编辑器里浏览上传的图片

配置上传url和media的访问

上传功能需要有地址可以请求，需要需要提供上传的url。打开全局的urls.py，添加设置到urlpatterns中：

path('ckeditor/', include('ckeditor_uploader.urls')),

另外，上传的图片是到media中，不是在static中。我们还需要设置media可被访问，如下设置可用于开发中使用，若部署到服务器可用服务器软件设置,继续在urls.py中添加如下内容：

from django.conf import settings
from django.conf.urls.static import static


urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

如果使用nginx来配置静态资源，在nginx的配置文件里

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

注意:在linux开发环境中，启动django的时候，需要加上sudo

使用过程

在需要用到编辑器的地方，比如自带的后台管理系统，以及自己在前端页面需要写文章的部分。使用django的models和forms两个自带的模型层和表单层进行修改即可使用富文本编辑器。

模型层

比如我之前的Mdoels是这样的

class Datas(models.Model):
    contet = models.TextField()

如果需要使用富文本编辑器，则需要进行如下修改

from ckeditor_uploader.fields import RichTextUploadingField

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

这样的话，在编辑content的部分就可以直接使用ckeditor编辑器，并且具有上传图片功能。

如果不想添加使用上传图片功能，使用下面的类即可

from ckeditor.fields import RichTextField
class Datas(models.Model):
        content = RichTextField()

这样就不能上传图片文件，只能引用远程图片

表单层

首先需要把settings文件进行如下更改设置

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(os.path.join(BASE_DIR, '/static/'))

STATICFILES_DIRS = (
    os.path.join(os.path.join(BASE_DIR, 'static')),
)

MEDIA_URL = '/media/'
# 放在django项目根目录，同时也需要创建media文件夹
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

CKEDITOR_UPLOAD_PATH = 'upload/'

然后执行命令

python3 manage.py collectstatic

接下就可以编写表单文件

from ckeditor.fields import RichTextField

class Comment(forms.Form):
    comment = RichTextField()



from .forms import Comment
def index(request):
    return render(request,'comment.html',{'comment':Comment()})

然后每次调用ckeditor之前，都需要先引用编辑器所需要的文件，使用调入ckeditor静态文件(js, css和图片),最后在comment.html中编写如下

<form>
    COMMENT:
    {{ comment.media}}
    {{ comment|safe }}
</form>

还可以这么写

<form>
    COMMENT:
    {% load static %}
<script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
            <textarea name="editor1"></textarea>
        <script>
            CKEDITOR.replace( 'editor1' , {uiColor: '#9AB8F3'});
        </script>


</form>

如果嫌麻烦的话，或者不想写forms表单的内容熟悉，可以直接在前段远程调用ckeditor编辑器

<form>
    COMMENT:
    <script src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
    <textarea name="editor1"></textarea>
    <script>
        CKEDITOR.replace( 'editor1' , {uiColor: '#9AB8F3'});
    </script>

</form>

配置文件

CKEDITOR_ALLOW_NONIMAGE_FILES = False 不允许非图片文件上传，默认为True
CKEDITOR_BROWSE_SHOW_DIRS = True 在编辑器里浏览上传的图片时，图片会以路径分组，日期排序
CKEDITOR_RESTRICT_BY_USER = True 限制用户浏览图片的权限，只能浏览自己上传的图片，图片会传到以用户名命名的文件夹下，超级管理员依旧可以看所有图片

修改staff_member_required装饰器变为login_required。

这一点是在admin内和admin外使用ckeditor最的不同。如果需要使用文件上传，ckeditor默认只有员工(staff member)才有这个权限。如果你需要admin外的用户也能上传图片或文件，你需要将staff_member_required装饰器改为login_required。

你需要按site-packages - > ckeditor_uploader -> templates -> urls.py的源码，把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'),
        ]

链接