editormd.min.js是一款js在线markdown编辑器插件-BFW插件库

editormd.min.js是一款js在线markdown编辑器插件

editormd.min.js是一款js在线markdown编辑器插件，基于 CodeMirror、jQuery 和 Marked 构建，支持图片上传、流程生成、时序图生成、标签等功能。非常强大。

使用方式：

第一步引入bfwone

第二步use插件及css和主题css

第三步配置参数

var testEditor;
testEditor = editormd("test-editormd", {
                width: "98%",//宽度
                height: 730,//高度
                path : '//repo.bfw.wiki/bfwrepo/js/editormdlib/',//第三方库地址
                markdown : md,
                codeFold : true,//是否折叠
                saveHTMLToTextarea : true,//是否将html保存到textrea
                searchReplace : true,//是否替换
                htmlDecode : "style,script,iframe|on*",//html标签解码
                emoji : true,//是否支持表情
                taskList : true,//是否支持任务
                tocm            : true,         // Using [TOCM]
                tex : true,                   // 开启科学公式TeX语言支持，默认关闭
                flowChart : true,             // 开启流程图支持，默认关闭
                sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
                imageUpload : true,//是否支持图片上传
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL : "examples/php/upload.php",//图片上传地址
                onload : function() {
                    console.log('onload', this);
                }
            });

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["editormd.min","editormd.min"], function() {
                               testEditor = editormd("test-editormd", {
                    width   : "90%",
                    height  : 640,
                    syncScrolling : "single",
                    path    : "//repo.bfw.wiki/bfwrepo/js/editormdlib/"
                });
            });
        });
    </script>
     <style>
     * {
    padding: 0;
    margin: 0;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
		body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    margin: 0;
    padding: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
    display: block;
}

audio, canvas, video {
    display: inline-block;
}

img {
    border: none;
    vertical-align: middle;
}

ul, ol {
    /*list-style: none;*/
}

.clear {
    *zoom: 1;           /* for IE 6/7 */
}

.clear:before, .clear:after {
    height: 0; 
    content: "";
    font-size: 0;
    display: table;
    line-height: 0;     /* for Opera */
    visibility: hidden;
}

.clear:after {
    clear: both;
}

body {
    font-size: 14px;
    color: #666;
    font-family: "Microsoft YaHei", "微软雅黑", Helvetica, Tahoma, STXihei, "华文细黑", STHeiti, "Helvetica Neue", Helvetica, Tahoma, "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif; 
    background: #fff;
    text-align: center;
}

#layout {
    text-align: left;
}

#layout > header, .btns {
    padding: 15px 0;
    width: 90%;
    margin: 0 auto;
}

.btns {
    padding-top: 0;
}

.btns button {
    padding: 2px 8px;
}

#layout > header > h1 {
    font-size: 20px;
    margin-bottom: 10px;
}

.btns button, .btn {
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    -webkit-transition: background 300ms ease-out;
    transition: background 300ms ease-out;
}

.btns button:hover, .btn:hover {
    background: #f6f6f6;
}
      </style>
</head>
<body>
    <div id="layout">
            <header>
                <h1>Simple example</h1>
            </header>
            <div id="test-editormd">
                <textarea style="display:none;">[TOC]

#### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;

#### Editor.md directory

    editor.md/
            lib/
            css/
            scss/
            tests/
            fonts/
            images/
            plugins/
            examples/
            languages/     
            editormd.js
            ...

```html
<!-- English -->
<script src="../dist/js/languages/en.js"></script>

<!-- 繁體中文 -->
<script src="../dist/js/languages/zh-tw.js"></script>
```
</textarea>
            </div>
        </div>
</body>
</html>

editormd.min.js是一款js在线markdown编辑器插件

网友评论0

ace.js

xheditor.js

jsmind.js

sketchpad.js

prism.js

highlight.js

tinymce.js

gantt.js

tui-image-editor.js

drawingboard.js