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 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 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 和 XML: 使用expat函数(一)
2006/10/09 PHP
用PHP写的MySQL数据库用户认证系统代码
2007/03/22 PHP
destoon数据库表说明汇总
2014/07/15 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
设定php简写功能的方法
2019/11/28 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
Python基础入门之seed()方法的使用
2015/05/15 Python
Django中的用户身份验证示例详解
2019/08/07 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
佳能德国网上商店:Canon德国
2017/03/18 全球购物
电钳专业个人求职信
2014/01/04 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
春风行动实施方案
2014/03/28 职场文书
产品销售计划书
2014/05/04 职场文书
加薪通知
2015/04/25 职场文书
2016年清明节寄语
2015/12/04 职场文书
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
Java 定时任务技术趋势简介
2022/05/04 Java/Android
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技