Mditor 更新啦！

Hegel_Gu 發布于2019-08-20 14:46 / 2309人閱讀

摘要：只求極致是一個簡潔易于集成方便擴展期望舒服的編寫的編輯器，僅此而已支持瀏覽器在線體驗在線在瀏覽器集成第一步引入樣式文件引用腳本文件當然，也可以使用資源第二步添加元素創建實例獲取或設置編輯器的值所有都應在事件中進行調用模式控制是否打開分屏

只求極致

[ 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-

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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