vue集成editor.md
editor.md：一款markdown编辑器，个人这么理解的，看起来很高大尚
官网地址：https://pandao.github.io/editor.md/
坑爹的是在vue里面不能直接使用，需要自己封装
markdown一般需要两个东西，编辑和预览，分享一个我自己基于editor.md封装的组件，用的是vue3
录屏就没有了，动图的话太大上传不了
源码地址
-
编辑
https://gitee.com/qiudw/platform/tree/master/platform-admin-web/src/main/front-end/src/components/EditorMarkdown -
预览
https://gitee.com/qiudw/platform/tree/master/platform-admin-web/src/main/front-end/src/components/EditormdPreview
这里需要安装scriptjs
npm install scriptjs --save
编辑组件
这里需要注意：我踩过的坑
-
editor对象
this.editor = editor，data里面保存后，其他方法里面this.editor不是editormd('', options)创建的那个，所以setValue(), setMarkdown()方法都用不了 -
全屏压盖
z-index层级问题，我这里的解决方法是监听editor的全屏和退出全屏事件，js修改z-index样式 -
更新反馈
监听editor的change事件，将值反馈给父组件，父组件通过v-model绑定值，这里修改父组件的值是不是更新到子组件额 -
初始化延迟
更新的时候，一般都是异步加载，由于editor只初始化一次的问题，所以这里设置延迟初始化
调用
预览组件
调用
图片上传
这里需要重写上传，这里上传是不带token的，所以需要加到白名单里面去，要求携带token的话需要自己实现
image-dialog.js，这是从网上找的，可以用
/*!
* Image (upload) dialog plugin for Editor.md
*
* @file image-dialog.js
* @author pandao
* @version 1.3.4
* @updateTime 2015-06-09
* {@link https://github.com/pandao/editor.md}
* @license MIT
*/
(function() {
var factory = function (exports) {
var pluginName = "image-dialog";
exports.fn.imageDialog = function () {
var _this = this;
var cm = this.cm;
var lang = this.lang;
var editor = this.editor;
var settings = this.settings;
var cursor = cm.getCursor();
var selection = cm.getSelection();
var imageLang = lang.dialog.image;
var classPrefix = this.classPrefix;
var iframeName = classPrefix + "image-iframe";
var dialogName = classPrefix + pluginName, dialog;
cm.focus();
var loading = function (show) {
var _loading = dialog.find("." + classPrefix + "dialog-mask");
_loading[(show) ? "show" : "hide"]();
};
if (editor.find("." + dialogName).length < 1) {
var guid = (new Date).getTime();
var action = settings.imageUploadURL + (settings.imageUploadURL.indexOf("?") >= 0 ? "&" : "?") + "guid=" + guid;
if (settings.crossDomainUpload) {
action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-image-dialog-" + guid;
}
//注释的是官方的写法
// var dialogContent = ( (settings.imageUpload) ? "服务端接收与返回值
/**
* 文件上传
* @param multipartFile 上传的文件对象
* @return editormd格式的结果
*/
@PostMapping(value = "/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public JSONObject upload(@RequestParam(value = "editormd-image-file") MultipartFile multipartFile) {
System.out.println(multipartFile.getOriginalFilename());
Calendar calendar = Calendar.getInstance();
String path = "/" + calendar.get(Calendar.YEAR) + "/" + (calendar.get(Calendar.MONTH) + 1) + "/" + calendar.get(Calendar.DAY_OF_MONTH);
// 上传结果
ResultDto upload = fileRemoteService.upload(path, multipartFile, true);
JSONObject jsonObject = new JSONObject();
jsonObject.put("success", "1");
jsonObject.put("message", "上传成功");
jsonObject.put("url", "/file" + upload.getData());
return jsonObject;
}
ctrl + v图片上传
image-handle-paste.js
编辑，需要在初始化的时候注册插件