Editor.md官网:https://pandao.github.io/editor.md/index.html

下载后解压放到项目内,和引入ueditor差不多

1、引入项目资源

<!--markdown编辑器-->
<script src="{$Think.config.__STATIC__}/admin/plus/editormd/jquery.min.js"></script>
<link rel="stylesheet" href="{$Think.config.__STATIC__}/admin/plus/editormd/css/editormd.css" />
<script src="{$Think.config.__STATIC__}/admin/plus/editormd/editormd.min.js"></script>

2、在自己的页面中加上对应的id

 <div id="test-editormd">
<textarea></textarea>
</div>

3、配置编辑器

<script>
var testEditor;
testEditor = editormd("test-editormd", {
placeholder:'本编辑器支持Markdown编辑,左边编写,右边预览', //默认显示的文字,这里就不解释了
width: "100%",
height: 640,
syncScrolling: "single",
path: "{$Think.config.__STATIC__}/admin/plus/editormd/lib/", //你的path路径(原资源文件中lib包在我们项目中所放的位置)
theme: "white",//工具栏主题
previewTheme: "white",//预览主题
editorTheme: "pastel-on-white",//编辑主题
imageUpload : true,
imageFormats : ["jpg","jpeg","gif","png","bmp","webp"],
imageUploadURL : "{:url('Knowledge/uploadImg')}",//上传图片使用方法
saveHTMLToTextarea: true,
emoji: true,
taskList: true,
tocm: true, // Using [TOCM]
tex: true, // 开启科学公式TeX语言支持,默认关闭
flowChart: true, // 开启流程图支持,默认关闭
sequenceDiagram: true, // 开启时序/序列图支持,默认关闭,
toolbarIcons : function() { //自定义工具栏,后面有详细介绍
return editormd.toolbarModes['full']; // full, simple, mini
},
});
testEditor.getMarkdown();
// 在js中调用getMarkdown这个方法可以获得Markdown格式的文本。
</script>

4、tp5后台图片上传代码

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

thinkphp5使用Markdown编辑器Editor.md并上传图片的更多相关文章

  1. Markdown编辑器editor.md的使用---markdown上传图片

    http://kindeditor.org/ 确定下有没有查找替换功能 http://pandao.github.io/editor.md/ http://pandao.github.io/edito ...

  2. Markdown编辑器editor.md的使用

      目录(?)[-] 一Markdown和editormd简介 二editormd的使用 1下载 2简单使用 21在自己的页面上引入相关的css和js代码如下 22在自己的页面中加上DIV 23在同页 ...

  3. Markdown编辑器Editor.md使用方式

    摘要: 搭建个人博客时,涉及文章上传,文章展示,这里需要一个Markdown插件,mark一下. Editormd下载地址:http://pandao.github.io/editor.md/ 由于前 ...

  4. PHPCMS调用form类编辑器editor函数动态上传图片附件

    http://w3note.com/web/49.html phpcms v9的系统类库有一个表单类,它封装了表单的一些组件,如编辑器.图片上传.时间选择器.模板选 择器等,更详细请参考form.cl ...

  5. JAVA WEB项目中使用并改造editor.md实现Markdown编辑器

    Markdown和Editor.md简介 Markdwon编辑器在技术工作者圈子中已经越来越流行,简单的语法,统一的格式,强大的扩展功能,最重要的是:你可以用Markdown,设计一篇精彩绝伦的文档而 ...

  6. editor.md实现Markdown编辑器

    editor.md实现Markdown编辑器 Markdown和Editor.md简介 Markdwon编辑器在技术工作者圈子中已经越来越流行,简单的语法,统一的格式,强大的扩展功能,最重要的是:你可 ...

  7. 好用的Markdown编辑器一览 readme.md 编辑查看

    https://github.com/pandao/editor.md https://pandao.github.io/editor.md/examples/index.html Editor.md ...

  8. Markdown编辑器的使用

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/LoveJavaYDJ/article/details/73692917 一.Markdown和edi ...

  9. springboot结合开源editor.md集成markdonw编辑器

    今天来实现一个简单的功能,通常blog后台编辑大多使用的是富文本编辑器,比如百度的Ueditor,比较轻巧的wangEditor,那么如何使用开源editor.md的markdown呢? 搭建一个sp ...

随机推荐

  1. Linux-解决putty无法直接使用root用户远程登录linux主机的问题

    问题描述: 有时,在使用putty连接远程linux主机时会发现,无法直接使用root登录, 但是可以使用其他用户登录,然后切换至root用户. 解决办法: 1.修改配置文件 vi /etc/ssh/ ...

  2. C++内存使用机制基本概念详解

    .程序使用内存区 一个程序占用的内存区一般分为5种: ()全局.静态数据区:存储全局变量及静态变量(包括全局静态变量和局部静态变量) ()常量数据区:存储程序中的常量字符串等. ()代码区:存储程序的 ...

  3. bzoj 1441: Min 裴蜀定理

    题目: 给出\(n\)个数\((A_1, ... ,A_n)\)现求一组整数序列\((X_1, ... X_n)\)使得\(S=A_1*X_1+ ...+ A_n*X_n > 0\),且\(S\ ...

  4. java枚举学习enum

    java 1.5以后才出现enum的关键字 所有的enum类都继承自Enum类,所以enum类无法再继承其他的类,可以实现接口,枚举类出了不能被继承其余的与普通类的特性一致, 枚举类的构造函数只能自己 ...

  5. Android HttpGet和HttpPost设置超时

    HttpPost: private Runnable runnable = new Runnable() { @Override public void run() { String url = Ba ...

  6. RS-485收发的零延时转换电路

    转自:http://www.dzsc.com/data/html/2007-5-28/41097.html RS-485是一种基于差分信号传送的串行通信链路层协议.它解决了RS-232协议传输距离太近 ...

  7. ES6学习之字符串的扩展

    字符的Unicode表示法 \uxxxx可以表示一个双字节的字符(xxxx表示字符编码,范围在0000---FFFF),超出此范围用两个双字节表示. console.log("\u0061& ...

  8. CentOS 7 配置 samba服务器

    一.在服务器端上安装软件并进行相关配置(以下操作需用用户root进行): 1.安装samba: yum -y install samba samba-client 2.启动服务并设置开机启动: sys ...

  9. (转)JAVA中的权限修饰符

    注:本博文是转载的,原文地址:http://blog.csdn.net/xk632172748/article/details/51755438 Java中修饰符总结: 访问控制修饰符 访问控制修饰符 ...

  10. linux命令-stty

    一.用途: stty——改变和打印终端行设置 二.参数: 1.打印终端行设置 -a,--all   以人可读的方式打印所有当前设置:-a参数比单独的stty命令输出的终端信息更详细 -g,--save ...