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 透明色 RGBA使用介绍
Aug 06 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 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
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
清除div下面的所有标签的方法
2014/02/17 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
js实现返回顶部效果
2017/03/10 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
在Python中使用Neo4j数据库的教程
2015/04/16 Python
Python线程详解
2015/06/24 Python
python一键升级所有pip package的方法
2017/01/16 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
python函数的万能参数传参详解
2019/07/26 Python
python实现画循环圆
2019/11/23 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
市场营销专业个人求职信范文
2013/12/14 职场文书
上课迟到检讨书
2014/01/19 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
党员作风建设整改方案
2014/10/27 职场文书
中秋客户感谢信
2015/01/22 职场文书
歌剧魅影观后感
2015/06/05 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
react 路由Link配置详解
2021/11/11 Javascript