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 = '![](' + fileUrl + ')'          } 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
标签: 无

请先后发表评论
  • 最新评论
  • 总共0条评论