推荐几款好用的富文本编辑器
- 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