VUE 使用 editor.md （一）_HUANG的专栏-CSDN博客 - 删减版
1、下载editor.md
http://pandao.github.io/editor.md/
2、解压后，放入工程目录的static目录中
3、安装scriptjs
cnpm install --save scriptjs
4、编写组件
<template> <div class="markdown-editor-box"> <link rel="stylesheet" href="/static/editor.md/css/editormd.min.css"> <div :id="editorId"></div> </div></template><script> import scriptjs from 'scriptjs' import { defaultConfig } from '../../config/editor.md' export default { props: { editorId: { 'type': String, 'default': 'markdown-editor' }, onchange: { // 内容改变时回调，返回（html, markdown, text） type: Function }, config: { // 编辑器配置 type: Object }, initData: { 'type': String }, initDataDelay: { 'type': Number, // 延迟初始化数据时间，单位毫秒 'default': 0 } }, data: function () { return { editor: null, timer: null, doc: {}, jsLoadOver: false } }, methods: { fetchScript: function (url) { return new Promise((resolve) => { scriptjs(url, () => { resolve() }) }) }, getConfig: function () { return { ...defaultConfig, ...this.config } }, getEditor: function () { return this.editor }, getDoc: function () { return this.doc }, watch: function () { return this.editor.watch() }, unwatch: function () { return this.editor.unwatch() }, previewing: function () { return this.editor.previewing() }, getHTML: function () { return this.editor.getHTML() }, getMarkdown: function () { return this.editor.getMarkdown() }, setMarkdown: function (markdown) { return this.editor.setMarkdown(markdown) }, init (id) { let vm = this let editor = vm.$store.state.editor if (editor.goEdit) { editor.goEdit = false } else { editor.isEditing = false } vm.axios.get('/interfaceApi/getDocById/' + id) .then(function (response) { let doc = response.data.pageInfo.list[0] vm.doc = doc let md = doc.content vm.initEditor(md) }) .catch(function (error) { vm.$message({ message: error.data.serverResult.resultMessage, type: 'error' }) }) }, initEditor: function (markdown) { let vm = this let config = vm.getConfig() if (markdown) { config.markdown = markdown } (async () => { await vm.fetchScript('/static/editor.md/jquery.min.js') await vm.fetchScript('/static/editor.md/editormd.min.js') vm.jsLoadOver = true vm.$nextTick(() => { vm.editor = window.editormd(vm.editorId, config) vm.editor.on('load', () => { setTimeout(() => { // hack bug: 一个页面多个编辑器只能初始化其中一个数据问题 vm.initData && vm.editor.setMarkdown(vm.initData) }, vm.initDataDelay) }) vm.onchange && vm.editor.on('change', () => { let html = vm.editor.getPreviewedHTML() vm.onchange({ markdown: vm.editor.getMarkdown(), html: html, text: window.$(html).text() }) }) }) })() } }, mounted: function () { let vm = this let docId = vm.$router.currentRoute.name vm.init(docId) vm.timer = setInterval(function () { if (vm.editor && vm.jsLoadOver) { try { vm.watch() vm.previewing() vm.previewing() window.clearInterval(vm.timer) vm.timer = null } catch (e) { } } }, 80) }, destroyed: function () { let vm = this if (vm.timer != null) { window.clearInterval(vm.timer) vm.timer = null } } }</script>5、编写配置文件
const defaultConfig = { width: "100%", height: 600, path: '/static/editor.md/lib/', // theme: 'dark', // previewTheme: 'dark', // editorTheme: 'pastel-on-dark', markdown: '', // 默认填充内容 lineWrapping: true, // 编辑框不换行 codeFold: true, // 代码折叠 placeholder: '请输入...', syncScrolling: true, saveHTMLToTextarea: true, // 保存 HTML 到 Textarea searchReplace: true, watch: true, // 实时预览 htmlDecode: "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启 toolbar: true, //工具栏 previewCodeHighlight: true, // 预览 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: false, // imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], // imageUploadURL: "./php/upload.php", // onload: function() { // // this.fullscreen(); // // this.unwatch(); // // this.watch().fullscreen(); // // this.setMarkdown("#PHP"); // // this.width("100%"); // // this.height(480); // // this.resize("100%", 640); // },};export { defaultConfig,};6、 在页面中使用
<tw-markdown-view v-if="!editor.isEditing" ref="markdownView"></tw-markdown-view>7、在具体页面中调用组件中的方法
watchHtml: function () { this.$refs['markdown'].watch() }, unWatchHtml: function () { this.$refs['markdown'].unwatch() },8、编辑工具栏配置，在第五步的配置文件的 defaultConfig 内部，找个地方加上下面这段，return后面的数组就是需要使用的工具栏按钮，上面注掉的是从githup上面，千辛万苦从一个问题解答中找到的全部的工具栏按钮列表。
toolbarIcons : function() { //["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|", "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|", "help", "info"] return ["bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "hr", "code", "preformatted-text", "code-block", "table", "pagebreak", "|", "goto-line", "preview", "clear"] },总结：
a、感觉这个工具很不错，编辑栏提供的工具挺多的，还算不错吧。
b、最开始没有写预览组件，预览时通过调用编辑界面的全窗口预览html方法，然后隐藏掉那个closed按钮来解决的。后面已经加上了预览组件，请看本系列第二篇文章。
c、我实际运用的时候没有使用这个工具的文件上传功能，一是因为网上文档都语焉不详，二是感觉editor.md对文件接口返回的属性名称貌似还有点限制？不符合我们已经存在的文件接口定义，所以最后是自己在页面上加了个文件上传按钮实现的。上传后用过js代码处理在编辑器中进行展示。
// 上传成功 uploadSuccess: function (rep) { if (rep.fileInfos != null && rep.fileInfos.length > 0) { let vm = this let filePath = rep.fileInfos[0].localPath if (filePath) { let fileUrl = vm.$store.state.fileServiceUrl + filePath let mdUrl = null let markdown = vm.$refs['markdown'] if (vm.isImage(filePath)) { mdUrl = '' } else { mdUrl = fileUrl } let newMd = markdown.getMarkdown() + '\n' + mdUrl markdown.setMarkdown(newMd) markdown.watch() } } },代码参考来源：http://www.lwl.tech/post/3 ，我这里对原作者的代码做了些修改删减，非常感谢该作者提供的示例。
原网址: 访问
创建于: 2021-06-20 14:52:43
目录: default
标签: 无
未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到
最新评论