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 ...
随机推荐
- Android多点触控技术
1 简介 Android多点触控在本质上需要LCD驱动和程序本身设计上支持,目前市面上HTC.Motorola和Samsung等知名厂商只要使用电容屏触控原理的手机均可以支持多点触控Multitouc ...
- freeMarker(十五)——XML处理指南之声明的XML处理
学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 1.基本内容 因为XML处理的方法非常必要--这在前面章节中已经展示- ...
- Cot
题目大意 两种操作 给坐标上一个直角三角形中每个整点权值$+1$ 求坐标上一个直角三角形中每个整点权值之和 题解 一顿分析思考加推导之后,发现并不存在这样的数据结构(大概是有,只是我不知道),于是考虑 ...
- 2017-2018-1 20179215《Linux内核原理与分析》第五周作业
一.视频学习 1.系统调用的三层皮:xyz(API).system call(中断向量).sys_xyz(不同种类的服务程序). 2.Libc库定义个一些API引用了封装例程(wrapper rout ...
- Mysql 排序null值 排序问题分析
mysql中null值的排序问题分析 如下表t_user: name age zhangsan 1 lisi NULL wangwu 2 www.2cto.com 执行一下sql: S ...
- ACM学习历程—HDU 5451 Best Solver(Fibonacci数列 && 快速幂)(2015沈阳网赛1002题)
Problem Description The so-called best problem solver can easily solve this problem, with his/her ch ...
- bzoj 2716 [Violet 3]天使玩偶——KDtree
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2716 第三道KDtree!仍旧是模板.还有CDQ分治做法,见下面. 数组迷之开大?(开6e5 ...
- 资料:MVC框架+SQL Server 数据集成引擎
ylbtech-资料:MVC框架+SQL Server 数据集成引擎 1.返回顶部 1. 功能特点: MVC框架耦合性低视图层和业务层分离,这样就允许更改视图层代码而不用重新编译模型和控制器代码,同样 ...
- java报表开发之报表总述
转自:https://blog.csdn.net/u011659172/article/details/40504271?utm_source=blogxgwz6
- static和final的区别
1.static是静态修饰关键字,可以修饰变量和程序块以及类方法: 当你定义一个static的变量的时候jvm会将将其分配在内存堆上,所有程序对它的引用都会指向这一个地址而不会重新分配内存: 修饰一个 ...