支持vue3.0+ts 的富文本记录

前言

用过很多的富文本，还是蛮喜欢鹅毛富文本，轻量级，
一般遇到富文本的案例，都会首先想到的是quill
目前vue3.0与react分裂两极，typescript霸占一方，javascript还在坚持，vue2.0日薄西山。
本文介绍vue3.0 ts支持的富文本的简单实用和文档地址

富文本Vue-Quill-Editor

官网文档

安装
```
yarn add @vueup/vue-quill@beta
```

使用

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

<QuillEditorref="QuillEditorRef":options="options":content="textarea"content-type="html"@update:content="textChange"/>

const options = {debug: 'info',modules: {// toolbar: ['bold', 'italic', 'underline'],},placeholder: '批量输入/粘贴 企业名称或者域名，以“行”为分割线；例如以下：\n北京安全共识科技有限公司\n百度网讯科技有限公司',readOnly: false,theme: 'snow',
}

const textChange = (e:any) => {textarea.value = econsole.log(e, '98', textarea.value);
}

   // 设置ref:便于调用quill支持的方法// 比如 弹窗打开时设置内容为空const userSecret = async () => {if (QuillEditorRef.value) {QuillEditorRef.value.setText('')}};

注解：
@update:content 内容改变事件
options：配置项
设置ref:便于调用quill支持的方法
更多详细的请参考文档

效果图

富文本wangeditor

官网文档

效果图
安装

 npm install wangeditor --save-dev

封装

 <template><div><div className="shop"><div className="text-area"><divref="editorElemMenu"style="backgroundColor: '#f1f1f1'; border:'1px solid #ccc'"className="editorElem-menu"/><divref="editorElemBody":className="value&&value!=='<p><br></p>'?'contentClass editorElem-body':'placeholderClass editorElem-body'"style="height: 300;border: '1px solid #ccc',borderTop: 'none'"/></div></div></div></template><script lang="ts" setup>import {onMounted, reactive, toRefs, defineComponent, ref,} from 'vue'import E from 'wangeditor'interface DataProps {editor: any;editorContent: stringgetContent:(ref?: any) => void}const props = defineProps({options: {type: Object,default: () => ({}),},value: {type: String,default: '',},});const editorElemMenu = ref();const editorElemBody = ref();const data: DataProps = reactive({editorContent: '',editor: {},getContent: () => {data.editor.txt.html(props.value)},})const emit = defineEmits(['onEditor', 'update:value']);onMounted(() => {const elemMenu = editorElemMenu.value;const elemBody = editorElemBody.value;data.editor = new E(elemMenu, elemBody)// 使用 onchange 函数监听内容的变化，并实时更新到 state 中data.editor.config.placeholder = '批量输入/粘贴 企业名称或者域名，以“行”为分割线；例如以下：<br/>北京安全共识科技有限公司<br/>百度网讯科技有限公司<br/>百度移信网络技术（北京）有限公司<br/>百度时代网络技术（北京）有限公司<br/>中电国佳（北京）投资基金管理有限公司<br/>北京安全共识科技有限公司<br/>百度网讯科技有限公司<br/>百度移信网络技术（北京）有限公司<br/>百度时代网络技术（北京）有限公司<br/>中电国佳（北京）投资基金管理有限公司',data.editor.config.onchange = () => {console.log(data.editor.txt.html())data.editorContent = data.editor.txt.html()// 向外部返回一个处理过的值emit('onEditor', data.editor.txt.html())emit('update:value', data.editor.txt.html())}data.editor.config.customUploadImg = function (files: any, insert: any) {// files 是 input 中选中的文件列表insert 是获取图片 url 后，插入到编辑器的方法// let file;// if (files && files.length) {//     file = files[0];// } else {//     return// }// 图片上传console.log('files1', files)const formData = new FormData();formData.append('file', files[0]);console.log('files', files, insert)// formData.append('Banners',{id:editorinfo.id,naviChildId:editorinfo.naviChildId})}data.editor.config.menus = ['head', // 标题'bold', // 粗体'fontSize', // 字号'fontName', // 字体'italic', // 斜体'underline', // 下划线'strikeThrough', // 删除线'foreColor', // 文字颜色'backColor', // 背景颜色'link', // 插入链接'list', // 列表'justify', // 对齐方式'quote', // 引用'emoticon', // 表情'image', // 插入图片'table', // 表格'video', // 插入视频'code', // 插入代码'undo', // 撤销'redo', // 重复]data.editor.config.uploadImgShowBase64 = truedata.editor.create()// data.getContent()})const refData = toRefs(data);</script><style scoped lang="scss">:deep(.w-e-text-container){min-height: 349px;max-height: 449px;overflow-y: auto;line-height: 32px;&:focus{outline: 0;box-shadow: 0 0 0 1px rgba(0, 88, 240, 1) inset;}&:active{outline: 0;box-shadow: 0 0 0 1px rgba(0, 88, 240, 1) inset;}&:visited{outline: 0;box-shadow: 0 0 0 1px rgba(0, 88, 240, 1) inset;}&::-webkit-scrollbar {/*滚动条整体样式*/width:0px;/*高宽分别对应横竖滚动条的尺寸*/}.placeholder{line-height: 32px;left: 16px;top: 16px;width: calc(100% - 16px);}.w-e-text{max-height: 449px;line-height: 32px;padding: 16px 16px;&::-webkit-scrollbar {/*滚动条整体样式*/width:0px;/*高宽分别对应横竖滚动条的尺寸*/}p{line-height: 32px;margin: 0px;}}}.placeholderClass{:deep(.w-e-text-container){background: #F2F3F5;border-radius: 2px;color: #D1D5DD;&:hover{outline: 0;box-shadow: none;// box-shadow: 0 0 0 1px #F2F3F5 inset;}&:focus{outline: 0;box-shadow: 0 0 0 1px rgba(0, 88, 240, 1) inset;}}}.contentClass{:deep(.w-e-text-container){background: #fff;border-radius: 2px;color: #171B23;box-shadow: 0 0 0 1px rgba(0, 88, 240, 1) inset;&:hover{outline: 0;box-shadow: none;box-shadow: 0 0 0 1px rgba(0, 88, 240, 1) inset;}&:focus{outline: 0;box-shadow: 0 0 0 1px rgba(0, 88, 240, 1) inset;}}}</style>

使用

  <Editorref="refEditor":value="textarea"@onEditor="onEditor"/>// 导入     import Editor from './Editor/wangEditor.vue'const textarea = ref<any>('')const refEditor = ref<any>();const onEditor = (value:any) => {console.log('父组件', value)textarea.value = value}

富文本数据处理

// 针对纯文本 提取里面的文字 push到data中
// <p>123</p>
let data = []
if(val !== undefined){// 段落文本val.replace(/<p>(([\s\S])*?)<\/p>/g, (match, capture) => {data.push( capture );});// 图片val.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => {data.push({files_url:capture,});});
}

多个标签，复杂的属性
// 匹配标签（不包括内容），过滤标签，保留内容。
var reg1 = /(<\/?font.*?>)/gi;
var reg2 = /(<\/?span.*?>)/gi;
var reg3 = /(<\/?a.*?>)/gi;
var reg4= /(<\/?font.*?>)|(<\/?span.*?>)|(<\/?a.*?>)/gi;var str = '<span>span数据</span><a href="asdasd">a数据<font>font数据</font></a>';
console.log(str.replace(reg1, ''));
console.log(str.replace(reg2, ''));
console.log(str.replace(reg3, ''));
console.log(str.replace(reg4, ''));// 只去掉标签内的属性（比如style和class）
var reg1 = /<span[^>]*>/gi;
var str1 = '<span style="color:red;">去除样式属性</span>123123';
console.log(str1.replace(reg1, '<span>'));

支持vue3.0+ts 的富文本记录相关推荐

如何搭建一个完整的Vue3.0 + ts 的项目
如何搭建一个完整的Vue3.0 + ts 的项目相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正 ...
vue3.0+ts+element-plus多页签应用模板：element-plus按需引入与动态换肤
目录系列链接一.安装element-plus 二.按需引入 1. 为什么要按需引入? 2. 如何按需引入? 3. 验证是否引入成功三.动态换肤 1. 制作自定义主题 2. 引入自定义主题 3. ...
vue3.0+ts+element-plus多页签应用模板：多级路由缓存
目录系列文章一.先说点啥 1. 为啥需要路由缓存? 2. 怎么实现路由缓存? 二.路由扁平化三.定义tag模块处理路由缓存四.切换路由时加入缓存五.使用keep-alive 系列文章 vue ...
Vue3.0+TS+Element-plus实现(若依版后台管理系统)
附上源码地址: Vue3.0+TS+Element-plus 后台管理系统模板准备工作安装vue3.0,npm create vue3-project 选中这几项即可,不需要vuex, 我们自己封 ...
vue 不识别svg_vue中引用svg，vue引入svg不显示，vue引用svg配置，vue3.0+ts如何配置svg...
注意: 如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高,重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev ...
vue3.0+ts+element-plus多页签应用模板：项目搭建
目录系列文章一.安装vue-cli@4.5.x 二.创建项目三.项目配置四.IDE配置五.vue.config.js配置六.重置浏览器默认样式系列文章 vue3.0+ts+element ...
vue3.0+ts+element-plus多页签应用模板：侧边导航菜单（上）
目录系列文章一.先说点什么二.从问题开始,侧边栏是干啥的? 三.封装组件之思路分析四.封装菜单部分 1. MenuItem 2. ModuleMenu 系列文章 vue3.0+ts+eleme ...
文档管理工具（支持http、websocket、富文本、markdown）
真正的大师,永远都怀着一颗学徒的心! 一.项目简介文档管理工具(支持http.websocket.富文本.markdown) 二.实现功能支持markdown语法支持JSON测试支持TXT测试 ...
vue3.0 + ts H5拍照组件
vue3.0 + ts H5拍照组件实现了简单的拍照功能,拍照成功返回文件对象.(待更新,裁剪,缩放,旋转) 效果图使用通过npm下载 npm i wl-easy-ui 或者通过yarn add ...

支持vue3.0+ts 的富文本记录

前言

富文本Vue-Quill-Editor

富文本wangeditor

富文本数据处理

支持vue3.0+ts 的富文本记录相关推荐

最新文章

热门文章