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 ...
随机推荐
- codeforces 650 C. Watchmen(数学公式)
C. Watchmen time limit per test 3 seconds memory limit per test 256 megabytes input standard input o ...
- noip模拟赛Bywzj52501 17.10.18
T1 rob 环形消灭虫子 先想出了一个n^2暴力 然后我们想到 如果从两个连续的点求解 则会出现仅有的两种结果 (因为这两种情况的交是全集) 当时因为Naive求了50次 #include<i ...
- IDEA发布运行web项目(曾经遇到的项目启动报404)
问题: 配置: 配置 facets ,此步很重要,配置 web resource directories ,路径配错,就会报 404 ,一定要定位到项目根目录,也就是下面有整个项目源码的地方 下面是配 ...
- Deferred Shading延迟渲染
Deferred Shading 传统的渲染过程通常为:1)绘制Mesh:2)指定材质:3)处理光照效果:4)输出.传统的过程Mesh越多,光照处理越费时,多光源时就更慢了. 延迟渲染的步骤:1)Pa ...
- InvalidOperationException: out of sync
C#中不能在集合的迭代中修改集合数据
- [转]前端网络(性能)监测工具berserkJS
berserkJS 是基于 Qt (C++跨平台库)开发的前端网络(性能)监测工具. 它的核心功能是通过内置 webkit 收集由页面实际网络请求相关数据. 偏重于页面上线前检测与评估. 页面性能分析 ...
- MongoDB3.2.8创建初始用户
启动MongoDB前需要关闭配置文件中的auth选项,否则不能创建用户 首先创建用户管理用户 use admin db.createUser({user:'admin',pwd:'123456', r ...
- 【转】 Pro Android学习笔记(五六):配置变化
目录(?)[-] Activity的destorycreate过程 Fragment的destorycreate过程 onSaveInstanceState saveFragmentInstanceS ...
- JVM体系结构之五:本地方法栈
对于一个运行中的Java程序而言,它还可能会用到一些跟本地方法相关的数据区.当某个线程调用一个本地方法时,它就进入了一个全新的并且不再受虚拟机限制的世界.本地方法可以通过本地方法接口来访问虚拟机的运行 ...
- SpringMVC执行流程简介
1.用户向服务器发送请求,请求被SpringMVC的前端控制器DispatcherServlet截获. 2.DispatcherServlet对请求的URL(统一资源定位符)进行解析,得到URI(请求 ...