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

功能区
 taochengwei   Interest.blog  在线文本编辑器  Interest.blog   2016-11-23   百度主动推送失败
正文区

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

官方网址: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

本站写博也是用的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>
<!--引入jquerywangEditor.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>