推薦幾款好用的富文本編輯器
- wangEditor --基於js和css開發，簡單易用容易開發。官網地址
![在這裏插入圖片描述]()
- TinyMCE --TinyMCE是一個輕量級的基於瀏覽器的所見即所得編輯器，由JavaScript寫成。它對IE6+和Firefox1.5+都有着非常良好的支持。官網教程內容比較豐富，插件支持也比較多，但是不支持markdown。
![3. 在這裏插入圖片描述![]()
- editor.nd 功能齊全，支持markdown編輯，開源免費，但是官方文檔介紹非常的少。本文將着重介紹該富文本編輯器的使用。
editor.md 使用教程
1、下載官方資源庫
- 下載鏈接
![在這裏插入圖片描述]()
- 雖然官方的介紹有限，但是資源庫裏面還是有實例可以認真看看的。裏面有官網的示例代碼
- 初始化加載js文件和css樣式文件
<link rel="stylesheet" href="editormd/css/editormd.css" />
<div id="test-editor">
<textarea style="display:none;">
</textarea>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>
<script type="text/javascript">
$(function() {
<!-- test-editor 即是需要初始化富文本編輯器對應的div id -->
var editor = editormd("test-editor", {
//path -資源庫lib的路徑
path : "editormd/lib/"
});
});
</script>
這樣就可以生成基本的富文本編輯器了
4. 打開example中full.html 我們可以看到全部功能的配置
<script type="text/javascript">
var testEditor;
$(function() {
$.get('test.md', function(md){
testEditor = editormd("test-editormd", {
width: "90%",
height: 740,
path : '../lib/',
theme : "dark",//主題 夜間模式
previewTheme : "dark", //主題 夜間模式
editorTheme : "pastel-on-dark",//主題 夜間模式
markdown : md,
codeFold : true,
//syncScrolling : false,
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
searchReplace : true,
//watch : false, // 關閉實時預覽
htmlDecode : "style,script,iframe|on*", // 開啓 HTML 標籤解析，爲了安全性，默認不開啓
//toolbar : false, //關閉工具欄
//previewCodeHighlight : false, // 關閉預覽 HTML 的代碼塊高亮，默認開啓
emoji : true,//表情
taskList : true,//代辦
tocm : true, // Using [TOCM]
tex : true, // 開啓科學公式TeX語言支持，默認關閉
flowChart : true, // 開啓流程圖支持，默認關閉
sequenceDiagram : true, // 開啓時序/序列圖支持，默認關閉,
//dialogLockScreen : false, // 設置彈出層對話框不鎖屏，全局通用，默認爲true
//dialogShowMask : false, // 設置彈出層對話框顯示透明遮罩層，全局通用，默認爲true
//dialogDraggable : false, // 設置彈出層對話框不可拖動，全局通用，默認爲true
//dialogMaskOpacity : 0.4, // 設置透明遮罩層的透明度，全局通用，默認值爲0.1
//dialogMaskBgColor : "#000", // 設置透明遮罩層的背景顏色，全局通用，默認爲#fff
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "./php/upload.php",
onload : function() {
console.log('onload', this);
//this.fullscreen();
//this.unwatch();
//this.watch().fullscreen();
//this.setMarkdown("#PHP");
//this.width("100%");
//this.height(480);
//this.resize("100%", 640);
}
});
});
$("#goto-line-btn").bind("click", function(){
testEditor.gotoLine(90); //跳轉到90行
});
$("#show-btn").bind('click', function(){
testEditor.show();//顯示富文本編輯器
});
$("#hide-btn").bind('click', function(){
testEditor.hide();//隱藏編輯器
});
$("#get-md-btn").bind('click', function(){
alert(testEditor.getMarkdown());//*獲取markdown
});
$("#get-html-btn").bind('click', function() {
alert(testEditor.getHTML());//獲取生成的HTML
});
$("#watch-btn").bind('click', function() {
testEditor.watch();
});
$("#unwatch-btn").bind('click', function() {
testEditor.unwatch(); //關閉預覽
});
$("#preview-btn").bind('click', function() {
testEditor.previewing();//打開預覽
});
$("#fullscreen-btn").bind('click', function() {
testEditor.fullscreen();//全屏操作
});
$("#show-toolbar-btn").bind('click', function() {
testEditor.showToolbar();//顯示工具欄
});
$("#close-toolbar-btn").bind('click', function() {
testEditor.hideToolbar();//關閉工具欄
});
$("#toc-menu-btn").click(function(){
//配置生成目錄
testEditor.config({
tocDropdown : true,
tocTitle : "目錄 Table of Contents",
});
});
$("#toc-default-btn").click(function() {
//關閉生成目錄功能
testEditor.config("tocDropdown", false);
});
});
</script>
介紹幾個比較好用的
- 生成目錄,tocDropdown設置成true，在編輯器使用 [TOC] 即可生成目錄
$(function() {
testEditor = editormd({
id : "test-editormd",
width : "90%",
height : 640,
path : "lib/",
flowChart : true, // 開啓流程圖支持，默認關閉
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
searchReplace : true,
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "./php/upload.php",
onload : function() {
console.log('onload', this);
//加載完成後 配置生成目錄
testEditor.config("tocDropdown", true);
}
});
});
如果是設置tocTitle,則將會生成目錄菜單，效果圖如下
onload : function() {
console.log('onload', this);
//加載完成後 配置生成目錄
testEditor.config({
tocDropdown : true,
tocTitle : "目錄 Table of Contents",
});
}
- 通過markdown前端顯示文本內容
- 添加css樣式和js文件（這裏的js與前面在後臺編輯器引用lib方式不同）
<script src="js/jquery.min.js"></script>
<script src="../lib/marked.min.js"></script>
<script src="../lib/prettify.min.js"></script>
<script src="../lib/raphael.min.js"></script>
<script src="../lib/underscore.min.js"></script>
<script src="../lib/sequence-diagram.min.js"></script>
<script src="../lib/flowchart.min.js"></script>
<script src="../lib/jquery.flowchart.min.js"></script>
<script src="../editormd.js"></script>
<!-- blog content -->
<div id="editmd" class="post-content" >
<!-- textarea 加載testEditor.getMarkdown()的內容 -->
<textarea style="display:none;" name="test-editormd-markdown-doc"></textarea>
</div>
<script type="text/javascript">
//editor 初始化
$(function(){
var Editor;
//markdownToHTML 將markdown文本轉換爲HTML
Editor = editormd.markdownToHTML("editmd", {
htmlDecode : "style,script,iframe", // you can filter tags decode
markdown : markdown ,//+ "\r\n" + $("#append-test").text(),
//htmlDecode : true, // 開啓 HTML 標籤解析，爲了安全性，默認不開啓
htmlDecode : "style,script,iframe", // you can filter tags decode
//toc : false,
tocm : true, // Using [TOCM]
//tocContainer : "#custom-toc-container", // 自定義 ToC 容器層
//gfm : false,
//tocDropdown : true,
// markdownSourceCode : true, // 是否保留 Markdown 源碼，即是否刪除保存源碼的 Textarea 標籤
emoji : true,
taskList : true,
tocm : true, //對目錄解析
tex : true, // 默認不解析
flowChart : true, // 默認不解析
sequenceDiagram : true, // 默認不解析
});
});
</script>
- 顯示效果：
![在這裏插入圖片描述]()
- 圖片上傳功能,imageUploadURL 上傳圖片接口，imageFormats 格式限定，imageUpload : true開啓圖片上傳功能，主要返回的數據需要遵循規定的格式。
$(function() {
var testEditor = editormd("test-editormd", {
width: "90%",
height: 640,
markdown : "",
path : '../lib/',
//dialogLockScreen : false, // 設置彈出層對話框不鎖屏，全局通用，默認爲 true
//dialogShowMask : false, // 設置彈出層對話框顯示透明遮罩層，全局通用，默認爲 true
//dialogDraggable : false, // 設置彈出層對話框不可拖動，全局通用，默認爲 true
//dialogMaskOpacity : 0.4, // 設置透明遮罩層的透明度，全局通用，默認值爲 0.1
//dialogMaskBgColor : "#000", // 設置透明遮罩層的背景顏色，全局通用，默認爲 #fff
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "./php/upload.php?test=dfdf",
/*
上傳的後臺只需要返回一個 JSON 數據，結構如下：
{
success : 0 | 1, // 0 表示上傳失敗，1 表示上傳成功
message : "提示的信息，上傳成功或上傳失敗及錯誤信息等。",
url : "圖片地址" // 上傳成功時才返回
}
*/
});
});
- 複製粘貼上傳圖片功能，本功能編輯器沒有自帶，但是我們可以通過插件方式進行優化。
原文地址: [作者地址]（https://rumenz.com/rumenbiji/editor-md-drag-upload-file.html）
因爲接口原因我做了一些修改，有需要的可以參考原作者的代碼
- 數據返回格式
![在這裏插入圖片描述]()
新建文件：uploadImg.js
function initPasteDragImg(Editor){
var doc = document.getElementById(Editor.id)
doc.addEventListener('paste', function (event) {
var items = (event.clipboardData || window.clipboardData).items;
var file = null;
if (items && items.length) {
// 搜索剪切板items
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
} else {
console.log("當前瀏覽器不支持");
return;
}
if (!file) {
console.log("粘貼內容非圖片");
return;
}
uploadImg(file,Editor);
});
var dashboard = document.getElementById(Editor.id)
dashboard.addEventListener("dragover", function (e) {
e.preventDefault()
e.stopPropagation()
})
dashboard.addEventListener("dragenter", function (e) {
e.preventDefault()
e.stopPropagation()
})
dashboard.addEventListener("drop", function (e) {
e.preventDefault()
e.stopPropagation()
var files = this.files || e.dataTransfer.files;
uploadImg(files[0],Editor);
})
}
function uploadImg(file,Editor){
var formData = new FormData();
var fileName=new Date().getTime()+"."+file.name.split(".").pop();
formData.append('file', file,file.name);
$.ajax({
"type": 'POST',
"url": Editor.settings.imageUploadURL,//獲取我們配置的url
"data": formData,
"dateType": "json",
"processData": false,
"contentType": false,
"mimeType": "multipart/form-data",
success: function(ret){
var json = $.parseJSON(ret);
if(json.success){
var url = json.body;
var type = json.type;
if(/(png|jpg|jpeg|gif|bmp|ico|image)/.test(type)){
Editor.insertValue("![圖片alt]("+url+" ''圖片title'')");
}else{
Editor.insertValue("[下載附件]("+url+")");
}
}else{
alert("上傳失敗");
}
},
error: function (err){
console.log('請求失敗')
}
});
}
效果圖：
本地圖片上傳
請參考博客：http://www.stopping.top/u/Blog/9
總結
對於個人博客而言，editormd是一款非常合適的選擇，功能齊全，加之markdown編輯方式，以及圖片複製粘貼上傳容易實現。
#end