不啰嗦看效果

如果覺得對(duì)你項(xiàng)目有用請(qǐng)繼續(xù)深入戈次。

007.gif

1. editor.md簡(jiǎn)介

• 1.1 說明

  Editor.md 是一款開源的、可嵌入的 Markdown 在線編輯器（組件）筒扒，基于 CodeMirror怯邪、jQuery 和 Marked 構(gòu)建。

• 1.2 項(xiàng)目地址

  github地址：https://github.com/pandao/editor.md

• 1.3 項(xiàng)目效果圖

001.png

2. 項(xiàng)目整合

2.1 下載editormd至自己項(xiàng)目根目錄

如下為我的項(xiàng)目目錄：

002.png

2.2 項(xiàng)目部署

引入css樣式文件和js文件

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
 <link rel="stylesheet"  > 
 <!-- 引入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> 

注意：

務(wù)必引入 editormd/css/editormd.css 和 editormd/editormd.js兩個(gè)文件花墩。

頁面textarea樣式

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

JS調(diào)用代碼

<script>
 $(function() {
var editor = editormd("test-editor", {
 height:'350px',
 syncScrolling : "single",
 emoji:true,
 //啟動(dòng)本地圖片上傳功能
 imageUpload: true,
 watch:true,
 imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp","zip","rar"],
 path   : "./editormd/lib/",
 imageUploadURL : "./upload.php", //文件提交請(qǐng)求路徑
 saveHTMLToTextarea : true, //注意3：這個(gè)配置悬秉，方便post提交表單
 previewTheme : "dark",//預(yù)覽主題樣式 黑色
 });
})
</script>

配置參數(shù)

{
 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

界面出來了已經(jīng)完成很大一部分了。通過設(shè)置提交數(shù)據(jù)打印可以查看editormd提交數(shù)據(jù)的一個(gè)結(jié)構(gòu)

• 005.png

通過debug我們可有看到提交給后臺(tái)的數(shù)據(jù)如下：

• 004.png

3. 圖片上傳處理

3.1 editormd的圖片上傳功能有很多坑冰蘑，下面我們將依次填坑和泌。

editormd圖片上傳功能需要設(shè)置，要在返回固定格式的json數(shù)據(jù)祠肥，即使在調(diào)試時(shí)候武氓。扣丁曼在初次使用editormd項(xiàng)目時(shí)在此處浪費(fèi)了很多時(shí)間。

開啟圖片上傳參數(shù)imageUpload : true仇箱、imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],县恕、imageUploadURL : "./upload.php",

后臺(tái)返回樣式如下：

{
 success : 0 | 1, //0表示上傳失敗;1表示上傳成功
 message : "提示的信息",
 url     : "圖片地址" //上傳成功時(shí)才返回
}

3.2 增加截圖上傳和拖拽上傳圖片功能

由于editormd的上傳圖片功能用戶體驗(yàn)并不友好！每次上傳圖片很費(fèi)事剂桥。

扣丁曼通過收集網(wǎng)上其他小伙伴提供的建議也實(shí)現(xiàn)了editormd的截圖上傳和拖拽上傳功能忠烛。

• 新增JS插件代碼

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

<script>
    console.log('代碼內(nèi)較多請(qǐng)通過下載方式查看')
   </script>

• 頁面引入

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

• 項(xiàng)目中配置

path   : "__PAGE__/global/plugins/editormd/lib/",
   imageUploadURL : "/uploadFile", //文件提交請(qǐng)求路徑
   onload : function() {
    initPasteDragImg(this); //配置圖片粘貼上傳
    },
   saveHTMLToTextarea : true, //注意3：這個(gè)配置，方便post提交表單

4. 前臺(tái)展示editormd數(shù)據(jù)

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

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
     <link rel="stylesheet"  >

     <!-- 引入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>    

• 頁面展示區(qū)

<div id="test-editormd-view" style="width:700px;" class="blog-single-desc">
         <textarea style="display:none;" id="test-editormd-markdown-doc"><?php echo $data==''? '## 還沒有數(shù)據(jù)哦权逗！':$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, // 默認(rèn)不解析
                flowChart: false, // 默認(rèn)不解析
                sequenceDiagram: true, // 默認(rèn)不解析
                path: "./editormd/lib/",
                previewTheme: "dark"
            });
    });
    </script>

• 效果圖

image.png

5. 項(xiàng)目源碼

• 關(guān)注公眾號(hào)“扣丁曼” 回復(fù)editormd獲取項(xiàng)目源碼美尸。

• 本項(xiàng)目采用php作為處理語言，其他語種小伙伴請(qǐng)各顯神通旬迹。

6.聯(lián)系我

• 通過公眾號(hào)“扣丁曼”(號(hào)碼:qcgcoder)直接與我聯(lián)系火惊。

• 通過我的博客獲取最新資訊

  博客網(wǎng)址：https://52qcg.cn