介绍一款HTML富文本编辑器——wangEditor

wangEditor是国人开发的一款轻量级web富文本编辑器，基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费。

官方网址：[http://www.wangeditor.com/](http://www. wangeditor.com/)

官方文档：http://www.kancloud.cn/wangfupeng/wangeditor2/113961

开源地址：https://github.com/wangfupeng1988/wangEditor

使用前建议详细看看文档，

嵌入html中也非常方便简单，我之前用过UE，但是我python服务端的代码很繁杂，UE需要用到的config接口。

我使用wangEditor，后端也就只处理了图片上传(当然还有文章提交的接口)，做了个简单的demo：[https://github.com/staugur/flask-wangEditor-demo](https://github.com/staugur/flask-wangE ditor-demo)

本站写博也是用的wangEditor，不过又增加了一款Markdown文本编辑器。

本站用法，从前端到后端：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Editor.md</title>
    <!-- 引入wangEditor.css -->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='wangEditor/css/wangEditor.min.css') }}">
</head>
<body>
<div>
    <h1>创作文章</h1>
    <form id="CreateBlogFormId" method="" action="">
        <p>标题：<input type="text" name="title" placeholder="文章标题" required /><em style="color:red; front-size:bold">*</em></p>
        <p>标签：<input type="text" name="tag" placeholder="多个标签以空格分割" required /></p>
        <p>分类：<input type="text" name="catalog" placeholder="自定义分类或选择" list="blog_catalogs" required /></p>
        <datalist id="blog_catalogs">
            <option>未分类</option>
        </datalist>
        <p>类型：
            <input type="radio" name="sources" value="原创" checked="checked">原创
            <input type="radio" name="sources" value="转载">转载 
            <input type="radio" name="sources" value="翻译">翻译
        </p>
        <textarea id="editor" style="height:500px; max-height:640;" name="content">
           <p>请输入文章内容...</p>
        </textarea>
        <input type="hidden" name="author" value="{{ g.username }}">
        <input type="hidden" name="editor" value="wangEditor">
        <input onclick=postForm() type="button" value="提交博客" class="button green" />
    </form>
</div>
<!--引入jquery和wangEditor.js-->
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-3.1.0.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='wangEditor/js/wangEditor.min.js') }}"></script>
<script type="text/javascript">
    // 获取元素
    var div = document.getElementById('editor');
    // 生成编辑器
    var editor = new wangEditor(div);

    // 为当前的editor配置密钥
    editor.config.mapAk = 'rsG1HfOkrldOGdI53TMI9rAdxGuzb0PI';

    // 取消粘贴过滤
    // editor.config.pasteFilter = false;

    // 插入代码时的默认语言
    editor.config.codeDefaultLang = 'python';

    /*
       上传图片功能，文档地址：http://www.kancloud.cn/wangfupeng/wangeditor2/113990；
       后台文档地址：http://www.kancloud.cn/wangfupeng/wangeditor2/115736;
       后台需要配置一个获取表单上传图片并保存的路由。
    */
    editor.config.uploadImgUrl = '/upload/image/';
    editor.config.uploadImgFileName = 'WriteBlogImage';

    // 创建编辑器
    editor.create();
</script>
</body>
</html>

提交文章的后端代码也简单，获取form的几个name信息，存入数据库中。

更新新文章方法是，取数据库文章内容，直接作为初始化数据写入editor：

<textarea id="editor" style="max-height:640;" name="content">读取数据库文章内容写入此处</textarea>

·End·