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;
}