vue3 引入 markdown编辑器

参考文档

  1. 安装依赖
pnpm install mavon-editor  // "mavon-editor": "3.0.1",
  1. markdown 编辑器
<mavon-editor>mavon-editor>
  1. 新增文本
<mavon-editor ref="editorRef" v-model="articleModel.text" codeStyle="idea" @imgAdd="$imgAdd"
                        @imgDel="$imgDel">mavon-editor>
使用v-model 收集文本内容。
codeStyle:代码块风格
@imgAdd="$imgAdd":文本中添加图片时的回调函数
  1. 添加图片时的回调函数 @imgAdd=“$imgAdd”
// 第一个参数记录此文本中,添加图片的位置
// 第二个参数,添加的文件对象
const $imgAdd = async (pos, $file) => {
  let formData = new FormData()
  formData.append('file', $file)
  // 上传图片,向后台发送ajax请求
  const response = await picUploadService(formData);
  let url = response.data.data;
  // 拿到后端返回的图片url,将文件的路径替换为服务器返回的图片路径
  editorRef.value.$img2Url(pos, url);
}
  1. 删除图片时 回调函数 @imgDel=“$imgDel”

  2. 预览文本,去掉markdown编辑器的功能选项,只回显文本

<mavon-editor codeStyle="idea" v-model="articleModel.text"
                    :editable="false" :toolbarsFlag="false"
                    :subfield="false" defaultOpen="preview"
                    class="preview-editor"
      >
      mavon-editor>

你可能感兴趣的:(vue.js,编辑器,前端)