Mditor 更新啦！

Hegel_Gu 发布于2019-08-20 14:46 / 2386人阅读

摘要：只求极致是一个简洁易于集成方便扩展期望舒服的编写的编辑器，仅此而已支持浏览器在线体验在线在浏览器集成第一步引入样式文件引用脚本文件当然，也可以使用资源第二步添加元素创建实例获取或设置编辑器的值所有都应在事件中进行调用模式控制是否打开分屏

只求极致

[ M ] arkdown + E [ ditor ] = Mditor

Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器，仅此而已...

支持浏览器: chrome/safari/firefox/ie9+

Git Reop: https://github.com/Houfeng/md...

在线体验

在线 demo

在浏览器集成 Mditor

第一步:

引入 Mditor 样式文件

</>复制代码

引用 Mditor 脚本文件

</>复制代码

当然，也可以使用 CDN 资源

</>复制代码 
...
...
...

第二步:

添加 textarea 元素

</>复制代码

创建 Mditor 实例

</>复制代码 
var mditor =  Mditor.fromTextarea(document.getElementById("editor"));
//获取或设置编辑器的值
mditor.on("ready",function(){
  console.log(mditor.value);
  mditor.value = "** hello **";    
});

所有 API 都应在 ready 事件中进行调用

模式控制 API:

</>复制代码 
//是否打开分屏            
mditor.split = true;    //打开
mditor.split = false;    //关闭
//是否打开预览            
mditor.preivew = true;    //打开
mditor.preivew = false;    //关闭
//是否全屏            
mditor.fullscreen = true;        //打开    
mditor.fullscreen = false;    //关闭

工具条配置 API

</>复制代码 
//mditor.toolbar.items 是一个数组，包括所有按钮的信息
//可以直接操作 items 以控制工具条
//只保留第一个按钮
mditor.toolbar.items = mditor.toolbar.items.slice(0,1);
//添加一个按钮
mditor.toolbar.addItem({...});
//移除一个按钮
mditor.toolbar.removeItem(name);
//替换一个按钮
mditor.toolbar.replaceItem(name, {...});
//获取一个按钮
mditor.toolbar.getItem(name);
//更改按钮行为
//示例，更改「图片」按钮配置，其它按钮是同样的方法
let btn = mditor.toolbar.getItem("image");
//替换按钮动作
btn.handler = function(){
  //自定义处理逻辑
  //this 指向当前 mditor 实例
}; 
//还可以替换其它信息
btn.icon = "...";   //设置按钮图标
btn.title = "...";  //投置按钮标题
btn.control = true; //作为控制按钮显示在右侧
btn.key = "ctrl+d"; //设置按钮快捷建

文本编辑 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! **");

在页面中展示解析后的内容

</>复制代码 
...
...

-end-

GPU云服务器云服务器 Mditor 加速啦表白啦谢谢各位啦

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81903.html

React 16 发布啦。。渣渣看了一下更新文档~

摘要：又双叒更新啦这次是，其实在前段时间就知道最近要发布了。协议更新了。。。这样做是为了阻止损坏数据的显示。协议的协议已经是协议了，当然，也把已经发布的页改成协议了。 React 又双叒更新啦~ 这次是React v16.0，其实在前段时间就知道最近要发布了。协议更新了。。。来看看其他的变化吧。自己看着玩的。。期待官方中文文档的更新。。原文地址：React v16.0 我们很高兴地宣布发...

xi4oh4o 2019-08-21 16:47 评论0 收藏0
又拍云再放大招——CDN 同时支持 HTTP/2 和 SPDY/3.1 协议啦！

又快到节假日啦，端午节可以安静的在家当个收、快、递的小公举（宅就宅），小拍乐上心头，打开了一些经常登录的网站：淘宝，京东，百度，又拍云……忽然发现，除了京东没有全站使用 HTTPS（当然人家的登录页面还是使用了）外，其他的几家都全站使用了 HTTPS 协议。看到互联网安全的进一步提高，小拍甚感欣慰，不禁想来八一八咱们刚更新的新功能——关于又拍云 CDN 全面支持 HTTP/2 协议。要说 HTT...

Yi_Zhi_Yu 2019-06-21 16:08 评论0 收藏0
DOM元素动态监听

摘要：今天遇到一个一直认为很简单的问题，真正接手后才知道这么可怕大体是这样的，默认动态加载的应该是自动向下，当遇到页面最下面应该自动向上渲染。动态生成的都是根据来监听获取元素的信息。今天遇到一个一直认为很简单的问题，真正接手后才知道这么可怕大体是这样的，默认动态加载的card应该是自动向下，当card遇到页面最下面应该自动向上渲染。showImg(https://segmentfault...

wh469012917 2019-08-02 14:04 评论0 收藏0
DOM元素动态监听

摘要：今天遇到一个一直认为很简单的问题，真正接手后才知道这么可怕大体是这样的，默认动态加载的应该是自动向下，当遇到页面最下面应该自动向上渲染。动态生成的都是根据来监听获取元素的信息。今天遇到一个一直认为很简单的问题，真正接手后才知道这么可怕大体是这样的，默认动态加载的card应该是自动向下，当card遇到页面最下面应该自动向上渲染。showImg(https://segmentfault...

codercao 2019-08-23 14:34 评论0 收藏0