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 相关文章推荐
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
html Table 表头固定的实现
Jan 22 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 06 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&amp;&amp;mysql)四
2006/10/09 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php使用websocket示例详解
2014/03/12 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
php实现短信发送代码
2015/07/05 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
python+django+sql学生信息管理后台开发
2018/01/11 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
C有"按引用传递"吗
2016/09/06 面试题
摄影助理岗位职责
2014/02/07 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
React中的Context应用场景分析
2021/06/11 Javascript