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

注意：

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

页面textarea样式

 这是我首次使用

JS调用代码

配置参数

{
 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  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;
 } 
}
</code></pre> 
 <blockquote> 
  <p>显示效果</p> 
 </blockquote> 
 <ul> 
  <li> 
   <div class="image-package"> 
    <div class="image-container" style="max-width: 700px; max-height: 670px;"> 
     <div class="image-view">  
     </div> 
    </div> 
    <div class="image-caption">
      003.png 
    </div> 
   </div></li> 
 </ul> 
 <p><em>界面出来了已经完成很大一部分了。通过设置提交数据打印可以查看editormd提交数据的一个结构</em></p> 
 <ul> 
  <li> 
   <div class="image-package"> 
    <div class="image-container" style="max-width: 661px; max-height: 535px;"> 
     <div class="image-view">  
     </div> 
    </div> 
    <div class="image-caption">
      005.png 
    </div> 
   </div></li> 
 </ul> 
 <p><em>通过<code>debug</code>我们可有看到提交给后台的数据如下：</em></p> 
 <ul> 
  <li> 
   <div class="image-package"> 
    <div class="image-container" style="max-width: 700px; max-height: 306px;"> 
     <div class="image-view">  
     </div> 
    </div> 
    <div class="image-caption">
      004.png 
    </div> 
   </div></li> 
 </ul> 
 <h3>3. 图片上传处理</h3> 
 <p>3.1 <em>editormd的图片上传功能有很多坑，下面我们将依次填坑。</em></p> 
 <blockquote> 
  <p>editormd图片上传功能需要设置，要在返回固定格式的json数据，即使在调试时候。<code>扣丁曼</code>在初次使用editormd项目时在此处浪费了很多时间。</p> 
  <p>开启图片上传参数<code>imageUpload : true</code>、<code>imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],</code>、<code>imageUploadURL : "./upload.php",</code></p> 
 </blockquote> 
 <p><em>后台返回样式如下：</em></p> 
 <pre><code>{
 success : 0 | 1, //0表示上传失败;1表示上传成功
 message : "提示的信息",
 url     : "图片地址" //上传成功时才返回
}
</code></pre> 
 <p>3.2 增加截图上传和拖拽上传图片功能</p> 
 <p>由于editormd的上传图片功能用户体验并不友好！每次上传图片很费事。</p> 
 <p><code>扣丁曼</code>通过收集网上其他小伙伴提供的建议也实现了editormd的截图上传和拖拽上传功能。</p> 
 <ul> 
  <li> <p>新增JS插件代码</p> <p><em>文件名<code>editoemd-image-past.js</code>放置于<code>editormd/plugins</code>文件夹下</em></p> </li> 
 </ul> 
 <pre><code><script>
    console.log('代码内较多请通过下载方式查看')
   </script>
</code></pre> 
 <ul> 
  <li>页面引入</li> 
 </ul> 
 <pre><code><script src="./editormd/plugins/editormd-image-past.js"></script>
</code></pre> 
 <ul> 
  <li>项目中配置</li> 
 </ul> 
 <pre><code>path   : "__PAGE__/global/plugins/editormd/lib/",
   imageUploadURL : "/uploadFile", //文件提交请求路径
   onload : function() {
    initPasteDragImg(this); //配置图片粘贴上传
    },
   saveHTMLToTextarea : true, //注意3：这个配置，方便post提交表单
</code></pre> 
 <h3>4. 前台展示editormd数据</h3> 
 <ul> 
  <li>在view页面引入css文件和js文件如下</li> 
 </ul> 
 <pre><code><!-- 最新版本的 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>    
</code></pre> 
 <ul> 
  <li>页面展示区</li> 
 </ul> 
 <pre><code><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;?>

• js处理

• 效果图

image.png

5. 项目源码

• 关注公众号“扣丁曼” 回复editormd获取项目源码。

• 本项目采用php作为处理语言，其他语种小伙伴请各显神通。

6.联系我

• 通过公众号“扣丁曼”(号码:qcgcoder)直接与我联系。

• 通过我的博客获取最新资讯

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