wangeditor 富文本编辑器使用

使用环境vue3 + ts  ,添加了字数限制

尝试了两种,使用方法类似(参考文档),工具栏图标有不同,最后选用了第一种。

一、wangeditor 安装

 npm i wangeditor --save

使用

这里封装了个简单组件

<template>
  <div class="editor-container">
    <div id="editor"></div>
    <div :class="overflow ? 'editorText alert' : 'editorText'" v-if="maxLength > 0">
      {{ editorLen }} / {{ maxLength }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineExpose, watch } from 'vue'
import EWangEditor from 'wangeditor'   //引入

const props = defineProps({
  htmls: {  
    type: String,
    default: ''
  },
  height: {          //编辑框高度
    type: Number,
    default: 200
  },
  maxLength: {       //字数限制
    type: Number,
    default: -1
  },
  placeholder: {
    type: String,
    default: '请输入内容...'
  },
  menuList: {        // 工具栏配置           
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['contentChange'])
const editor = ref()
const editorLen = ref(0)       //字数统计
const overflow = ref(false)    //文本溢出

const initEditor = function () {    //初始化 创建实例
  if (editor.value) return
  else {
//这里的EWangEditor同引入时的名称一致
    editor.value = new EWangEditor('#editor')
    editor.value.customConfig = editor.value.customConfig
      ? editor.value.customConfig
      : editor.value.config
//change监听  做字数限制处理
    editor.value.customConfig.onchange = (html) => {
      console.log(html, 'editor change')
      if (props.maxLength > 0) {
        let reg = /<[^<>]+>/g                     //去标签
        let value = html.replace(reg, '')
        value = value.replace(/&nbsp;/gi, '')    //去空格
        editorLen.value = value.length
        overflow.value = value.length > props.maxLength
      }
      editor.value.editorContent = html
      emit('contentChange', editor.value.txt.html())
    }

    editor.value.config.menus = [...props.menuList]
    editor.value.config.height = props.height
    editor.value.config.placeholder = props.placeholder
    editor.value.config.showFullScreen = false

    editor.value.create()
    resetEditor()
    console.log(editor.value, 'editor.value')
  }
}

onMounted(() => {
  initEditor()
})
//设置初始内容
const resetEditor = function (val?: string) {
  editor.value.txt.html(val || props.htmls)
}
//销毁
const destroyEditor = function () {
  editor.value.destroy()
  editor.value = null
}
//清空
const clearEditor = function () {
  editor.value.txt.clear()
}

defineExpose({ clearEditor,  destroyEditor, resetEditor })

</script>

<style scoped>
.editor-container {
  width: 100%;
  position: relative;
}
.editorText {
  position: absolute;
  bottom: 0;
  right: 10px;
  color: #909399;
  z-index: 10001;
}
.alert {
  color: #f56c6c;
}
:deep(.vcp-fullscreen-toggle) {          //这里隐藏了 全屏
  display: none;
}
</style>

效果图:

我这里工具栏按需求只放了自己需要的功能 

二、vue-quill-editor安装

npm install vue-quill-editor --save
全局引入:
 //引入quill-editor编辑器
 import VueQuillEditor from 'vue-quill-editor'
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
 Vue.use(VueQuillEditor)
 
使用

此处代码不全,不可正常运行,使用参考文档

 <quill-editor  class="editor"  v-model="content" ref="customQuillEditor" :options="editorOption" />


const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
  ["blockquote", "code-block", "formula"], // 引用  代码块 插入公式
  [{ header: 1 }, { header: 2 }], // 1、2 级标题
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
  [{ script: "sub" }, { script: "super" }], // 上标/下标
  [{ indent: "-1" }, { indent: "+1" }], // 缩进
  [{ direction: "rtl" }], // 文本方向
  [{ size: [false,"14px","16px","18px","20px","22px","26px","28px","30px"] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5,6, false] }], // 标题
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
  [{ font: ["SimSun","SimHei","Microsoft-YaHei","KaiTi","FangSong","Arial","Times-New-Roman","sans-serif",] }], // 字体种类
  [{ align: [] }], // 对齐方式
  ["clean"], // 清除文本格式
  ["link", "image", "video", "report"] // 链接、图片、视频、自定义行为
]


