markdown编辑器之editormd使用

文章目录

不啰嗦看效果
1. editor.md简介
2. 项目整合
3. 图片上传处理
4. 前台展示editormd数据
5. 项目源码
6.联系我

不啰嗦看效果

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

1. editor.md简介

1.1 说明

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

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

2. 项目整合

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

如下为我的项目目录：

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>

配置参数

{mode                 : "gfm",          // gfm or markdownname                 : "",             // Form element name for postvalue                : "",             // value for CodeMirror, if mode not gfm/markdowntheme                : "",             // Editor.md self themes, before v1.5.0 is CodeMirror theme, default emptyeditorTheme          : "default",      // Editor area, this is CodeMirror theme at v1.5.0previewTheme         : "",             // Preview area theme, default emptymarkdown             : "",             // Markdown source codeappendMarkdown       : "",             // if in init textarea value not empty, append markdown to textareawidth                : "100%",height               : "100%",path                 : "./lib/",       // Dependents module file directorypluginPath           : "",             // If this empty, default use settings.path + "../plugins/"delay                : 300,            // Delay parse markdown to html, Uint : msautoLoadModules      : true,           // Automatic load dependent module fileswatch                : true,placeholder          : "Enjoy Markdown! coding now...",gotoLine             : true,           // Enable / disable goto a linecodeFold             : false,autoHeight           : false,autoFocus            : true,           // Enable / disable auto focus editor left input areaautoCloseTags        : true,searchReplace        : true,           // Enable / disable (CodeMirror) search and replace functionsyncScrolling        : true,           // options: true | false | "single", default truereadOnly             : false,          // Enable / disable readonly modetabSize              : 4,indentUnit           : 4,lineNumbers          : true,           // Display editor line numberslineWrapping         : true,autoCloseBrackets    : true,showTrailingSpace    : true,matchBrackets        : true,indentWithTabs       : true,styleSelectedText    : true,matchWordHighlight   : true,           // options: true, false, "onselected"styleActiveLine      : true,           // Highlight the current linedialogLockScreen     : true,dialogShowMask       : true,dialogDraggable      : true,dialogMaskBgColor    : "#fff",dialogMaskOpacity    : 0.1,fontSize             : "13px",saveHTMLToTextarea   : false,          // If enable, Editor will create a <textarea name="{editor-id}-html-code"> tag save HTML code for form post to server-side.disabledKeyMaps      : [],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 uploadimageFormats         : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],imageUploadURL       : "",             // Upload urlcrossDomainUpload    : false,          // Enable/disable Cross-domain uploaduploadCallbackURL    : "",             // Cross-domain upload callback urltoc                  : true,           // Table of contentstocm                 : false,          // Using [TOCM], auto create ToC dropdown menutocTitle             : "",             // for ToC dropdown menu buttontocDropdown          : false,          // Enable/disable Table Of Contents dropdown menutocContainer         : "",             // Custom Table Of Contents Container SelectortocStartLevel        : 1,              // Said from H1 to create ToChtmlDecode           : false,          // Open the HTML tag identificationpageBreak            : true,           // Enable parse page break [========]atLink               : true,           // for @linkemailLink            : true,           // for email address auto linktaskList             : false,          // Enable Github Flavored Markdown task listsemoji                : 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 KaTeXflowChart            : false,          // flowChart.js only support IE9+sequenceDiagram      : false,          // sequenceDiagram.js only support IE9+previewCodeHighlight : true,           // Enable / disable code highlight of editor preview areatoolbar              : true,           // show or hide toolbartoolbarAutoFixed     : true,           // on window scroll auto fixed positiontoolbarIcons         : "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;}},toolbarCustomIcons   : {               // using html tag create toolbar icon, unused default <a> tag.lowercase        : "<a href=\"javascript:;\" title=\"Lowercase\" unselectable=\"on\"><i class=\"fa\" name=\"lowercase\" style=\"font-size:24px;margin-top: -10px;\">a</i></a>","ucwords"        : "<a href=\"javascript:;\" title=\"ucwords\" unselectable=\"on\"><i class=\"fa\" name=\"ucwords\" style=\"font-size:20px;margin-top: -3px;\">Aa</i></a>"},toolbarIconTexts     : {},lang : {  // Language data, you can custom your language.name        : "zh-cn",description : "开源在线Markdown编辑器<br/>Open source online Markdown editor.",tocTitle    : "目录",toolbar     : {//...},button: {//...},dialog : {//...}//...}
}

显示效果

界面出来了已经完成很大一部分了。通过设置提交数据打印可以查看editormd提交数据的一个结构-
通过debug我们可有看到提交给后台的数据如下：

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"><textareastyle="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 decodeemoji: true,taskList: true,tex: true, // 默认不解析flowChart: false, // 默认不解析sequenceDiagram: true, // 默认不解析path: "./editormd/lib/",previewTheme: "dark"});
});
</script>

效果图

5. 项目源码

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

6.联系我

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

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

markdown编辑器之editormd使用相关推荐

markdown编辑器之editormd使用整合
务必引入 editormd/css/editormd.css 和 editormd/editormd.js两个文件. 1.页面textarea样式 <div id="test-edit ...
拒绝选择恐惧症！国内好用的Markdown编辑器之有道云笔记
拒绝选择恐惧症!国内好用的Markdown编辑器之有道云笔记什么是Markdown?Markdown是一种轻量级的「标记语言」,通常为程序员群体所用,目前它已是全球最大的技术分享网站 GitHub ...
CSDN Markdown编辑器之emoji表情
CSDN Markdown编辑器是有彩蛋
7 款优秀 Markdown 编辑工具推荐
解决作者编辑们的焦虑:7 款优秀 Markdown 编辑工具推荐什么是 Markdown?简单地说,它就是一种语法,一门适合用于写作的简单语言.用过 Markdown 的人都知道,它的高效在于能有效 ...
为什么在CSDN中同时打开两个Markdown编辑窗口会相互干扰？
简介: 很长时间,在使用CSDN的Markdown编辑界面的时候遇到一个令人烦恼的情况.同时在两个Chrome浏览器窗口打开CSDN Markdown编辑窗口的会相互出现干扰.关于上述问题,不知道C ...
Markdown编辑表格时如何输入竖线（'|', pipe，vertical bar）
Markdown编辑表格时如何输入竖线 How to input '|'(pipe,vertical bar) in table in markdown editor? 主要思路: 竖线用 | 或者 ...
markdown软件_实用软件推荐｜Markdown文本编辑器之Typora
通常大家在编写文本,比如进行写作,记录笔记的时候,一般都会选择记事本,Word,或者 onenote 和印象笔记等等. 这些软件都有着各自的优点,如记事本虽然不用注意格式,但过于简洁:Word 功能强 ...
两款爱不释手的markdown编辑工具
做软件这行呢,Markdown对于大家来说已不是什么陌生的东西了,即使不写文档也能经常看到Markdown形式的文档,因为全球最大的同性交流网站GitHub就兼容了Markdown的语法,那么Mark ...
markdown编辑模式添加除水印图片方法
前言本博客记录在markdown编辑模式下的去除水印添加图片方法. 对于富文本编辑模式是否适用暂不清楚. 一.玉子的图片示例直接复制粘贴图片: 效果如下: 二.修改粘贴的图片的源代码请看操作: ...
markdown 字体颜色_一文搞定Markdown编辑头条号方法
Markdown风格发布自媒体文章时虽然内容非常重要,但是排版更加重要.因为没有外在美,如何让人花时间和精力去了解你的内在美呢. 最早由于公众号的流行,但它自带的编辑器却非常low(注: 现在已经好 ...