介绍

最近php搞了个博客，需要集成markdown编辑器（富文本的太low了，效率也低），用的是时下比较火的editormd，除了基本的文档编辑我这里还实现了几个自己的需求：

使用ctrl-v实现将图片粘贴到markdown编辑器
实现前台复制代码（有需要的找我要）

效果展示

编辑器
前台展示

后台集成

引入资源

<!--    editormd-->
<link href="__STATIC__/common/plugin/editormd/css/editormd.min.css" rel="stylesheet"><script src="__STATIC__/common/plugin/editormd/editormd.min.js"></script>
<script src="__STATIC__/common/plugin/editormd/plugins/image-handle-paste/uploadPasteImg.js"></script>
<script src="__STATIC__/common/plugin/webuploader/webuploader.min.js"></script>

编写DOM

<div class="form-group"><label for=""  class="col-sm-2 control-label">文章内容</label><div class="col-sm-9"><div id="editor1"><textarea name="arc_content"></textarea></div></div>
</div>

初始化编辑器

// 初始化编辑器$(function() {var editor = editormd("editor1", {width: "100%",height: 740,path: "__STATIC__/common/plugin/editormd/lib/",//theme : "dark",//previewTheme : "dark",//editorTheme : "pastel-on-dark",codeFold : true,fullscreen: false,//syncScrolling : false,saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea//searchReplace : true,watch : false,                // 关闭实时预览//htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启//toolbar  : false,             //关闭工具栏//previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启emoji : true,taskList : true,tocm            : true,         // Using [TOCM]lineNumbers          : false,//tex : true,                   // 开启科学公式TeX语言支持，默认关闭//flowChart : true,             // 开启流程图支持，默认关闭//sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,//dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true//dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true//dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true//dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fffimageUpload : true,imageFormats : ["jpg","gif", "png"],imageUploadURL : "/system/component/uploadMDImg",onload : function() {//console.log('onload', this);//this.fullscreen();//this.unwantch();//this.watch().fullscreen();//this.setMarkdown("#PHP");//this.width("100%");//this.height(480);//this.resize("100%", 640);//this.setMarkdow()// 初始化粘贴图片插件initPasteDragImg(this);}});});

图片上传接口

//Markdown上传图片public function uploadMDImg(){if(request()->isPost()){$file = request()->file('editormd-image-file');$info = $file->move( ROOT_PATH . 'public' . DS . 'uploads' );if($info){$saved_name = '/uploads/' . str_replace("\\","/",$info->getSaveName());//$value=config('uploadFiles').'/knowledge/'.$info->getSaveName();return json(['url'=>$saved_name,'success'=>1,'message'=>'图片上传成功!']);}else{echo $file->getError();}}else{$this->error('非法请求');}}

前台展示

引入资源

<link rel="stylesheet" href="__STATIC__/common/plugin/editormd/css/editormd.min.css" /><link rel="stylesheet" type="text/css" href="__STATIC__/common/plugin/editormd/css/editormd.preview.min.css"/>
<!--markdown-->
<script src="__STATIC__/common/plugin/editormd/editormd.min.js" type="text/javascript" charset="utf-8"></script>
<script src="__STATIC__/common/plugin/editormd/lib/marked.min.js" type="text/javascript" charset="utf-8"></script>
<script src="__STATIC__/common/plugin/editormd/lib/prettify.min.js" type="text/javascript" charset="utf-8"></script>
<script src="__STATIC__/common/js/clipboard.min.js" type="text/javascript" charset="utf-8"></script>

编写DOM

<div id="editmd" class="post-content" >
<!-- textarea 加载testEditor.getMarkdown()的内容 -->
<textarea id="content"style="display:none;" name="content">{$articleData['arc_content']}</textarea>
</div>

初始化文章内容

