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 ...
随机推荐
- 【leetcode刷题笔记】Remove Duplicates from Sorted Array II
Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For exampl ...
- [转]关于新一轮QQ Tencent://Message 在线联系
关于在线QQ代码. 以前的QQ代码都需要添加好友. 现在的 首先是到http://wp.qq.com/生成你的QQ在线代码 很长的一段代码,并且每个QQ生成的sigT字符串都是不一样的.. 闲来无事, ...
- bzoj 3158 千钧一发 —— 最小割
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3158 \( a[i] \) 是奇数则满足条件1,是偶数则显然满足条件2: 因为如果把两个奇数 ...
- JavaScript下的进制转换
JavaScript下的进制转换 //十进制转其他进制 var num = 99; console.log('十进制: ', num); console.log('八进制:', (num).toStr ...
- POJ1365:素数
Prime Land Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 3552 Accepted: 1609 Descri ...
- Python:format()方法
转于:https://blog.csdn.net/zhang89xiao/article/details/53818906 博主:张肖的博客 描述: format的格式 replacement_fie ...
- JavaScript-Tool:jquery.cxselect.js
ylbtech-JavaScript-Tool:jquery.cxselect.js 1.返回顶部 1.jquery.cxselect.js /*! * jQuery cxSelect * @name ...
- Java变量初始化的讲解
首先需要说明的是Java中的变量分为两种:成员变量和局部变量 其中成员变量又可分为:实例变量(非静态变量)和类变量(静态变量) 局部变量(局部变量的作用时间很短,所以一般是存储在栈中的): 1.形参在 ...
- 三、kafka主要配置
1.Broker配置 <ignore_js_op> 2.Consumer主要配置 <ignore_js_op> 3.Producer主要配置 <ignor ...
- C++中对象的常引用
直接传递对象名 用对象名做函数参数时,在函数调用时将建立一个新的对象,它是形参对象的拷贝. ================下面给出一个直接传递对象名的例子程序1.1================= ...