Django-使用富文本编辑器

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

使用富文本编辑器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的文件夹

如上完成:

  1. 设置 MEDIA_ROOT 和 MEDIA_URL,CKEDITOR_UPLOAD_PATH = ‘upload/‘,图片将上传到项目下的media/upload路径下,图片的url是 /media/upload/
  2. 设置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'),
        ]

链接

链接

坚持原创技术分享,您的支持将鼓励我继续创作!
------ 本文结束 ------

版权声明

LangZi_Blog's by Jy Xie is licensed under a Creative Commons BY-NC-ND 4.0 International License
由浪子LangZi创作并维护的Langzi_Blog's博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证
本文首发于Langzi_Blog's 博客( http://langzi.fun ),版权所有,侵权必究。

0%