var Editor;
//markdownToHTML 将markdown文本转换为HTML
Editor = editormd.markdownToHTML("editmd", {htmlDecode      : "style,script,iframe",  // you can filter tags decodemarkdown        : $("#content").text() ,//+ "\r\n" + $("#append-test").text(),//htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启htmlDecode      : "style,script,iframe",  // you can filter tags decode//toc             : false,tocm            : true,    // Using [TOCM]//tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层//gfm             : false,//tocDropdown     : true,// markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签path: "__STATIC__/common/plugin/editormd/lib/",lineNumbers     : false,emoji           : true,taskList        : true,tocm            : true //对目录解析
});

thinkphp集成editormd一系列实战相关推荐

php 脚手架,thinkphp集成前端脚手架Vue-cli的教程图解
本文主要介绍怎么在Thinkphp中集成后台前端脚手架框架Vue-Cli. 一.安装Vue-Cli到Thinkphp中 1.1.1 检查是否安装node 终端输入npm的指令如果没有安装的话会提示未找 ...
thinkphp集成系列之phpmailer批量发送邮件
前段时间写了一篇博客:thinkphp集成系列之短信验证码.订单通知说了这是一个短信通知泛滥的年代:大部分网站的邮箱注册都已经被短信注册所取代: 但是邮件和短信相比在一些场景依然有着重要的意义和优势 ...
SpringBoot集成Elasticsearch7.4 实战（一）
在网上已经有好多关于Elasticsearch的介绍,就不在翻来覆去讲一些基本概念,大家感兴趣的可以自己去找一些资料巩固下.这次只为了顾及众多首次接触Elasticsearch,案例都讲的很浅显,还有 ...
thinkphp集成银联网关支付简单实例
thinkphp集成银联手机网关支付简单实例准备工作网银手机网关支付产品开发包下载: https://open.unionpay.com/ajweb/help/file/toDetailPage? ...
ThinkPHP集成支付宝担保支付
概述支付宝担保支付 ThinkPHP集成支付宝担保交易 1.准备工作 2.自定义Action类 3.代码下载概述现在的网站功能越来越全乎了,很多网站都需要做支付功能,而且很多大平台都提供了各式各 ...
ThinkPHP 集成 PHPUnit 8 测试框架进行单元测试
ThinkPHP 5.1 集成 PHPUnit 8 测试框架本项目仅适用于运行 PHP7.2 以上的环境!对于低版本 PHP 请根据需要调整 PHPUnit 的版本! 声明由于原项目 think- ...
java docker 持续集成_最佳实战Docker持续集成图文详解
前言关于Docker的文章铺天盖地,但精品文章往往翻译居多.都说Docker天生适合持续集成/持续部署,但同样,可落地.实际可操作性的文章也很罕见. 基于这些情况,虽然我们专栏定位为运维管理性文字, ...
【网站支付PHP篇】thinkPHP集成汇潮支付(ecpss)
系列目录支付宝集成:http://www.cnblogs.com/nerve/p/3437879.html 系列说明最近在帮朋友的系统安装支付模块(兑换网站积分),现在总结一些开发心得,希望对大家 ...
【网站支付PHP篇】thinkPHP集成支付宝支付（担保交易）
目录系列说明开发环境部署支付宝支付请求支付宝返回处理系列说明最近在帮朋友的系统安装支付模块(兑换网站积分),现在总结一些开发心得,希望对大家有用.这个系列会讲以下第三方支付平台的集成: ...
SparkStreaming 系列（二）kafka与Streaming集成direct流实战---多流集群高并发场景代码演示
写在前面: 我是「nicedays」,一枚喜爱做特效,听音乐,分享技术的大数据开发猿.这名字是来自world order乐队的一首HAVE A NICE DAY.如今,走到现在很多坎坷和不顺,如今终于 ...

thinkphp集成editormd一系列实战

介绍

效果展示

后台集成

引入资源

编写DOM

初始化编辑器

图片上传接口

前台展示

引入资源

编写DOM

初始化文章内容

thinkphp集成editormd一系列实战相关推荐

最新文章

热门文章