vue3 引入 markdown编辑器
2023-12-13 08:07:49
- 安装依赖
pnpm install mavon-editor // "mavon-editor": "3.0.1",
- markdown 编辑器
<mavon-editor></mavon-editor>
- 新增文本
<mavon-editor ref="editorRef" v-model="articleModel.text" codeStyle="idea" @imgAdd="$imgAdd"
@imgDel="$imgDel"></mavon-editor>
使用v-model 收集文本内容。
codeStyle:代码块风格
@imgAdd="$imgAdd":文本中添加图片时的回调函数
- 添加图片时的回调函数 @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);
}
-
删除图片时 回调函数 @imgDel=“$imgDel”
-
预览文本,去掉markdown编辑器的功能选项,只回显文本
<mavon-editor codeStyle="idea" v-model="articleModel.text"
:editable="false" :toolbarsFlag="false"
:subfield="false" defaultOpen="preview"
class="preview-editor"
>
</mavon-editor>
文章来源:https://blog.csdn.net/qq_58706693/article/details/134915124
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!