const editorOption = {
        placeholder:'你想说什么?',
          toolbar: {
            container: toolbarOptions,  // 工具栏
        }
}


效果图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/107811.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

IO流框架,缓冲流

一.缓冲流有什么优点 Java中的缓冲流&#xff08;Buffered Stream&#xff09;具有以下优势&#xff1a; 提高效率&#xff1a;缓冲流通过在内存中缓存一部分数据&#xff0c;减少了直接从内存到磁盘或从磁盘到内存的频繁IO操作&#xff0c;从而提高了读写效率。缓冲区大小调整…

macOS 12 Monterey v12.7.1正式版:开启全新的操作系统体验

macOS 12 Monterey已经向所有兼容的Mac设备推出&#xff0c;为您带来了一系列强大的新功能和改进。这个全新的操作系统版本&#xff0c;不仅带来了更流畅的用户体验&#xff0c;还增强了与iOS设备的无缝集成&#xff0c;让您的设备使用更加高效&#xff0c;更加便捷。 macOS 1…

RabbitMQ生产者的可靠性

目录 MQ使用时会出现的问题 生产者的可靠性 1、生产者重连 2、生产者确认 3、数据持久化 交换机持久化 队列持久化 消息持久化 LazyQueue懒加载 MQ使用时会出现的问题 发送消息时丢失&#xff1a; 生产者发送消息时连接MQ失败生产者发送消息到达MQ后未找到Exchange生…

Vue 3.3.6 ,得益于WeakMap,比之前更快了

追忆往昔&#xff0c;穿越前朝&#xff0c;CSS也是当年前端三剑客之一&#xff0c;风光的很&#xff0c;随着前端跳跃式的变革&#xff0c;CSS在现代前端开发中似乎有点默默无闻起来。 不得不说当看到UnoCss之前&#xff0c;我甚至都还没听过原子化CSS[1]这个概念&#xff08;…

时序预测 | Matlab实现ARIMA-LSTM差分自回归移动模型结合长短期记忆神经网络时间序列预测

时序预测 | Matlab实现ARIMA-LSTM差分自回归移动模型结合长短期记忆神经网络时间序列预测 目录 时序预测 | Matlab实现ARIMA-LSTM差分自回归移动模型结合长短期记忆神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 时序预测 | Matlab实现ARIMA-LSTM差…

springboot配置https

SSL &#xff1a; secure socket layer 是一种加密协议&#xff0c;SSL主要用于保护数据在 客户端和服务器之间的传输&#xff0c;&#xff0c;防止未经授权的访问和窃取敏感信息 在腾讯云申请ssl证书 申请了之后在我的域名中&#xff0c;&#xff0c;解析 解析了之后&…

Jmeter的接口自动化测试

在去年实施了一年的三端&#xff08;PC、无线M站、无线APP【Android、IOS】&#xff09;后&#xff0c;今年7月份开始&#xff0c;我们开始进行接口自动化的实施&#xff0c;目前已完成了整个框架的搭建以及接口的持续测试集成。今天做个简单的分享。 在开始自动化投入前&#…

虚拟化 vs. 裸金属:K8s 部署环境架构与特性对比

伴随着 IT 云化转型的逐步推进&#xff0c;越来越多的用户加入应用容器化改造的行列&#xff0c;并使用 Kubernetes&#xff08;K8s&#xff09;进行容器部署管理。然而&#xff0c;令不少用户感到困惑的是&#xff0c;由于大部分应用此前都部署在虚拟化或超融合环境&#xff0…

轻量封装WebGPU渲染系统示例<7>-材质多pass(源码)

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/version-1.01/src/voxgpu/sample/MultiMaterialPass.ts 此示例渲染系统实现的特性: 1. 用户态与系统态隔离。 2. 高频调用与低频调用隔离。 3. 面向用户的易用性封装。 4. 渲染数据和渲染机制分离。 …

Mac电脑窗口管理Magnet中文 for mac

