Vue中富文本编辑器的使用

基于 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-tiptap

2、初始配置

<template><el-tiptap lang="zh" v-model="content" :extensions="extensions"></el-tiptap>
</template><script>import {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.css'export 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、自定义图片上传到服务器

Vue中富文本编辑器的使用相关推荐

vue中富文本编辑器vue-quill-editor在vue中自定义选择视频插入编辑文章中
题记: ----- 互联网不该只是技术的,不能简化成内容和工具,它应该属于生活本身 vue-quill-editor 是 Vue 项目中使用的富文本编辑器 1 引言在实际应用开发中,在常见的管理后 ...
在HTML中标记tel是什么意思,'tel'属性在AEM 6.1的经典UI中富文本编辑器中的锚标记的href中不起作用...
我正在使用AEM 6.1 SP2,我试图在定位标记的href中启用'tel'属性以使点击调用功能性工作.我已经添加了'htmlRules'节点 ,并将htmlRules节点下的节点与'protocol ...
Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
后台管理系统中富文本编辑器 wangeditor 的简单使用（未封装）
项目场景:后台管理系统中富文本编辑器wangeditor的使用 wangeditor使用时新增编辑及回显 1.安装wangeditor插件 npm install wangeditor 2.html中 ...
vue富文本编辑器 Vue-Quill-Editor
主流富文本编辑器对比前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想.所以果断使用vue-quill-editor来实现. wangEditor( ...
Vue富文本编辑器vue-quill-editor-使用-bug问题-教程
vue-quill-editor npm install vue-quill-editor –save or yarn add vue-quill-editor 文件中使用 <template& ...
Element Tiptap Editor - 免费开源的 Vue 富文本编辑器，专门为搭配 Element UI 使用优化，使用很简单
一款很容易上手配置的富文本编辑器,和 Element plus 一起使用效果非常好,还能自定义功能. 关于 Element Tiptap Editor Element Tiptap Editor 是一 ...
vue整合文本编辑器
场景说明: 后端输入一篇文章,在前端显示,这时就有个排版问题了.单纯的文本输入框无法满足要求. 所以需要采用后端整合文本编辑器,前端(vue)采用v-html标签直接渲染小编的示例是整合vue 0. ...
谈谈浏览器中富文本编辑器的技术演进
作者简介:刘杨,抖音前端团队低代码平台核心开发者. 发展历程富文本编辑器按发展历程而言,分为 L0.L1.L2 三个阶段,每个阶段都比上一个阶段定制程度更高,由浏览器导致的问题也更少(因为强依赖浏览 ...

Vue中富文本编辑器的使用

处理富文本编辑器中的图片

Vue中富文本编辑器的使用相关推荐

最新文章

热门文章