Toast UI Editor 封装成组件和实现图片上传

Toast UI Editor介绍

• 一款支持Markdown、WYSIWYG模式的编辑器
• github

1. 安装

代码高亮插件 - 看这里
编辑文本颜色插件 - 看这里

// 下载 Toast UI Editor
npm install @toast-ui/editor
// 下载 编辑文本颜色插件
npm install @toast-ui/editor-plugin-color-syntax
// 下载 代码高亮插件
npm install @toast-ui/editor-plugin-code-syntax-highlight

2. 封装组件

<template>
    <div :id="id"></div>
</template>

<script>
import '@toast-ui/editor/dist/toastui-editor.css';
// 工具栏显示中文
import '@toast-ui/editor/dist/i18n/zh-cn.js';

import Editor from '@toast-ui/editor';
// Toast UI Editor 配置文件
import defaultOptions from './default-options.js';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
import colorSyntax from '@toast-ui/editor-plugin-color-syntax';

export default {
    name: "MarkdownEditor",
    props: {
        value: {
            type: String,
            default: ''
        },
        id: {
            type: String,
            required: false,
            default(){
                return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '');
            }
        },
        options: {
            type: Object,
            default(){
                return defaultOptions;
            }
        },
        mode: {
            type: String,
            default: 'markdown',
        },
        height: {
            type: String,
            required: false,
            default: '300px',
        },
        language: {
            type: String,
            required: false,
            default: 'zh-CN',
        }
    },
    data(){
        return {
            editor: null,
        }
    },
    computed: {
        editorOptions(){
            const _options = Object.assign({}, defaultOptions, this.options);
            _options.initialEditType = this.mode;
            _options.height = this.height;
            _options.language = this.language;
            return _options;
        }
    },
    mounted() {
        this.initEditor();
    },
    methods: {
      initEditor(){
          this.editor = new Editor({
              el: document.getElementById(this.id),
              ...this.editorOptions,
              // 使用插件
              plugins: [[codeSyntaxHighlight, { highlighter: Prism }], colorSyntax]
          });

          if(this.value){
              this.editor.setMarkdown(this.value);
          }

          // 上传图片 方法
          this.uploadImg();
      },
      // 获取编辑器 html
      getHtml(){
          return this.editor.getHTML();
      },
      // 获取编辑器 Markdown
      getValue(){
          return this.editor.getMarkdown();
      },
      // 上传图片方法 
      uploadImg(){
          this.editor.removeHook('addImageBlobHook');
          this.editor.on('addImageBlobHook', (_file, cb) => {
              const file = new FormData();
              file.append('file', _file);
              const result = upload.uploadImg(file);
              result.then(({code, msg, url}) => {
                  if(code === 0){
                      this.$message.success(msg);
                      cb(url, file.name)
                  }
              })
          })
      }
  }
}
</script>

default-options.js 配置文件

export default {
  minHeight: '300px',
  previewStyle: 'vertical',  // Markdown Editor的预览样式（标签，垂直）
  useCommandShortcut: true,  // 是否使用键盘快捷键执行命令
  useDefaultHTMLSanitizer: true,
  usageStatistics: false,  // 发送主机名到谷歌分析
  hideModeSwitch: false,  // 隐藏模式开关选项卡栏
  // 工具栏配置
  toolbarItems: [
    ['heading', 'bold', 'italic', 'strike'],
    ['hr', 'quote'],
    ['ul', 'ol', 'task', 'indent', 'outdent'],
    ['table', 'image', 'link'],
    ['code', 'codeblock'],
  ]
}

3. 使用组件

<template>
    <div>
        <markdown-editor ref="markdownEditor" v-model="content1" height="500px" />
    </div>
</template>

<script>
import MarkdownEditor from '@/components/MarkdownEditor';

const content = `
**This is test**

* vue
* element
* webpack
`
export default {
    name: "写你自己的组件名",
    components: {
		MarkdownEditor,
	},
    data() {
        return {
            html: '',
            value: '',
            content1: content,
        }
    },
    methods: {
        getHtml(){
            this.html = this.$refs.markdownEditor.getHtml();
            console.log(this.html);
        },
        getValue(){
            this.value = this.$refs.markdownEditor.getValue();
            console.log(this.value);
        },
    }
}
</script>

<style lang="scss" scoped>

</style>

4. 图片上传

在 initEditor 方法内调用 uploadImg 方法

uploadImg(){
	this.editor.removeHook('addImageBlobHook');
	this.editor.on('addImageBlobHook', (_file, cb) => {
	    const file = new FormData();
	    file.append('file', _file);
	    const result = upload.uploadImg(file);
	    result.then(({code, msg, url}) => {
	        if(code === 0){
	            this.$message.success(msg);
	            cb(url, file.name)
	        }
	    })
	})
}

5. 实现效果