Magnet是一款Mac窗口管理工具&#xff0c;它可以帮助用户轻松管理打开的窗口&#xff0c;提高多任务处理效率。以下是Magnet的一些主要特点和功能&#xff1a; 分屏模式支持&#xff1a;Magnet支持多种分屏模式&#xff0c;包括左/右/顶部/底部 1/2 分屏、左/中/右 1/3 分屏、…

基于51单片机的温度测量报警系统的设计与制作

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、实习目的二、实习任务2.1 设计温度测量报警系统硬件电路2.2 温度测量报警系统软件编程、仿真与调试&#xff1b;2.3 完成温度测量报警系统的实物制作与调试…

基于定容积法标准容器容积标定中的电动针阀自动化解决方案

摘要&#xff1a;在目前的六氟化硫气体精密计量中普遍采用重量法和定容法两种技术&#xff0c;本文分析了重量法中存在的问题以及定容法的优势&#xff0c;同时也指出定容法在实际应用中还存在自动化水平较低的问题。为了提高定容法精密计量过程中的自动化水平&#xff0c;本文…

从工厂到社会:探索如何应用设计模式工厂模式

文章目录 &#x1f31f; 将设计模式工厂模式运用到社会当中&#x1f34a; 工厂模式在社会中的应用&#x1f389; 工厂&#x1f389; 餐厅&#x1f389; 运输 &#x1f34a; 工厂模式的优势&#x1f389; 代码简洁&#x1f389; 扩展性强&#x1f389; 便于维护和管理 &#x1f…

信钰证券:华为汽车概念股持续活跃 圣龙股份斩获12连板

近期&#xff0c;华为轿车概念股在A股商场遭到热捧&#xff0c;多只股票迭创前史新高。10月23日&#xff0c;华为轿车概念股再度走强&#xff0c;到收盘&#xff0c;板块内圣龙股份、银宝山新涨停&#xff0c;轿车ETF在重仓股提振下盘中一度上涨近2%。业界人士认为&#xff0c;…

Day13力扣打卡

打卡记录 奖励最顶尖的 k 名学生(哈希表排序) 用哈希表对所有的positive与negative词条进行映射&#xff0c;然后遍历求解。tip&#xff1a;常用的分割字符串的操作&#xff1a;1.stringstream配合getline() [格式buf, string, char]2.string.find()[find未找到目标会返回npos…

javaEE -9(7000字详解TCP/IP协议)

一&#xff1a; IP 地址 IP地址&#xff08;Internet Protocol Address&#xff09;是指互联网协议地址&#xff0c;又译为网际协议地址。 IP地址是IP协议提供的一种统一的地址格式&#xff0c;它为互联网上的每一个网络和每一台主机分配一个逻辑地址&#xff0c;以此来屏蔽物…

AOP 笔记

AOP【面向切面编程】 作用&#xff1a;在不惊动原始设计的基础上进行功能增强。 无侵入式编程 连接点&#xff1a;程序执行的任意位置&#xff0c;SpringAOP中&#xff0c;理解为方法的执行。 切入点&#xff1a;匹配连接点的式子,要追加功能的方法 通知&#xff08;写在通…

服务运营 |论文解读: 住院病人“溢出”:一种近似动态规划方法

摘要 在住院床位管理中&#xff0c;医院通常会将住院病人分配到相对应的专科病房&#xff0c;但随着病人的入院和出院&#xff0c;可能会出现病人所需的专科病房满员&#xff0c;而其他病房却有空余床位的情况。于是就有了 "溢出 "策略&#xff0c;即当病人等候时间…

【目标检测】Visdrone数据集和CARPK数据集预处理

之前的博文【目标检测】YOLOv5跑通VisDrone数据集对Visdrone数据集简介过&#xff0c;这里不作复述&#xff0c;本文主要对Visdrone数据集和CARPK数据集进行目标提取和过滤。 需求描述 本文需要将Visdrone数据集中有关车和人的数据集进行提取和合并&#xff0c;车标记为类别0&…

记录--vue3实现excel文件预览和打印

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 前言 在前端开发中&#xff0c;有时候一些业务场景中&#xff0c;我们有需求要去实现excel的预览和打印功能&#xff0c;本文在vue3中如何实现Excel文件的预览和打印。 预览excel 关于实现excel文档在…