python flask实战订餐系统微信小程序-42使用可视化的百度开源ueditor编辑展示工具

​​B站配套视频教程观看​​

使用可视化的百度开源ueditor编辑展示工具

使用插件改变描述区域的东西，支持编辑

百度开源ueditor

​​http://fex.baidu.com/ueditor/​​

代碼中已經添加了ueditor插件

引入JS

需要包含3个js文件

<script src="{{ buildStaticUrl('/plugins/ueditor/ueditor.config.js') }}"></script>
<script src="{{ buildStaticUrl('/plugins/ueditor/ueditor.all.min.js') }}"></script>
<script src="{{ buildStaticUrl('/plugins/ueditor/lang/zh-cn/zh-cn.js') }}"></script>

food/set.html包含js

{%block js %}
<script src="{{ buildStaticUrl('/plugins/ueditor/ueditor.config.js') }}"></script>
<script src="{{ buildStaticUrl('/plugins/ueditor/ueditor.all.min.js') }}"></script>
<script src="{{ buildStaticUrl('/plugins/ueditor/lang/zh-cn/zh-cn.js') }}"></script>
<script src="{{ buildStaticUrl('/js/food/set.js') }}"></script>
{% endblock %}

創建food/set.js

;
var food_set_ops = {
    init:function () {
        this.eventBind();
        this.initEditor();
    },
    eventBind:function () {

    },
    initEditor:function () {
        var that = this;
        that.ue = UE.getEditor('editor');
    }
}

$(document).ready(function () {
    food_set_ops.init()
})

前台灣就可以查看到引用成功：

定义toolbar JS设置

    initEditor:function () {
        var that = this;
        that.ue = UE.getEditor('editor',{
            toolbars: [
                [ 'undo', 'redo', '|',
                    'bold', 'italic', 'underline', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall',  '|','rowspacingtop', 'rowspacingbottom', 'lineheight'],
                [ 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                    'directionalityltr', 'directionalityrtl', 'indent', '|',
                    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                    'link', 'unlink'],
                [ 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                    'insertimage', 'insertvideo', '|',
                    'horizontal', 'spechars','|','inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols' ]

            ],
            enableAutoSave:true,
            saveInterval:60000,
            elementPathEnabled:false,
            zIndex:4,
            serverUrl:common_ops.buildUrl(  '/upload/ueditor' )
        });
    }

创建upload/Upload.py进行所有编辑器相关的操作：