markdown编辑器之editormd使用整合

不啰嗦看效果

如果觉得对你项目有用请继续深入。

007.gif

1. editor.md简介

1.1 说明

Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
1.2 项目地址

github地址：https://github.com/pandao/editor.md
1.3 项目效果图

001.png

2. 项目整合

2.1 下载editormd至自己项目根目录

如下为我的项目目录：

002.png

2.2 项目部署

引入css样式文件和js文件

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" > 
 <!-- 引入editormd样式文件 -->
 <link rel="stylesheet" href="./editormd/css/editormd.css" >
 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script> 
 <script src="./editormd/editormd.js" ></script>

注意：

务必引入 editormd/css/editormd.css 和 editormd/editormd.js两个文件。

页面textarea样式

<div id="test-editor">
 <textarea id="inp-content" style="display:none;">这是我首次使用</textarea>
</div>

JS调用代码

<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>

配置参数

{
 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;
 } 
}

显示效果

003.png

界面出来了已经完成很大一部分了。通过设置提交数据打印可以查看editormd提交数据的一个结构

005.png

通过debug我们可有看到提交给后台的数据如下：

004.png

3. 图片上传处理

3.1 editormd的图片上传功能有很多坑，下面我们将依次填坑。

editormd图片上传功能需要设置，要在返回固定格式的json数据，即使在调试时候。扣丁曼在初次使用editormd项目时在此处浪费了很多时间。

开启图片上传参数imageUpload : true、imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],、imageUploadURL : "./upload.php",

后台返回样式如下：

{
 success : 0 | 1, //0表示上传失败;1表示上传成功
 message : "提示的信息",
 url     : "图片地址" //上传成功时才返回
}

3.2 增加截图上传和拖拽上传图片功能

由于editormd的上传图片功能用户体验并不友好！每次上传图片很费事。

扣丁曼通过收集网上其他小伙伴提供的建议也实现了editormd的截图上传和拖拽上传功能。

新增JS插件代码

文件名editoemd-image-past.js放置于editormd/plugins文件夹下

<script>
    console.log('代码内较多请通过下载方式查看')
   </script>

页面引入

<script src="./editormd/plugins/editormd-image-past.js"></script>

项目中配置

path   : "__PAGE__/global/plugins/editormd/lib/",
   imageUploadURL : "/uploadFile", //文件提交请求路径
   onload : function() {
    initPasteDragImg(this); //配置图片粘贴上传
    },
   saveHTMLToTextarea : true, //注意3：这个配置，方便post提交表单

4. 前台展示editormd数据

在view页面引入css文件和js文件如下

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" >

     <!-- 引入editormd样式文件 -->
     <link rel="stylesheet" href="./editormd/css/editormd.css" >

 <link href="./editormd/css/sons-of-obsidian.css" rel="stylesheet" type="text/css" />
     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
      <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script>

页面展示区

<div id="test-editormd-view" style="width:700px;" class="blog-single-desc">
         <textarea style="display:none;" id="test-editormd-markdown-doc"><?php echo $data==''? '## 还没有数据哦！':$data;?></textarea>
</div>

js处理

<script src="./editormd/lib/marked.min.js"></script>
    <!-- 第三方界面样式文件google -->
    <script src="./editormd/lib/google-code-prettify/prettify.js"></script>
    <script src="./editormd/lib/raphael.min.js"></script>
    <script src="./editormd/lib/underscore.min.js"></script>
    <script src="./editormd/lib/sequence-diagram.min.js"></script>
    <script src="./editormd/lib/flowchart.min.js"></script>
    <script src="./editormd/editormd.js"></script>
    <script>
    $(function() {
            editormd.markdownToHTML("test-editormd-view", {
                htmlDecode: "style,script,iframe", // you can filter tags decode
                emoji: true,
                taskList: true,
                tex: true, // 默认不解析
                flowChart: false, // 默认不解析
                sequenceDiagram: true, // 默认不解析
                path: "./editormd/lib/",
                previewTheme: "dark"
            });
    });
    </script>

效果图

image.png

5. 项目源码

关注公众号“扣丁曼” 回复editormd获取项目源码。
本项目采用php作为处理语言，其他语种小伙伴请各显神通。

6.联系我

通过公众号“扣丁曼”(号码:qcgcoder)直接与我联系。
通过我的博客获取最新资讯

博客网址：https://52qcg.cn