thinkphp5使用Markdown编辑器Editor.md并上传图片
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并上传图片的更多相关文章
- Markdown编辑器editor.md的使用---markdown上传图片
http://kindeditor.org/ 确定下有没有查找替换功能 http://pandao.github.io/editor.md/ http://pandao.github.io/edito ...
- Markdown编辑器editor.md的使用
目录(?)[-] 一Markdown和editormd简介 二editormd的使用 1下载 2简单使用 21在自己的页面上引入相关的css和js代码如下 22在自己的页面中加上DIV 23在同页 ...
- Markdown编辑器Editor.md使用方式
摘要: 搭建个人博客时,涉及文章上传,文章展示,这里需要一个Markdown插件,mark一下. Editormd下载地址:http://pandao.github.io/editor.md/ 由于前 ...
- PHPCMS调用form类编辑器editor函数动态上传图片附件
http://w3note.com/web/49.html phpcms v9的系统类库有一个表单类,它封装了表单的一些组件,如编辑器.图片上传.时间选择器.模板选 择器等,更详细请参考form.cl ...
- JAVA WEB项目中使用并改造editor.md实现Markdown编辑器
Markdown和Editor.md简介 Markdwon编辑器在技术工作者圈子中已经越来越流行,简单的语法,统一的格式,强大的扩展功能,最重要的是:你可以用Markdown,设计一篇精彩绝伦的文档而 ...
- editor.md实现Markdown编辑器
editor.md实现Markdown编辑器 Markdown和Editor.md简介 Markdwon编辑器在技术工作者圈子中已经越来越流行,简单的语法,统一的格式,强大的扩展功能,最重要的是:你可 ...
- 好用的Markdown编辑器一览 readme.md 编辑查看
https://github.com/pandao/editor.md https://pandao.github.io/editor.md/examples/index.html Editor.md ...
- Markdown编辑器的使用
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/LoveJavaYDJ/article/details/73692917 一.Markdown和edi ...
- springboot结合开源editor.md集成markdonw编辑器
今天来实现一个简单的功能,通常blog后台编辑大多使用的是富文本编辑器,比如百度的Ueditor,比较轻巧的wangEditor,那么如何使用开源editor.md的markdown呢? 搭建一个sp ...
随机推荐
- 关于from..import 与import导入模块问题
问题来源:导入PyQt5里面的模块时老是出错 1.from PyQt5 import QtWidgets.QApplication,QtWidgets.QtDialog #出错2.from PyQt5 ...
- 第十七章-异步IO
异步IO的出现源自于CPU速度与IO速度完全不匹配 一般的可以采用多线程或者多进程的方式来解决IO等待的问题 同样异步IO也可以解决同步IO所带来的问题 常见的异步IO的实现方式是使用一个消息循环, ...
- stl_list.h
stl_list.h // Filename: stl_list.h // Comment By: 凝霜 // E-mail: mdl2009@vip.qq.com // Blog: http://b ...
- 【遍历二叉树】02二叉树的中序遍历【Binary Tree Inorder Traversal】
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 给定一个二叉树,返回他的中序遍历的 ...
- informix 把数据从一个表倒到另外一个表中
drop table zrjReinUnClaimTmpT; create table zrjReinUnClaimTmpT ( mainid SERIAL not null, RepayNo var ...
- 【跨域】Access-Control-Allow-Origin
- 每天一个linux命令(6):rm命令
版权声明更新:2017-05-10博主:LuckyAlan联系:liuwenvip163@163.com声明:吃水不忘挖井人,转载请注明出处! 1文章介绍 本文介绍了Linux下面的rm命令. 2 开 ...
- 学习大牛笔记nginx + gunicorn + supervisor
安装 gunicorn pip install gunicorn pip 是一个重要的工具,python 用来管理包.还有一个最佳生产就是每次使用 pip 安装的库,都写入一个 requirement ...
- POJ2420:A Star not A Tree?
我对模拟退火的理解:https://www.cnblogs.com/AKMer/p/9580982.html 我对爬山的理解:https://www.cnblogs.com/AKMer/p/95552 ...
- 洛谷 P4525 & P4526 [模板] 自适应辛普森积分
题目:https://www.luogu.org/problemnew/show/P4525 https://www.luogu.org/problemnew/show/P4526 学习辛普森积分:h ...