vue2-editor - npmhttps://www.npmjs.com/package/vue2-editor

1. 安装所需包

npm install vue2-editor

2. 使用Vue2-editor

<template><div id="app"><!-- 3、使用组件 --><vue-editor v-model="content"></vue-editor></div>
</template><script>
// 1、引用包
import { VueEditor } from "vue2-editor";export default {// 2、添加组件components: {VueEditor},data() {return {content: "<h1>Some initial content</h1>"};}
};
</script>

效果预览：

3. 上传图片

Vue2-editor默认将图片转成了base64编码，直接放在了页面里面。

好处：无需额外上传图片。

坏处：页面文件会非常大，因此还是需要额外做图片的上传。

将代码修改为如下：

<template><div id="app"><!--1、添加useCustomImageHandler和@image-added="handleImageAdded"--><vue-editorid="editor"useCustomImageHandler@image-added="handleImageAdded"v-model="htmlForEditor"></vue-editor></div>
</template><script>
import { VueEditor } from "vue2-editor";export default {components: {VueEditor},data() {return {htmlForEditor: ""};},methods: {// 2、添加handleImageAdded函数async handleImageAdded(file, Editor, cursorLocation, resetUploader) {const formData = new FormData(); //html自带的表单数据类formData.append("file", file); //file是文件对象，在服务端接收的字段名也是"file"const res=await this.$http.post('upload',formData) //发起请求//cursorLocation是光标位置，res.data.url是上传后的url地址Editor.insertEmbed(cursorLocation, "image", res.data.url)resetUploader() //重置文件上传器},}
};
</script>

参考文章：

技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-10.vue的富文本编辑器（vue2-editor）_最强的森的博客-CSDN博客技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-8.vue的富文本编辑器（vue2-editor）相关文章：技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-1.工具和本地环境技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-2.启动项目技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-3.element-ui和路由的安装和使用技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-4.使用axioshttps://blog.csdn.net/m0_51592186/article/details/116593708

vue2-editor使用简介_一行注释的博客-CSDN博客_vue2-editor首先引入npm install vue2-editor --save安装至项目中import{VueEditor}from"vue2-editor";注册组件components:{ VueEditor},传值与方法<vue-editor:customModules="customModulesForEditor":editorOptions=...https://blog.csdn.net/qq_37818095/article/details/102463042

Vue2-editor 富文本编辑器相关推荐

小程序editor 富文本编辑器组件
效果: 关于editor 富文本编辑器组件复制到组件common 里面.json 引用即可链接:https://pan.baidu.com/s/1_QIp28IOVuyVFfKfFZwxKQ 提取 ...
小程序的四次元口袋：editor富文本编辑器的使用、渲染，以及rich-text进行解析
editor富文本 1.介绍富文本编辑器,可以对图片.文字进行编辑.极大地丰富了我们文章的结构样式,之前小程序还没有自己开发富文本插件,而在2019年微信小程序正式发布了富文本api. 支持的类型 ...
froala editor富文本编辑器出现验证失败的解决方法
froala editor富文本编辑器出现验证失败的解决方法出现这种情况,首先要下载源码包地址 https://www.froala.com/wysiwyg-editor 之后引用本地的 froal ...
uniapp 微信小程序 editor富文本编辑器 api 使用记录
文章目录 1.查看官方示例 2.关于富文本编辑器的工具栏 3.自己实践一下效果这里记录一下自己研究学习的结果之前一直使用textarea 来进行内容的编辑.但是局限性还是太多,最近发现了edit ...
云开发小程序editor富文本编辑器上传图片实现增删改
在做一个博客小程序,用的是云开发,用editor编辑器上传图片,一开始直接传图片会出现真机不显示的情况,排查原因后发现是因为传入的是本地路径,而小程序要求的是https或者云id,于是做了以下修改:先 ...
【uniapp-内置组件editor富文本编辑器】
在b站跟着咸虾米老师学的 editor组件 <template><view class="edit"><view class="title& ...
Toast UI Editor富文本编辑器
安装npm $ npm install @toast-ui/editor 存在一定的被墙风险 $ npm install @toast-ui/editor @<版本> 存在一定的被墙风险 ...
uniapp editor富文本编辑器，h5富文本编辑器封装成插件
重点提示:工具栏的图标请自行在iconfont(https://www.iconfont.cn/)去添加,否则图标无法显示公司业务需求,需要在h5实现富文本编辑功能.uniapp的editor可以实 ...
使用微信小程序editor富文本编辑器（爬坑要点）
编辑器wxml <view class="container" style="height:{{editorHeight}}px;"><edi ...
uni-app editor富文本编辑器
<form @submit="formCompany" @reset="formReset"> <view class="uni-f ...

Vue2-editor 富文本编辑器

1. 安装所需包

2. 使用Vue2-editor

3. 上传图片

Vue2-editor 富文本编辑器相关推荐

最新文章

热门文章