html+js 实现markdown编辑器效果


Posted in HTML / CSS onOctober 23, 2019

markdown的Editor.md插件官方网站:https://pandao.github.io/editor.md/

一:下载Editor.md

1:进入官网直接进行下载

github下载地址:https://github.com/pandao/editor.md

2:使用npm进行下载

npm install editor.md

下载下来的文件结构如下:

html+js 实现markdown编辑器效果

二:Editor.md的简单使用

1:前提:

引入css

<link rel="stylesheet" href="editormd/css/editormd.css" />

引入js

<script src="js/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>

2:html+js实现markdown效果

<link rel="stylesheet" href="editormd/css/editormd.css" />
<div id="test-editor">
<textarea style="display:none;" class="content-markdown" name="content-markdown"></textarea>
</div>
<script src="js/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
      var editor = editormd("test-editor", {
        width  : "100%",            //宽度,不填为100%
        height : "500px",           //高度,不填为100%
        theme : "dark",             //主题,不填为默认主题
        path   : "editormd/lib/",   //editor.md插件的lib目录地址
        saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
        toolbarAutoFixed:true,      //工具栏自动固定定位的开启与禁用
      });
    });
</script>

根据如上代码就可以实现markdown编辑器效果

html+js 实现markdown编辑器效果

但是如上代码没有本地上传图片功能,如果你需要本地上传图片功能,js代码修改如下:

$(function() {
    var editor = editormd("test-editor", {
        width  : "100%",            //宽度,不填为100%
        height : "500px",           //高度,不填为100%
        theme : "dark",             //主题,不填为默认主题
        path   : "editormd/lib/",   //editor.md插件的lib目录地址
        saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
        toolbarAutoFixed:true,      //工具栏自动固定定位的开启与禁用
        imageUpload : true,         //运行本地上传
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],    //允许上传的文件格式
        imageUploadURL : "/index.php?r=markdown/upload"                 //上传的后台服务器路径
    });
});

后端上传的简单实现如下(这里上传我使用了Yii框架的intervention/image插件)

Yii::$app->response->format = Response::FORMAT_JSON;
$upload = \Intervention\Image\ImageManagerStatic::make($_FILES['editormd-image-file']['tmp_name'])->save('upload/upload.jpg');//file为上传表单的name名
if ($upload) {
    return [
        'success' => 1,
        'message' => '上传成功',
        'url' => 'upload/upload.jpg'
    ];
} else {
    return [
        'success' => 0,
        'message' => '上传失败',
    ];
}

根据如上代码就可以实现在markdown编辑器中上传本地图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3盒子模型详解
Apr 24 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
元素水平垂直居中的方式
Mar 31 HTML / CSS
详解flex:1什么意思
Jul 23 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 #HTML / CSS
HTML table 表格边框的实现思路
Oct 12 #HTML / CSS
Html5自定义字体解决方法
Oct 09 #HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 #HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 #HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 #HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 #HTML / CSS
You might like
Zerg建筑一览
2020/03/14 星际争霸
深入extjs与php参数交互的详解
2013/06/25 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
BootStrap中
2016/12/10 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python中运行并行任务技巧
2015/02/26 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
想学python 这5本书籍你必看!
2018/12/11 Python
详解Python sys.argv使用方法
2019/05/10 Python
pytorch梯度剪裁方式
2020/02/04 Python
Python 去除字符串中指定字符串
2020/03/05 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
泰国第一在线超市:Tops
2021/02/13 全球购物
村主任群众路线个人对照检查材料
2014/09/26 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
2014年派出所工作总结
2014/11/21 职场文书
给朋友的赠语
2015/06/23 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书