editor.md使用以及图片复制粘贴
editor.md使用教程
1.1 下载官方资源
1.2 查看实例代码
初始化加载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>
这样就可以生成基本的markdown编辑器了
1.3 打开example中full.html查看全部功能配置
<script type="text/javascript">
var testEditor;
$(function() {
$.get('test.md', function(md){
testEditor = editormd("test-editormd", {
width: "90%",
height: 740,
//资源库lib的路径
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",
onl oad : 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);
});
$("#show-btn").bind('click', function(){
testEditor.show();
});
$("#hide-btn").bind('click', function(){
testEditor.hide();
});
$("#get-md-btn").bind('click', function(){
alert(testEditor.getMarkdown());
});
$("#get-html-btn").bind('click', function() {
alert(testEditor.getHTML());
});
$("#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>
1.4 开启图片上传并且实现拖拽剪切复制粘贴上传图片
1.4.1 编写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('image', file, fileName);
$.ajax({
//配置图片上传的接口路径
url: Editor.settings.imageUploadURL,
type: 'post',
data: formData,
processData: false,
contentType: false,
dataType: 'json',
success: function (msg) {
var code=msg['code'];
if(code==200){
var url=msg["data"];
if(/\.(png|jpg|jpeg|gif|bmp|ico)$/.test(url)){
Editor.insertValue("![图片alt]("+url+" ''图片title'')");
}else{
Editor.insertValue("[下载附件]("+url+")");
}
}else{
console.log(msg);
alert("上传失败");
}
},
error: function () {
console.log('请求失败');
}
});
}
1.4.2 使用方法
- 对应页面引入uploadImg.js
<!--uploadImg.js-->
<script type="text/javascript" th:src="@{/js/uploadImg.js}"></script>
- 开启图片上传配置,onload事件里面初始化插件
//初始化Markdown编辑器
var contentEditor;
$(function() {
contentEditor = editormd("md-content", {
width : "100%",
height : 640,
syncScrolling : "single",
path : "/lib/editormd/lib/",
imageUpload : true,//必须
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "http://localhost:8080/upload",//图片上传后端接口
onl oad : function() {
//支持复制，粘贴，拖拽上传文件。
initPasteDragImg(this);//必须
}
});
});
- 数据返回格式