VUE2 + TS vue2-editor实现富文本编辑

最新推荐文章于 2024-07-15 08:39:01 发布

A_front

最新推荐文章于 2024-07-15 08:39:01 发布

阅读量1k

点赞数 1

分类专栏：富文本 VUE2 vue2-editor 文章标签： vue.js 前端 typescript vue

本文链接：https://blog.csdn.net/SDD12555/article/details/121406481

版权

本文介绍了一个使用Vue2和TypeScript实现的基本富文本编辑器，重点关注了图片上传和处理，以及如何解决Base64字符串长度导致的内容过大问题。通过安装必要的依赖，并在index.vue和index.ts中进行配置，可以实现限制图片大小和输入文本字数的基本功能。需要注意，富文本内容以string格式传递时，可能因Base64字段过长导致参数过大，需要后端调整相应字段长度限制。

摘要由CSDN通过智能技术生成

因为我这里只要求有基本的富文本功能，限制图片大小，限制可输入传文本字数，没有过多的要求，所以没有配置工具栏，如有需要请自行搜索配置项，一搜一大把，这里就不做阐述啦。

安装依赖

npm install vue2-editor --save

安装ts声明，项目没使用ts就不安装

npm install @types/vue2-editor --save

index.vue

<vue-editor ref="editor" class="editor" v-model="detail.content" :disabled="!editing"
   useCustomImageHandler @image-added="handleImageAdded">
</vue-editor>
<span style="float: right;margin-right: 20px;">            
  {
  {innerLength}}/200
</span>

index.ts

import { VueEditor } from 'vue2-editor';

@Component({
  components: {
    VueEditor
  }
})

private content = ''
private editing = '' //富文本内容是否可编辑，依实际情况判断
private textLength = 0 //纯文字字数

get innerLength () {
  retur