wangeditor富文本编辑器限制输入文字长度和传到后台字符长度

一叶茶

已于 2024-02-18 01:27:31 修改

阅读量2.9k

点赞数 1

分类专栏： react 文章标签：前端 javascript 开发语言 vue3 编辑器

于 2023-08-31 10:07:24 首次发布

本文链接：https://blog.csdn.net/Z_Joker_J/article/details/132596934

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章描述了一个在Vue项目中使用WangEditor富文本组件的代码片段，包括配置服务器接口、字符长度限制功能以及使用正则表达式计算纯文本长度。组件还实现了图片上传功能，并在用户输入超过限制时给出警告。

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

代码节选如下：

// 富文本组件
<template>
  <div ref="editorRef"></div>
</template>

<script lang="ts" setup>
import E from 'wangeditor'

const props = withDefaults(
  defineProps<{
    modelValue: string
    action?: string // 上传图片基础地址
    path: string // 上传图片业务地址
    height: number
    disabled: boolean // 是否禁用
    maxLength: number // 最大输入长度
    maxstrLength: number //最大字符长度
  }>(),
  {
    modelValue: '',
    action: ‘’,
    path: '/',
    height: 500, // 设置编辑区域高度
    disabled: false, // 默认启用
    maxLength: 25000,
    maxstrLength: 200000,
  }
)

const emit = defineEmits(['update:modelValue', 'update:isActive', 'update:overLen'])

let editor: E | null
onMounted(() => {
  editor = new E(editorRef.value)
  // 配置
  Object.assign(editor.config, {
    zIndex: 1,
    focus: false,
    height: props.height,
    uploadImgServer: props.action, // 配置 server 接口地址
    uploadImgHeaders: {
      Authorization: `Bearer ${getPiniaToken()}`,
      'X-Requested-With': 'XMLHttpRequest',
    },
    // 限制上传的最大图片数量
    uploadImgMaxLength: 9,
    // 单个文件的最大体积限制，默认为 10M
    uploadImgMaxSize: 10 * 1024 * 1024, // 10M
    onchange(newHtml: string) {
      const totalLens = getTextLength(newHtml)
      if (totalLens > props.maxLength || newHtml.length > props.maxstrLength) {
        
        message.warning('输入字符过长！')
      } else {
       。。。。
      }
    },
    onblur() {
      。。。
    },
    })
  editor.create()
  editor.txt.html(props.modelValue) // 初始化重新设置编辑器内容

/**
 * 计算富文本输入框内输入字符的长度（不包含p、img、video等标签，仅计算输入文字的长度）
 */
const getTextLength = (newHtml: string) => {
  return newHtml.replace(/<[^>]+>/g, '').length
}
</script>

使用正则表达式将标签替换成空字符串，然后计算输入文字的长度。

上述代码不全，仅展示部分。