(五) 文章编辑页开发

219 阅读1分钟

修改views/post/form.vue文件,引入mavonEditor

import { mavonEditor } from "mavon-editor";

然后在template中使用<mavon-editor></mavon-editor>

详细配置可查看 mavonEditor 文档

页面效果如下图:

标题设置

可使用muse-uitext-field组件,通过覆盖mavon-editor样式,使其出现在指定位置。 注意:标题覆盖到编辑器后,会使编辑器菜单里的标题和文件上传下拉菜单,出现在标题下面,需要修改覆盖整个编辑器的position样式属性,并且调整标题的z-index的值,使工具栏>标题>内容

文章保存修改删除

可以通过vuex来触发保存操作,直接调用后端接口api来实现。

博客地址: alibt.top

更多精彩,请关注我的公众号!