O_Markdown在线编辑器移植

Web开发

传送门：
O_Markdown在线编辑器移植
K_各工具实现Markdown语法高亮和实时预览

提示

　　此文章面向在外非常用电脑使用，如果是自己常用的电脑，推荐使用Notepad++或VSCode搭建一个本地的Markdown编辑环境，使用起来更加顺手方便，具体教程详见 【K】Notepad++实现Markdown语法高亮和实时预览 及 【K】VSCode实现Markdown语法高亮和实时预览。

准备

　　在选择开源Markdown平台时用过showdown.js与marked.js，两者都能达到基本的转换功能，但总体上还是与想要的效果有点差距，showdown_ATY是之前用showdown.js做的一款极简的Markdown转换页面，可以实现高度自适应以及勉强算得上的同步滚动。
　　所以在多次不满意后找到了这款Editormd.js，官网：https://pandao.github.io/editor.md/，配置不算麻烦，而且集成多个插件，在使用体验上会好很多，唯一的缺点是太大了，经过精简后的移植包能达到4.65M的占用空间，不过倒是不影响加载页面的速度，只会多占用一些服务器空间罢了，具体实际移植后的界面：Markdown_ATY_Editor_md。
Markdown_ATY_Editor_md.png

移植

　　在Editor.md官网下载包后的目录如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
editor.md-master
|   .gitignore
|   .jshintrc
|   bower.json
|   BUGS.md
|   CHANGE.md
|   editormd.amd.js
|   editormd.amd.min.js
|   editormd.js
|   editormd.min.js
|   Gulpfile.js
|   LICENSE
|   package.json
|   README.md
+---css
+---docs
+---examples
+---fonts
+---images
+---languages
+---lib
+---plugins
+---scss
+---src
+---tests

　　个人精简后的移植包目录如下（不含子文件的目录即完全复制）：

1
2
3
4
5
6
7
8
9
10
11
|   Markdown_ATY_Editor_md.html
|   Template.md
+---css
|       editormd.min.css
+---fonts
+---images
+---js
|       editormd.min.js
|       jquery.min.js
+---lib
+---plugins

附：Win10导出目录树形结构：tree d:\deom /a /f > d:\tree.txt

　　目录结构确定好后以examples中的simple.html作为基础进行整改，最终网页代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
        <meta name="renderer" content="webkit" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        <meta name="keywords" content="Editor.md,editor,Markdown Editor,Markdown,编辑器,Markdown编辑器,Markdown在线编辑器,在线编辑器,开源编辑器,开源Markdown编辑器" />
        <meta name="description" content="Editor.md: a simple online markdown editor. 开源在线 Markdown 编辑器" />
        <title>Markdown_ATY_Editor_md</title>
        <link rel="stylesheet" href="css/editormd.min.css" />
        <link rel="shortcut icon" href="https://mengze.top/MZtop/images/MZ_White.png" />
    <link rel="alternate" href="/atom.xml" title="Meng Ze" type="application/atom+xml">
</head>
    
    <body>
        <div id="layout">
            <header>
                <h1 style="text-align:center;">Markdown_ATY_Editor_md</h1>
                <div style="text-align:center; margin-bottom:12px;">
                    <select id="editormd-theme-select">
                        <option selected="selected" value="">select Editor.md themes</option>
                    </select>
                    <select id="editor-area-theme-select">
                        <option selected="selected" value="">select editor area themes</option>
                    </select>
                    <select id="preview-area-theme-select">
                        <option selected="selected" value="">select preview area themes</option>
                    </select>
                </div>
            </header>
            <div id="mainEditormd">
                <textarea style="display:none;"></textarea>
            </div>
        </div>
        
        <script src="js/jquery.min.js"></script>
        <script src="js/editormd.min.js"></script>
        <script type="text/javascript">
            var mainEditor;
            
            function themeSelect(id, themes, lsKey, callback)
            {
                var select = $("#" + id);
                
                for (var i = 0, len = themes.length; i < len; i ++)
                {                    
                    var theme    = themes[i];
                    var selected = (localStorage[lsKey] == theme) ? " selected=\"selected\"" : "";
                    
                    select.append("<option value=\"" + theme + "\"" + selected + ">" + theme + "</option>");
                }
                
                select.bind("change", function(){
                    var theme = $(this).val();
                    
                    if (theme === "")
                    {
                        alert("theme == \"\"");
                        return false;
                    }
                    
                    console.log("lsKey =>", lsKey, theme);
                    
                    localStorage[lsKey] = theme;
                    callback(select, theme);
                }); 
                
                return select;
            }

            $(function() {
                editormd.htmlEntitiesDialog={
                    path: "plugins/html-entities-dialog"
                    }
                mainEditor = editormd({
                    id: "mainEditormd",
                    width   : "90%",
                    height  : 720,
                    path    : "lib/",
                    
                    // Editor.md theme, default or dark, change at v1.5.0
                    // You can also custom css class .editormd-preview-theme-xxxx
                    theme        : (localStorage.theme) ? localStorage.theme : "dark",
                    // Preview container theme, added v1.5.0
                    // You can also custom css class .editormd-preview-theme-xxxx
                    previewTheme : (localStorage.previewTheme) ? localStorage.previewTheme : "dark",
                    // Added @v1.5.0 & after version is CodeMirror (editor area) theme
                    editorTheme  : (localStorage.editorTheme) ? localStorage.editorTheme : "pastel-on-dark",

                    toc: true,
                    tocm: true,                 //目录
                    codeFold: true,            //代码折叠
                    syncScrolling: true,        //同步滚动 true | false | "single"
                    flowChart: true,            //流程图
                    sequenceDiagram: true,      //序列图
                    taskList: true,             //日程
                    htmlDecode: true,           //HTML标签解析
                    emoji: true,              //emoji源不稳定-不用
                    //tex: true,                 //公式-无用
                });
                
                themeSelect("editormd-theme-select", editormd.themes, "theme", function($this, theme) {
                    mainEditor.setTheme(theme);
                });
                
                themeSelect("editor-area-theme-select", editormd.editorThemes, "editorTheme", function($this, theme) {
                    mainEditor.setCodeMirrorTheme(theme); 
                    // or mainEditor.setEditorTheme(theme);
                });
                
                themeSelect("preview-area-theme-select", editormd.previewThemes, "previewTheme", function($this, theme) {
                    mainEditor.setPreviewTheme(theme);
                });
            });
        </script>
    </body>
