官方地址 https://bh-lay.github.io/mditor/

##使用方法

#1.页面添加dom

```javascript

<textarea id="md_editor">……</textarea>

```

#2.引入js文件或者Npm安装后require

```javascript

<script type="text/javascript" src="src/jquery.js"></script>
<script type="text/javascript" src="src/mditor.js"></script>
<script type="text/javascript">
//获取textarea dom对象
var ele_textarea = document.getElementById('md_editor');
//实例化Mditor
var editor = new mditor(ele_textarea);
</script>

```

#3.高级操作

  • 实例化midtor时,可以传入自定义参数

  ```javascript

  var editor = new mditor(document.getElementById('md_editor'),{

  //自定义显示class

  previewclass:'md_test'

})

```

  • 通过js操作实例化后的midtor

  //获取html

  ```javascript

  editor.getHtml()

  ```

  //获取markdown

```javascript

  editor.getContent()

```

  //插入内容

```javascript

  editor.inset('插入inner');

```

  //进入预览

```javascript

  editor.preview();

```

  //返回编辑界面

```javascript

  editor.edit();

```

markdown在线编辑插件mditor的更多相关文章

  1. Markdown在线编辑及预览

    推荐一款不错的Markdown语法手册,最可贵的是支持在线编辑预览: Cmd Markdown简介 Cmd Markdown语法手册及在线编辑 补充一些使用技巧: MarkDown实现段首缩进:「Ma ...

  2. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  3. Markdown For EditPlus插件发布(基于EditPlus快速编辑Markdonw文件,写作爱好的福音来啦)

    详细介绍: Markdown For EditPlus插件使用说明 开发缘由 特点好处: 中文版使用说明 相关命令(输入字符敲空格自动输出): EditPlus常用快捷键: 相关教程: English ...

  4. Markdown For EditPlus插件使用说明(基于EditPlus快速编辑Markdonw文件,写作爱好者的福音来啦)

    Markdown For EditPlus插件使用说明 开发缘由 特点好处: 中文版使用说明 相关命令(输入字符敲空格自动输出): EditPlus常用快捷键: 相关教程: English descr ...

  5. WordPress 前端投稿/编辑插件 DJD Site Post(支持游客和已注册用户)

    转自:http://www.wpdaxue.com/front-end-publishing.html 说到前端用户投稿,倡萌之前推荐过3个不错的插件: WordPress匿名投稿插件:DX-Cont ...

  6. 如何配置使用HTML在线编辑工具

    如何配置使用HTML在线编辑工具 为了更好的.统一的编写统一简单易用的博客,决定采用TinyMCE工具.首先下载TinyMCE4.0包.文件目录如下: 其中, Plugins是插件目录,包括各种插件 ...

  7. 【02】markdown在线编辑器

    [01]在线编辑器 https://www.zybuluo.com/mdeditor 在线 Markdown 编辑阅读器 pen - 是一个Markdown编辑器工具.demo 你可以试试这个在线的m ...

  8. handsontable在线编辑excel扩展功能-踩坑篇

    简述 先说一下背景,之所以封装handsontable插件,是因为公司要实现在线编辑导入excel文件的功能,然后我就找到了这个功能强大的插件handsontable. 具体功能 除了handsont ...

  9. 【开发者portal在线开发插件系列五】命令的响应,即命令结果的上报(mid的使用)

    基础篇 [开发者portal在线开发插件系列一]profile和基本上下行消息 [开发者portal在线开发插件系列二]多条上下行消息(messageId的使用) 基础场景见上面两个帖子,这里单独介绍 ...

随机推荐

  1. qt手写输入法资料

    论文: https://max.book118.com/html/2015/1229/32204490.shtm 开源库: zinna Linux下使用的Tegaki就是使用的这个库 csdn博客资料 ...

  2. JavaScript--鼠标滚动改变图片大小

    鼠标滚动改变图片的大小: 原理:当鼠标滚动时改变了zoom的值: <!DOCTYPE HTML> <html> <head> <title>通过鼠标滚轮 ...

  3. springboot整合redis(简单整理)

    Redis安装与开启 我这里是在windows上练习,所以这里的安装是指在windows上的安装,操作非常简单,点击https://github.com/MicrosoftArchive/redis/ ...

  4. PHP共享内存yac操作类

    http://www.laruence.com/2013/03/18/2846.html   鸟哥介绍 https://www.cnblogs.com/willamwang/p/8918377.htm ...

  5. Hadoop-Impala学习笔记之管理

    配置参数管理 待补充... 资源分配管理(Admission Control) Impala有资源池的概念,允许某些查询在特定的资源池执行,不过在白天不跑批/晚上不跑adhoc的DSS系统中,该机制并 ...

  6. Spring发送邮件

    Spring邮件发送流程:第一步:邮件发送,需要一个邮件服务器.可以使用腾讯获得网易的邮件服务器.登录邮箱,点击左上角的设置,再点击账号 找到下列选项,点击开启,需要发短信验证,或者使用QQ安全登录扫 ...

  7. 算法(第四版)C# 习题题解——2.4

    写在前面 整个项目都托管在了 Github 上:https://github.com/ikesnowy/Algorithms-4th-Edition-in-Csharp 查找更方便的版本见:https ...

  8. Windows环境下利用anaconda3安装python版本的Xgboost

    网上有各种不同安装Xgboost的教程,但是有些教程对于一个新手来说,照着做安装成功是很困难的.本人也是新手,第一次安装Xgboost的时候,照着某个教程做,结果总是安装不上,甚至想到要放弃.后来经一 ...

  9. Pycharm在运行过程中,查看每个变量的方法(show variables)跟终端一样显示变量

    点击运行栏的这个灰色向下剪头: 在出现的窗口上,勾选上: 点击OK,重启Pycharm:接着点击Run窗口: 将Run的show variables图标勾选: 然后你就会发现,在右边出现了变量的窗口:

  10. gulp自动化构建工具的使用

    gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A. ...