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 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 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代码
2010/07/17 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
php+mysql实现无限级分类
2015/11/11 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
VBScript版代码高亮
2006/06/26 Javascript
用JavaScript调用WebService的示例
2008/04/07 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
JavaScript实现动态留言板
2020/03/16 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
wxPython窗口的继承机制实例分析
2014/09/28 Python
以一段代码为实例快速入门Python2.7
2015/03/31 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
python动态网页批量爬取
2016/02/14 Python
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
综合素质评价思想道德自我评价
2015/03/09 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
大学生活感想
2015/08/10 职场文书
教师病假条范文
2015/08/17 职场文书
vue实现列表垂直无缝滚动
2022/04/08 Vue.js
Hive导入csv文件示例
2022/06/25 数据库
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android