介绍一款Markdown富文本编辑器——Editor.md

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

Editor.md是国人开发的一款开源在线 Markdown 编辑器。

官方网址:http://pandao.github.io/editor.md/

官方文档:https://github.com/pandao/editor.md/blob/master/docs/index.html

开源地址:https://github.com/pandao/editor.md/

主要特性:

支持“标准”Markdown / CommonMark和Github风格的语法,也可变身为代码编辑器;
支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能;
支持ToC(Table of Contents)、Emoji表情、Task lists、@链接等Markdown扩展语法;
支持TeX科学公式(基于KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram;
支持识别和解析HTML标签,并且支持自定义过滤标签解析,具有可靠的安全性和几乎无限的扩展性;
支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件;
兼容主流的浏览器(IE8+)和Zepto.js,且支持iPad等平板设备;
支持自定义主题样式;

Editor.md 的诞生依赖于以下开源项目:

CodeMirror
marked
jQuery
FontAwesome
github-markdown.css
KaTeX
Rephael.js
prettify.js
flowchart.js
sequence-diagram.js
Prefixes.scss

使用前建议详细看看文档,不过文档似乎并不详细。

本站当前使用Editor.md,由于文档的问题,暂时不支持图片上传,若想用此功能,请切换至另一款编辑器。

重大更新:

Editoe.md已经可以上传图片文件了!

本站用法,从前台到后台:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Editor.md</title>
    <!-- 引入Editor.md.css -->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='Editor.md/css/editormd.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>
        <div id="editor">
            <textarea style="display:none;" name="content"># 请输入文章内容...</textarea>
        </div>
        <input type="hidden" name="author" value="{{ g.username }}">
        <input type="hidden" name="editor" value="Editor.md">
        <input onclick=postForm() type="button" value="提交博客" class="button green" />
    </form>
</div>
<!--引入jqueryEditor.md.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='Editor.md/js/editormd.min.js') }}"></script>
<script type="text/javascript">
    var Editor;
    $(function() {
        Editor = editormd({
                id      : "editor",
                width   : "100%",
                height  : 500,
                syncScrolling : "single",
                path    : "/static/Editor.md/lib/",
                /*
                // 开启上传图片功能
                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "/upload/image/",
                */
                emoji : true,                 // Emoji表情
                saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                searchReplace : true,
                flowChart : true,             // 开启流程图支持,默认关闭
                sequenceDiagram : true,       // 开启时序/序列图支持,默认关闭,
        });
    });
</script>
</body>
</html>

其他(后台等)处理方法类似于wangEditor这篇文章。