markdown引入代码_markdown编辑器使用之editormd整合PHP项目

不啰嗦看效果

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

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>

配置参数

参考项目地址的配置文件：https://github.com/pandao/editor.md

显示效果

界面出来了已经完成很大一部分了。通过设置提交数据打印可以查看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 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> 

• 效果图

5. 项目源码

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

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

6.联系我

• 通过公众号“扣丁曼”(号码:qcgcoder)直接与我联系。
• 通过我的博客获取最新资讯博客网址：https://52qcg.cn