以前没有整合过编辑器，目前没事整合个编辑器玩下，基本编辑器中主要就是附件上传的地方需要特别的写点代码，其他的可以直接照搬，我整合的是wangEditor，这个编辑器比较清爽，如果需要繁多的功能可以选择Ueditor，那个是百度出的，但是界面太老了，wangEditor的官网地址是http://www.wangeditor.com/

下面就直接上我的代码了

前端代码

{% include 'public/header.html' %}
<div class="layui-warp">
    <form class="layui-form layui-form-pane" action="" style="padding: 5px;">
        <div class="layui-form-item" >
            <label class="layui-form-label">内容标题</label>
            <div class="layui-input-block" style="width: 400px;">
                <input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">更新时间</label>
            <div class="layui-input-block" style="width: 150px;">
                <input type="text" class="layui-input" name="updatetime" id="updatetime" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <div id="editor"></div>
        </div>
        <div class="layui-form-item">
            <button type="button" class="layui-btn" lay-submit lay-filter="sub">提交</button>
        </div>
    </form>
</div>
<script src="{{ url_for('static', filename='editor/wangEditor.min.js') }}"></script>
<script type="text/javascript">
layui.use(['element', 'form', 'upload', 'laypage', 'laytpl', 'laydate', 'layer', 'jquery'], function(){
    var element = layui.element
    ,form = layui.form
    ,upload = layui.upload
    ,laypage = layui.laypage
    ,layer = layui.layer
    ,laytpl = layui.laytpl
    ,laydate = layui.laydate
    ,$ = layui.jquery;
    var E = window.wangEditor
    var editor = new E('#editor')
    editor.customConfig.uploadFileName = 'file';
    editor.customConfig.uploadImgHeaders = {
        'Accept': 'application/json'
    }
    editor.customConfig.uploadImgServer = '{{ url_for("tool.upload") }}';
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
    editor.customConfig.uploadImgMaxLength = 2;
    editor.customConfig.uploadImgTimeout = 3000;
    editor.customConfig.customAlert = function (info) {
        layer.alert(info)
    }
    editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
        },
        success: function (xhr, editor, result) {
            console.log(result)
        },
        fail: function (xhr, editor, result) {
            //layer.alert("图片插入失败！");
        },
        error: function (xhr, editor) {
            //layer.alert("图片上传错误，请检查接口！");
        },
        timeout: function (xhr, editor) {
            //layer.alert("图片上传超时，请检查接口！");
        },
        customInsert: function (insertImg, result, editor) {
            console.log(result);
        }
    }
    editor.create();
    laydate.render({
        elem: '#updatetime'
        ,type: 'datetime'
        ,value: new Date()
    });
});
</script>
{% include 'public/footer.html' %}

flask的上传方法

#!/usr/bin/python3
#coding:utf-8
__author__ = 'yang.su'
'''上传方法'''
from flask import Flask,jsonify,request,url_for,current_app,g
from config import load_json
from werkzeug.utils import secure_filename
from app.tool import tool
import os
import time
import base64
import requests
import json
config = load_json()

'''上传视图'''
@tool.route('/upload', methods=['POST','GET'])
def upload():
    if request.method == "POST":
        f = request.files['file']
        attchment_dir = time.strftime("%Y/%m/", time.localtime())
        upload_path = os.path.join("app/upload/", attchment_dir)
        isExist = os.path.exists(upload_path)
        try:
            if not isExist:
                os.makedirs(upload_path, 0o777)
            src = os.path.join(upload_path + secure_filename(f.filename))
            f.save(src)
            with open(src, 'rb') as f:
                img_base64 = f.read()
            img_base64_object = base64.b64encode(img_base64)
            response = {"code": 0, "msg": "图片上传成功！", "data":{"src": src, "bs64_src": img_base64_object.decode('utf-8')}}
        except:
            response = {"code": 1, "msg": "图片上传失败！"}
        return jsonify(response)

一般整合编辑器主要复杂的地方在媒体上传，附件上传等地方，但是wandEditor建议在编辑器外部进行附件上传处理，然后通过insert函数将附件链接插入到编辑器内