vue富文本编辑器mavonEditor使用

这两天在做一个项目需要用到文本编辑的功能，项目结构是springmvc+vue-cil+element-ui,于是乎在网上找到了这个vue的富文本编辑器。

1：通过npm命令安装

npm install mavon-editor --save

2:在main.js中全局引入

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor);

3：在具体的组件里html里定义挂载点

4:配置工具栏

以下为js的data数据，与挂载点的:toolbars绑定

data（）{
	return {
		markdownOption: {
                    bold: true, // 粗体
                    italic: true, // 斜体
                    header: true, // 标题
                    underline: true, // 下划线
                    strikethrough: true, // 中划线
                    mark: true, // 标记
                    superscript: true, // 上角标
                    subscript: true, // 下角标
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    link: true, // 链接
                    imagelink: true, // 图片链接
                    code: true, // code
                    table: true, // 表格
                    fullscreen: true, // 全屏编辑
                    readmodel: true, // 沉浸式阅读
                    htmlcode: true, // 展示html源码
                    help: true, // 帮助
                    /* 1.3.5 */
                    undo: true, // 上一步
                    redo: true, // 下一步
                    trash: true, // 清空
                    save: true, // 保存（触发events中的save事件）
                    /* 1.4.2 */
                    navigation: true, // 导航目录
                    /* 2.1.8 */
                    alignleft: true, // 左对齐
                    aligncenter: true, // 居中
                    alignright: true, // 右对齐
                    /* 2.2.1 */
                    subfield: true, // 单双栏模式
                    preview: true, // 预览
                }，
                 handbook: "#### how to use mavonEditor in nuxt.js"
	}
}

到这一步编辑器的基本引入完成，大致样式如下：

关于保存

1：可以通过按钮事件定义保存
2：通过@save属性绑定自定义的保存事件，可以实现crtl+v保存触发和点击工具栏保存

关于回显

保存一般保存的都是md格式文本，那么从数据库取出的时候我们就需要将其转换成html进行展示

引入相关样式

    @import "https://cdn.bootcss.com/github-markdown-css/2.10.0/github-markdown.min.css";

通过markdownIt的render方法将md格式文本转换成html

computed:{
            content(){
                let markdownIt = mavonEditor.markdownIt
                return markdownIt.render(this.$route.params.content.articleContent)
            }
        }

展示数据

最后呈现效果如下：

关于图片的上传

先将挂点写好如下

最主要的是 ref=md，@imgAdd=“$imgAdd"，@imgDel="$imgDel”

定义上传方法

$imgAdd(pos, $file){
                debugger
                // console.log(pos)
                // console.log($file)
                // 第一步.将图片上传到服务器.
                var formdata = new FormData();
                formdata.append('files', $file);
                axios({
                    url: '/editor/upload',
                    method: 'post',
                    data: formdata,
                    headers: { 'Content-Type': 'multipart/form-data' },
                }).then((url) => {
                    // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
                    // $vm.$img2Url 详情见本页末尾
                    this.$refs.md.$img2Url(pos, url.data);
                })
            }

后端需要将已经上传的图片的URL地址返回

此处笔者掉了一个大坑，由于我们的项目是springmvc+vue脚手架的前后端分离项目，在项目架构初期将图片这种静态资源放在了后端根目录下的resources文件夹下了，说直白点就是spring和mybatis配置文件的那个目录（原本静态资源如图片等需要存放在webapp目录下，项目初期傻逼了…）而当文件一经编译，你前端项通过url直接访问到这所谓的静态资源已经不再可能！！！！

如果你的项目是前后端分离的项目，那么你还需要在spring_mvc.xml文件中解决请求跨域问题

如果你的项目还运用了spring security ,那么你还需要在你配置拦截处将相应的静态资源拦截放行。

碎碎念，仅记录供回顾。
如有不到之处，欢迎指正！！

参考：官网

补充：当上传图片的回调url中含有中文时，需设置响应头的字符编码

 @PostMapping(value = "upload",produces="application/json; charset=UTF-8")
    public String saveImg(MultipartFile[] files) throws IOException {