</html>

　　相对于simple.html加入的部分主要是主题修改的选项，以及各插件的开启，其它参数如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
 $(function() {
var editor = editormd("test-editor", {
 height:'350px',
 syncScrolling : "single",
 emoji:true,
 //启动本地图片上传功能
 imageUpload: true,
 watch:true,
 imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp","zip","rar"],
 path   : "./editormd/lib/",
 imageUploadURL : "./upload.php", //文件提交请求路径
 saveHTMLToTextarea : true, //注意3：这个配置，方便post提交表单
 previewTheme : "dark",//预览主题样式 黑色
 });
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
{
 theme                : "",             // Editor.md self themes, before v1.5.0 is CodeMirror theme, 
 editorTheme          : "default",      // Editor area, this is CodeMirror theme at v1.5.0
 previewTheme         : "",             // Preview area theme, default empty 
 width                : "100%",
 height               : "100%",
 path                 : "./lib/",       // Dependents module file directory
 pluginPath           : "",             // If this empty, default use settings.path + "../plugins/"
 delay                : 300,            // Delay parse markdown to html, Uint : ms
 autoLoadModules      : true,           // Automatic load dependent module files
 watch                : true,
 placeholder          : "Enjoy Markdown! coding now...",
 gotoLine             : true,           // Enable / disable goto a line
 codeFold             : false,
 autoHeight           : false,
 autoFocus            : true,           // Enable / disable auto focus editor left input area
 autoCloseTags        : true,
 searchReplace        : true,           // Enable / disable (CodeMirror) search and replace function
 syncScrolling        : true,           // options: true | false | "single", default true
 saveHTMLToTextarea   : false,          // If enable, Editor will create a <textarea name="{editor-id}-html-code"> tag save HTML code for form post to server-side.
 onload               : function() {},
 onresize             : function() {},
 onchange             : function() {},
 onwatch              : null,
 onunwatch            : null,
 onpreviewing         : function() {},
 onpreviewed          : function() {},
 onfullscreen         : function() {},
 onfullscreenExit     : function() {},
 onscroll             : function() {},
 onpreviewscroll      : function() {},

 imageUpload          : false,          // Enable/disable upload
 imageFormats         : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
 imageUploadURL       : "",             // Upload url
 crossDomainUpload    : false,          // Enable/disable Cross-domain upload
 uploadCallbackURL    : "",             // Cross-domain upload callback url

 emoji                : false,          // :emoji: , Support Github emoji, Twitter Emoji (Twemoji);
 // Support FontAwesome icon emoji :fa-xxx: > Using fontAwesome icon web fonts;
 // Support Editor.md logo icon emoji :editormd-logo: :editormd-logo-1x: > 1~8x;
 tex                  : false,          // TeX(LaTeX), based on KaTeX
 flowChart            : false,          // flowChart.js only support IE9+
 sequenceDiagram      : false,          // sequenceDiagram.js only support IE9+
 previewCodeHighlight : true,           // Enable / disable code highlight of editor preview area

 toolbar              : true,           // show or hide toolbar
 toolbarAutoFixed     : true,           // on window scroll auto fixed position
 toolbarIcons         : "full",         // Toolbar icons mode, options: full, simple, mini, See `editormd.toolbarModes` property.
 toolbarTitles        : {},
 toolbarHandlers      : {
 ucwords : function() {
 return editormd.toolbarHandlers.ucwords;
 },
 lowercase : function() {
 return editormd.toolbarHandlers.lowercase;
 }
}

以上两段代码摘自 markdown编辑器之editormd使用整合 - 扣丁曼 - 简书

问题

1、本地调试Emoji和HTML实体字符无法加载

　　在本地网页预览时点开Emoji与HTML实体字符两个框会一直转圈圈无法加载，关也关不上，Console会返回一句Markdown_ATY_Editor_md.html:1 Access to XMLHttpRequest at 'file:///D:/New200710/Markdown/Markdown_ATY_Editor_md/plugins/html-entities-dialog/html-entities.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.，这是本地策略导致的，把网页放到服务器域名下自然就解决了。

2、GithubEmoji等Emoji加载不出来

　　这个问题是墙的原因导致的，如果非要用这个功能可以下载一个Emoji包放在目录里，然后在下方代码前面添加emoji的path路径，或者直接在editormd.min.js、editormd.js修改路径。

1
2
3
4
mainEditor = editormd({
    id: "mainEditormd",
    width   : "90%",
    height  : 720,

1
2
3
4
editor.emoji= {
    path: "plugins/emoji-dialog/emoji/",
    ext: ".png"
}

此方法摘自 半暖商城番外篇–解决Editor.md中emoji图标无法显示的问题 - Alibct - 简书

　　由于本人用不太到Emoji，所以直接给关掉了….

3、图片上传相关

　　暂时用不到，具体可以参见 半暖商城番外篇–解决Editor.md中emoji图标无法显示的问题 - Alibct - 简书