分享一个 markdown 编辑器 - Mditor
只求极致
[ M ] arkdown + E [ ditor ] = Mditor
Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器,仅此而已...
支持浏览器: chrome/safari/firefox/ie9+
Git Repo: https://github.com/Houfeng/mditor
在线体验
在线 demo
在浏览器集成 Mditor
第一步:
引入 Mditor 样式文件
<link rel="stylesheet" href="../build/css/mditor.min.css" />
引用 Mditor 脚本文件
<script src="../build/js/mditor.min.js"></script>
第二步:
添加 textarea 元素
<textarea name="editor" id="editor">
创建 Mditor 实例
var mditor = Mditor.fromTextarea(document.getElementById('editor'));//获取或设置编辑器的值
console.log(mditor.value);
mditor.value = '** hello **';
其它 API:
//是否打开分屏
mditor.split = true; //打开
mditor.split = false; //关闭//是否打开预览
mditor.preivew = true; //打开
mditor.preivew = false; //关闭//是否全屏
mditor.fullscreen = true; //打开
mditor.fullscreen = false; //关闭 //配置工具条按钮
//mditor.toolbar.items 是一个数组,包括所有按钮的信息
//可以直接操作 items 以控制工具条//只保留第一个按钮
mditor.toolbar.items = mditor.toolbar.items.slice(0,1);//更改指定按钮配置
let btn = mditor.toolbar.items[0];
btn.icon = '...'; //设置按钮图标
btn.title = '...'; //投置按钮标题
btn.control = true; //作为控制按钮显示在右侧
btn.key = 'ctrl+d'; //设置按钮快捷建//替换按钮动作
btn.handler = function(){//自定义处理逻辑//this 指向当前 mditor 实例
}; //编辑器常用 API
//编辑器相关 AIP 在 mditor.editor 对象上//在光标前插入文本
mditor.editor.insertBeforeText('文本');
//在光标后插入文本
mditor.editor.insertAfterText('文本');
在服务器渲染 Markdown
通过 npm 安装
npm install mditor -save
在服务端解析
var mditor = require("mditor");
var parser = new mditor.Parser();
var html = parser.parse("** Hello mditor! **");
在页中展示解析后内容
...
<!--引用样式-->
<link rel="stylesheet" href="../build/css/mditor.min.css" />
...
<div class="markdown-body">
<!--这里是解析后的内容-->
</div>
-end-
分享一个 markdown 编辑器 - Mditor相关推荐
- 10分钟写一个markdown编辑器
marked.js Marked是一个Markdown解析引擎. vue.js Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vu ...
- Mac平台上的一个MarkDown编辑器和静态博客生成工具-mweb mac最新版下载
MWeb for Mac是一款Markdown + 文档管理 + 静态网页生成,集大成的 Markdown 应用.MWeb界面简洁高效.功能强大,全面支持 Github Flavored Markdo ...
- 分享一个数学公式编辑器 Mathtype 6.9 最新版 附注册码
数学公式编辑器工具可以轻松输入各种复杂的公式和符号,与Office文档完美结合,显示效果超好,比Office自带的公式编辑器要强大很多.本软件为绿色封装方式,直接点击就可以在Office里面找到OLE ...
- down mark 打钩_推荐一个Markdown数学公式编辑器——Haroopad Mathjax
要在Markdown里插入数学公式,如果没有好用的的引擎or编辑器,那么只能插入图片了,十分麻烦.这里推荐一个十分强大的数学公式引擎--Mathjax. 配置 有道云笔记目前不支持浏览MathJax公 ...
- vue-electron 写一个markdown文章编辑器(一)
缘起 以前看过一篇帖子,很多写作爱好者讨论写作时用什么markdown编辑器好,可惜当时我连markdown是何物都不知道,事后百度才明白是一种新的写作方式,语法很是简单,操作很是方便,让我这个只知道 ...
- Typora markdown公式换行等号对齐_下了31个markdown编辑器,我就不信选不出一个好用的...
markdown编辑器测评 标准 总体标准 渲染领域 编辑领域 数据管理 其他 Typora Vnote Mweb Joplin Zettlr macdown ulysses Marktext gho ...
- 下了31个markdown编辑器,我就不信选不出一个好用的
markdown编辑器测评 标准 总体标准 渲染领域 编辑领域 数据管理 其他 Typora Vnote Mweb Joplin Zettlr macdown ulysses Marktext gho ...
- Atom-无懈可击的Markdown编辑器
备战美赛期间,向岳神学习,搞了Atom玩协作开发,第一次没有自动补全的手撸了遗传算法.今天发现Atom还有写Markdown的妙用,遂拿来练手. 1. 安装Atom 下载安装Atom:https:// ...
- MWeb for Mac 3.2.0 专业级的markdown编辑器
现在大家对于 Markdown 写作工具的需求已经不只是纯文字写作这么简单,越来越多的人开始用 Markdown 来进行博客或微信公众号的写作,经常会用到图片管理,甚至表格和数学公式的编辑. 本次推荐 ...
最新文章
- Java 条件解析,Java Lambda使用条件检查解析集合
- python 递归 分叉_浅谈Python 递归算法指归
- Document 对象描述
- python 列表生成式_python 列表生成式 List Comprehensions
- Up or out!!!
- Fragment结合ViewPager之懒加载
- iOS开发那些事--创建基于故事板的iOS 6的HelloWorld
- c++ maps使用
- 使用sql语句向SDO_Geometry插入要素
- pytorch 对特征进行mean_Pytorch的mean和std调查实例
- rost反剽窃检测系统_Docker容器环境检测方法【代码】
- Linux之父炮轰 “全球最大同性恋网站” GitHub:Merge制造了毫无用处的垃圾信息!...
- CSS+html制作简历表
- SATA接口Raid、AHCI、IDE三种模式
- 显示计算机无法检测到扫描仪,为何我的电脑检测不到我的扫描仪?
- hget如何获取多个value_Redis(五):hash/hset/hget 命令源码解析
- Vue2.0源码解析 - 知其然知其所以然之Vue.use
- openCV之waitKey函数简介
- topcoder入门
- 修改变量名,简单有效地提高代码质量!
热门文章
- 加载vue文件步骤_无法在重新加载时读取vue文件
- java servlet 多线程_Servlet的多线程和线程安全
- mysql删除原则_MySQL数据库的增删选查
- 抛出一个nullpointerexception_Java 14 发布了,再也不怕 NullPointerException 了!
- Error:java: 错误: 不支持发行版本 14
- lisp语言cond和if套用_在'if'语句中设置多行条件的样式?
- python数据分析基础 余本国_Python数据分析基础
- vue写一个通用的toast弹窗 toast 弹窗 提示
- ava.lang.UnsatisfiedLinkError:
- a different object with the same identifier value was already associated with the session