Django Ueditor Vue集成

介绍

• Django支持Ueditor富文本，并且前端使用Vue
• 在使用中发现UEditorField中的imagePath,filePath的配置并没有生效，本文也给出了解决方案。

Django后端

依赖

Django == 2.2
DjangoUeditor

DjangoUeditor源码下载

DjangoUeditor

1. Django中settings配置

• 这里的http://localhost:8000建议用环境变量的方式设置，这样可以兼容多环境。
• django环境变量如何使用，欢迎看我另一篇关于django-env的介绍。https://www.jianshu.com/p/66f32703e7cf

INSTALLED_APPS += [
    'DjangoUeditor',
]

UEDITOR_SETTINGS = {
    "upload": {
        "imagePathFormat": "ueditor/images/%(basename)s_%(datetime)s_%(rnd)s.%(extname)s",
        "imageUrlPrefix": "http://localhost:8000",
        "scrawlPathFormat": "ueditor/scrawl/%(basename)s_%(datetime)s_%(rnd)s.%(extname)s",
        "scrawlUrlPrefix": "http://localhost:8000",
        "snapscreenPathFormat": "ueditor/snapscreen/%(basename)s_%(datetime)s_%(rnd)s.%(extname)s",
        "snapscreenUrlPrefix":  "http://localhost:8000",
        "catcherPathFormat": "ueditor/catcher/%(basename)s_%(datetime)s_%(rnd)s.%(extname)s",
        "catcherUrlPrefix":  "http://localhost:8000",
        "videoPathFormat": "ueditor/video/%(basename)s_%(datetime)s_%(rnd)s.%(extname)s",
        "videoUrlPrefix":  "http://localhost:8000",
        "filePathFormat": "ueditor/file/%(basename)s_%(datetime)s_%(rnd)s.%(extname)s",
        "fileUrlPrefix":  "http://localhost:8000",
    }
}

2. Django中urls配置

from django.urls import path

path('ueditor/', include('DjangoUeditor.urls')),

3. Django中models书写

from django.db import models
from DjangoUeditor.models import UEditorField

class DjangoUeditorModel(models.Model):
    data = UEditorField(verbose_name=u"内容",  default='')

4.DjangoUeditor源码修改以支持指定目录

• DjangoUeditor/views.py中189行

    # 检测保存路径是否存在,如果不存在则需要创建
    upload_path_format = {
        "uploadfile":  USettings.UEditorUploadSettings.get("filePathFormat", ''),
        "uploadimage": USettings.UEditorUploadSettings.get("imagePathFormat", ''),
        "uploadscrawl": USettings.UEditorUploadSettings.get("scrawlPathFormat", ''),
        "uploadvideo": USettings.UEditorUploadSettings.get("videoPathFormat", '')
    }

• DjangoUeditor/views.py中295行

    # 取得输出文件的路径
    OutputPathFormat = path_format if path_format else USettings.UEditorSettings["defaultPathFormat"]
    OutputPathFormat = (OutputPathFormat % path_format_var).replace("\\", "/")

Vue前端

1.复制源码

• 将上面下载的DjangoUeditor/static/ueditor复制到前端项目中static目录下

2.建立components模板

<template>
    <el-container>
        <div>
            <script :id=id type="text/plain"></script>
        </div>
    </el-container>
</template>
<script>
    import "../../../static/ueditor/ueditor.config.js";
    import "../../../static/ueditor/ueditor.all.js";
    import "../../../static/ueditor/lang/zh-cn/zh-cn.js";
    import "../../../static/ueditor/ueditor.parse.js";
    export default {
        name: 'UE',
        data () {
            return {
                editor: null
            }
        },
        props: {
            config: {
                type: Object
            },
            id: {
                type: String
            }
        },
        mounted () {
            this._initEditor()
        },
        methods: {
            _initEditor () { // 初始化
                this.editor = UE.getEditor(this.id,this.config);
            },
            getUEContent () { // 获取含标签内容方法
                return this.editor.getContent()
            },
            setUEContent(ue_content) {
                this.editor.ready(() => {
                    this.editor.setContent(ue_content);
                });
            },
            UEpreview(){
                this.editor.execCommand('preview')
            },
            getContentTxt(){
                return this.editor.getContentTxt().substring(0, 100);
            },
            hasContents(){
                return this.editor.hasContents();
            },
        },
        destroyed () {
            this.editor.destroy();
        }
    }
</script>

3.使用模板

<template>
    <el-container>
       <div style="margin: 10px 50px">
              <UE :id=id :config=config  ref="ue"></UE>
       </div>
    </el-container>
</template>
<script>
    import UE from '@/pages/components/ueditor.vue'
    export default {
        name: "upload",
        components: {
            UE
        },
        data(){
            return {
                config: {
                    initialFrameWidth: '100%',
                    initialFrameHeight: 400,
                    // this.$api.baseUrl = "http://localhost:8000"
                    serverUrl: this.$api.baseUrl + '/api/ueditor/controller/'
                },
                id: 'dataupload'
            }
        },
        mounted() {
            this.load();
            console.log(this.config.serverUrl)
        }
    }
</script>

成果

image.png