网站制作商,建设通会员多少钱一个月,小程序商城运营方案,怎么弄个人网站基于 Vue 的富文本编辑器有很多#xff0c;例如官方就收录推荐了一些#xff1a; https://github.com/vuejs/awesome-vue#rich-text-editing 。
这里我们以 element-tiptap 为例。
GitHub 仓库#xff1a;https://github.com/Leecason/element-tiptap 在线示例#xff1a…基于 Vue 的富文本编辑器有很多例如官方就收录推荐了一些 https://github.com/vuejs/awesome-vue#rich-text-editing 。
这里我们以 element-tiptap 为例。
GitHub 仓库https://github.com/Leecason/element-tiptap 在线示例https://leecason.github.io/element-tiptap 中文文档https://github.com/Leecason/element-tiptap/blob/master/README_ZH.md
1、安装
npm i element-tiptap2、初始配置
templateel-tiptap langzh v-modelcontent :extensionsextensions/el-tiptap
/templatescriptimport {ElementTiptap,Doc,Text,Paragraph,Heading,Bold,Underline,Italic,Image,Strike,ListItem,BulletList,OrderedList,TodoItem,TodoList,HorizontalRule,Fullscreen,Preview,CodeBlock
} from element-tiptap
import element-tiptap/lib/index.cssexport default {components: {el-tiptap: ElementTiptap},data () {return {content: hello world,extensions: [new Doc(),new Text(),new Paragraph(),new Heading({ level: 3 }),new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮new Image(),new Underline(), // 下划线new Italic(), // 斜体new Strike(), // 删除线new HorizontalRule(), // 华丽的分割线new ListItem(),new BulletList(), // 无序列表new OrderedList(), // 有序列表new TodoItem(),new TodoList(),new Fullscreen(),new Preview(),new CodeBlock()]}}
}
/script处理富文本编辑器中的图片
1、创建 src/api/image.js 封装数据接口
/* 素材请求相关模块 */import request from ../utils/request/* 上传图片素材 */
export const uploadImage (data) {return request({method: post,url: /mp/v1_0/user/images,// 一般文件上传的接口都要求把请求的Content-Types设置为multipart/form-data// 但是我们使用axios上传文件的话不需要手动设置你只要给data一个formData对象即可// new formData()data: data})
}2、自定义图片上传到服务器
