当TinyMCE富文本编辑器遇到Vue3+nuxt+ts项目,分享引入成功案例及过程中踩的那些坑

文章目录

    • 前言
    • 遇到的坑
    • 插入上传图片插件
    • 上传图片请求与返回值处理
    • 本地文件引入报错解决
    • 源码

前言

如果你的前端项目技术栈使用的是Vue3+nuxt+ts,并且老大让你集成一下那个传说中非常丝滑的TinyMCE富文本编辑器,那么恭喜你和我一样中大奖了。
网上找了好久都没有找到同类型且靠谱的实现方案,于是就自己着手研究文档并踩着坑解决了。
先贴一下由莫若卿大佬翻译的TinyMCE中文文档地址:

TinyMCE中文文档中文手册

懒得看过程的直接跳到最下方复制组件源码后按自己项目微调即可

遇到的坑

按照文档把TinyMCE组件写好了,引用到功能页上……哎,我辣么大个富文本编辑器嘞???
在这里插入图片描述
明明是按照和网上一模一样的方式引入的,为什么编辑器不见了呢?
来看一下控制台报错:

在这里插入图片描述
是汉化文件和css文件引入失败?可我的init参数和本地文件路径明明是正确的啊

在这里插入图片描述
既然init不行那就impot手动引入

import 'tinymce/langs/zh-Hans'
import 'tinymce/skins/ui/oxide/skin.min.css'  
import 'tinymce/skins/ui/oxide/content.min.css'
import 'tinymce/skins/content/default/content.css'
// PS:网上说这些是必须写的否则富文本显示不出来,其实是不对的,这里根本不需要手动引入,我们后续来说原因

在这里插入图片描述
手动引入后富文本编辑框正常显示了,但控制台还是会报相同的错,而且中文化文件也没生效。


插入上传图片插件

如果是偷工减料得过且过的摸鱼仔做到这里就能交差了,这下巧了,那不就是我么~(雾

但是嘞,还缺了一个很重要的东西,那就是图片上传按钮啊!

在这里插入图片描述
这个简单,把image加到toolbar里就行了呗,于是我左加右加,这磨人的小按钮就是不出来啊T_T

情急之下决定去好好研究文档了,才发现需要image需要先在plugins里声明引入才行

  plugins: {type: [String, Array],default: 'lists table image'}, //必填toolbar: {type: [String, Array],default: 'codesample bold italic underline alignleft aligncenter alignright alignjustify image | undo redo | formatselect | fontselect | fontsizeselect | forecolor backcolor | bullist numlist outdent indent | lists link table code | removeformat '} //必填

上传图片请求与返回值处理

然后我们开启文件上传的微服务后来测试一下,我去,这返回的是什么东西

在这里插入图片描述

原来是图片上传接口的返回值处理有问题,那就改一下CV下来的方法呗

  //图片上传custom_images_upload: true,images_upload_handler: (blobInfo, progress) =>new Promise((resolve, reject) => {if (blobInfo.blob().size / 1024 / 1024 > 2) {reject({ message: '上传失败,图片大小请控制在 2M 以内', remove: true })return} else {const ph = import.meta.env.VITE_BASE_PATH + ':' + import.meta.env.VITE_SERVER_PORT + '/'let params = new FormData()params.append('file', blobInfo.blob())let config = {headers: {'Content-Type': 'multipart/form-data'}}axios.post('/api/file/upload', params, config) // 第一个参数是请求url,因为是demo就随便写了,项目中记得拼接环境变量.then(res => {if (res.data.code == 200) {console.log(res)// resolve(ph + res.data.msg) // 注意看返回值的结构,因为少写一层data找了几分钟resolve(res.data.data.url) //上传成功,在成功函数里填入图片路径} else {reject('HTTP Error: 上传失败' + res.data.code)return}}).catch(() => {reject('上传出错,服务器开小差了呢')return})}}),

在这里插入图片描述
图片上传终于弄成功了,蚌埠住了捏
在这里插入图片描述


本地文件引入报错解决

emmm既然都弄到这了,就把页面报错的bug也解决了呗

再看一眼报错,引用本地文件路径好像也没错啊

在这里插入图片描述
等等……好像有什么不对劲,原来是你,nuxt!在这里插入图片描述

由于nuxt配置的原因,本地资源引入路径要加个/_nuxt前缀,之前也被坑过……

那就正好按照TinyMCE文档上写的统一规定一个base_url好了
在这里插入图片描述
这样一来手动import引入的那几行就可以删掉了,再搞个暗夜皮肤,帅!

  base_url: '/_nuxt/assets/tinymce',language: 'zh-Hans', //语言skin: 'oxide-dark', // 暗夜皮肤// language_url: '/_nuxt/assets/tinymce/langs/zh-Hans.js', // 语言包的路径,具体路径看自己的项目,文档后面附上中文js文件// skin_url: '/_nuxt/assets/tinymce/skins/ui/oxide', // skin路径,具体路径看自己的项目

在这里插入图片描述
中文化也正常显示了

至此,大功告成~


源码

TEditor.client.vue组件

html:

<template><editor :id="tinymceId" v-model="myValue" :init="init" :disabled="disabled"></editor>
</template>

js:

<script setup lang="ts">
import Editor from '@tinymce/tinymce-vue'//JS部分
//在js中引入所需的主题和组件
import tinymce from 'tinymce/tinymce'
import 'tinymce/skins/content/default/content.css'
import 'tinymce/themes/silver'
import 'tinymce/themes/silver/theme'
// import 'tinymce/langs/zh-Hans.js'
import 'tinymce/icons/default' //引入编辑器图标icon,不引入则不显示对应图标
import 'tinymce/models/dom' // 这里是个坑 一定要引入//在TinyMce.vue中接着引入相关插件
import 'tinymce/icons/default/icons'
import 'tinymce/plugins/image' // 插入上传图片插件
import 'tinymce/plugins/media' // 插入视频插件
import 'tinymce/plugins/table' // 插入表格插件
import 'tinymce/plugins/lists' // 列表插件
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/code' // 源码
// import 'tinymce/langs/zh-Hans' // 中文
// import 'tinymce/skins/ui/oxide/skin.min.css'
// import 'tinymce/skins/ui/oxide/content.min.css'
// import 'tinymce/skins/content/default/content.css'
// import "tinymce/plugins/fullscreen" //全屏//接下来定义编辑器所需要的插件数据
import { reactive, ref } from 'vue'
import { onMounted, defineEmits, watch } from 'vue'
import axios from 'axios'
// import { updateImg } from '@/api/order/order'
const emits = defineEmits(['getContent'])
//这里我选择将数据定义在props里面,方便在不同的页面也可以配置出不同的编辑器,当然也可以直接在组件中直接定义
const props = defineProps({value: {type: String,default: () => {return ''}},baseUrl: {type: String,default: ''},disabled: {type: Boolean,default: false},plugins: {type: [String, Array],default: 'lists table image'}, //必填toolbar: {type: [String, Array],default: 'codesample bold italic underline alignleft aligncenter alignright alignjustify image | undo redo | formatselect | fontselect | fontsizeselect | forecolor backcolor | bullist numlist outdent indent | lists link table code | removeformat '} //必填
})
//用于接收外部传递进来的富文本
const myValue = ref(props.value)
const tinymceId = ref('vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''))
//定义一个对象 init初始化
const init = ref({selector: '#' + tinymceId.value, //富文本编辑器的id,// language_url: '/_nuxt/assets/tinymce/langs/zh-Hans.js', // 语言包的路径,具体路径看自己的项目,文档后面附上中文js文件base_url: '/_nuxt/assets/tinymce',language: 'zh-Hans', //语言skin: 'oxide-dark', // 暗夜皮肤// skin_url: '/_nuxt/assets/tinymce/skins/ui/oxide', // skin路径,具体路径看自己的项目height: 400, //编辑器高度branding: false, //是否禁用“Powered by TinyMCE”menubar: true, //顶部菜单栏显示image_dimensions: false, //去除宽高属性plugins: props.plugins, //这里的数据是在props里面就定义好了的toolbar: props.toolbar, //这里的数据是在props里面就定义好了的font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;', //字体fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', //文字大小// paste_convert_word_fake_lists: false, // 插入word文档需要该属性paste_webkit_styles: 'all',paste_merge_formats: true,nonbreaking_force_tab: false,paste_auto_cleanup_on_paste: false,file_picker_types: 'file',content_css: '/_nuxt/assets/tinymce/skins/content/default/content.css', //以css文件方式自定义可编辑区域的css样式,css文件需自己创建并引入//图片上传custom_images_upload: true,images_upload_handler: (blobInfo, progress) =>new Promise((resolve, reject) => {if (blobInfo.blob().size / 1024 / 1024 > 2) {reject({ message: '上传失败,图片大小请控制在 2M 以内', remove: true })return} else {const ph = import.meta.env.VITE_BASE_PATH + ':' + import.meta.env.VITE_SERVER_PORT + '/'let params = new FormData()params.append('file', blobInfo.blob())let config = {headers: {'Content-Type': 'multipart/form-data'}}axios.post('/api/file/upload', params, config) // 第一个参数是请求url,因为是demo就随便写了,项目中记得拼接环境变量.then(res => {if (res.data.code == 200) {console.log(res)// resolve(ph + res.data.msg) // 注意看返回值的结构,因为少写一层data找了几分钟resolve(res.data.data.url) //上传成功,在成功函数里填入图片路径} else {reject('HTTP Error: 上传失败' + res.data.code)return}}).catch(() => {reject('上传出错,服务器开小差了呢')return})}}),// 文件上传file_picker_callback: (callback, value, meta) => {// Provide file and text for the link dialogif (meta.filetype == 'file') {callback('mypage.html', { text: 'My text' })}// Provide image and alt text for the image dialogif (meta.filetype == 'image') {callback('myimage.jpg', { alt: 'My alt text' })}// Provide alternative source and posted for the media dialogif (meta.filetype == 'media') {callback('movie.mp4', { source2: 'alt.ogg', poster: 'image.jpg' })}}
})
//监听外部传递进来的的数据变化
watch(() => props.value,() => {myValue.value = props.valueemits('getContent', myValue.value)}
)
//监听富文本中的数据变化
watch(() => myValue.value,() => {emits('getContent', myValue.value)}
)
//在onMounted中初始化编辑器
onMounted(() => {tinymce.init({})
})
</script>

若对您有帮助请麻烦给我的cloud-demo开源项目点个星哦~该组件在项目中也用到了,感兴趣的话可以拉下来玩一玩,THX!
项目仓库:https://gitee.com/Yuzaki-Nasa/nasa-cloud-vue3-travel-demo
NASA-cloud-Vue3-travelDemo

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

无人零售已成为新兴趋势

无人零售已成为新兴趋势 在新零售浪潮中&#xff0c;必然会涌现新的商业形态&#xff0c;而无人零售则是其中典型代表之一。传统零售受制于人力和场地等限制&#xff0c;消费者体验较差&#xff0c;如长时间排队、缓慢结账、距离过远等问题。而无人零售解决方案&#xff0c;包括…

绝地求生:成长型皮肤异色定价是否有些夸张?

大家好&#xff0c;我闲游盒小盒子&#xff01; 自从26.2更新上架回归的黑市中四款成长型皮肤以后&#xff0c;能看到社区里很多玩家都分享抽中了自己心仪的成长型皮肤。 但是对于异色很少有人去实装&#xff0c;大多数玩家都是选择去分解异色换取五张图纸然后追求升级原皮等级…

JVM GC算法

一, 垃圾回收分类: 按线程数分&#xff0c;可以分为串行垃圾回收器和并行垃圾回收器。 按工作模式分&#xff0c;可以分为并发垃圾回收器和独占式垃圾回收器 按碎片处理方式分&#xff0c;可以分为压缩式垃圾回收器和非压缩式垃圾回收器按工作的内存区间分&#xff0c;又可分为…

后台管理系统开源项目

最近项目没有什么事做&#xff0c;就自己整理&#xff0c;修改了一些vue2&#xff0c;react的后台管理系统项目&#xff0c;方便以后有需要可以直接提取&#xff0c;当然也方便了大家 vue2技术栈 lyl-vueProjectAdmin: vue2后台管理系统 react技术栈 lyl-reactAdminProject:…

《融合SCADA系统数据的天然气管道泄漏多源感知技术研究》误报数据识别模型开发

数据处理不作表述。因为我用的是处理后的数据&#xff0c;数据点这。 文章目录 工作内容1CC040VFD电流VFD转速压缩机转速反馈进出口差压 紧急截断阀开到位进出电动阀开到位发球筒电筒阀开到位收球筒电动阀开到位电动阀2005开到位越站阀开到位 工作内容2工作内容3 工作内容1 任…

【08】Python运算符

文章目录 1.算术运算符2.赋值运算符3.条件运算符4.逻辑运算符5.比较运算符6.运算符的优先级本期博客中,我们将学习python中常用的运算符的用法。              1.算术运算符 1.加法运算符(+): a = 10 b = 5 c = a + b print(c

08-学成在线项目中统一异常处理的规范

项目中的异常处理 规范异常类型 在Service类的业务方法中有很多的参数合法性校验,当请求参数不合法的时候会抛出异常,但此时异常信息只会在控制台输出,前端界面并不会提示用户 实际开发中前端和后端需要做一些约定: 一般将错误提示信息统一以json格式返回给前端,以HTTP状态码…

P9231 [蓝桥杯 2023 省 A] 平方差(拆分问题)

分析&#xff1a;x(yz)*(y-z); yz 与 y-z 同奇偶性&#xff08;x要么为奇数&#xff0c;要么为偶数&#xff09; 奇数&#xff1a;1 与 其本身 乘积 偶数&#xff1a;2 与 x/2 乘积(为4的倍数) #include<bit…

面试篇spark(spark core,spark sql,spark 优化)

一&#xff1a;为什么学习spark&#xff1f; 相比较map-reduce框架&#xff0c;spark的框架执行效率更加高效。 mapreduce的执行框架示意图。 spark执行框架示意图 spark的执行中间结果是存储在内存当中的&#xff0c;而hdfs的执行中间结果是存储在hdfs中的。所以在运算的时…

求和(打表题)

题目 打个表发现当 n 时答案为 p &#xff0c;否则为 1 &#xff0c;然后套板子。 #include <iostream> #include <algorithm> #include <vector> #include <cstring> #include <cmath>using namespace std;#define int long long using i64 …

卷积神经网络入门

1.卷积神经网络基本结构结构 卷积神经网络采用类似于动物视觉皮层组织中的神经元的连接模式&#xff0c;是一类包含卷积神经网络且具有深度结构的前馈神经网络。其基本结构如图2-1所示&#xff0c;大致包括&#xff1a;卷积层&#xff0c;激活函数&#xff0c;池化层&#xff…

Module build failed: Error: ENOENT: no such file or directory

前言 这个错误通常发生在Node.js 和 vue,js项目中&#xff0c;当你试图访问一个不存在的文件或目录时。在大多数情况下&#xff0c;这是因为你的代码试图打开一个不存在的文件&#xff0c;或者你的构建系统&#xff08;例如Webpack&#xff09;需要一个配置文件&#xff0c;但找…

<JavaDS> 二叉树遍历各种遍历方式的代码实现 -- 前序、中序、后序、层序遍历

目录 有以下二叉树&#xff1a; 一、递归 1.1 前序遍历-递归 1.2 中序遍历-递归 1.3 后序遍历-递归 二、递归--使用链表 2.1 前序遍历-递归-返回链表 2.2 中序遍历-递归-返回链表 2.3 后序遍历-递归-返回链表 三、迭代--使用栈 3.1 前序遍历-迭代-使用栈 3.2 中序遍…

服务器bash进程占用cpu过多疑似中挖矿病毒记录

发现过程 因为我有使用conky的习惯&#xff0c;也就是在桌面上会显示cpu和内存的占用情况&#xff0c;由于服务器不止我一个人使用&#xff0c;最近发现好几次我同学的账户下的bash进程占用特别多&#xff0c;问了他之后&#xff0c;他也说他几次都是没有使用过bash相关服务&a…

【LeetCode】每日一题 2023_11_28 设计前中后队列(数组/链表/双端队列)

文章目录 刷题前唠嗑题目&#xff1a;设计前中后队列题目描述代码与解题思路偷看大佬题解 结语 刷题前唠嗑 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01; 这道题的难度&#xff0c;才是我想象中的中等题的难度好吧&#xff0c;昨天那玩意对我来说还是太难了…

9.Spring 整合 Redis

引入依赖&#xff1a;spring-boot-starter-data-redis配置 Redis&#xff1a;配置数据库参数、编写配置类&#xff0c;构造 RedisTemplate访问 Redis&#xff1a; redisTemplate.opsForValue() redisTemplate.opsForHash() redisTemplate.opsForList() redisTemplate.opsForSe…

Vue3-toRaw 和 markRaw 函数

Vue3-toRaw 和 markRaw 函数 toRaw(转换为原始)&#xff1a;将响应式对象转换为普通对象&#xff0c;只适用于 reactive 生成的响应式对象。markRaw(标记为原始)&#xff1a;标记某个对象&#xff0c;让这个对象永远都不具备响应式。一些集成的第三方库&#xff0c;会有大量的…

UE4 UE5 使用SVN控制

关键概念&#xff1a;虚幻引擎中使用SVN&#xff0c;帮助团队成员共享资源。 1. UE4/UE5项目文件 如果不需要编译的中间缓存&#xff0c;则删除&#xff1a; DerivedDataCache、Intermediate、Saved 三个文件夹 2.更新、上传

C++单调向量(栈):好子数组的最大分数

作者推荐 利用广度优先或模拟解决米诺骨牌 题目 给你一个整数数组 nums &#xff08;下标从 0 开始&#xff09;和一个整数 k 。 一个子数组 (i, j) 的 分数 定义为 min(nums[i], nums[i1], …, nums[j]) * (j - i 1) 。一个 好 子数组的两个端点下标需要满足 i < k <…

【LangChain实战】LangChain快速入门

1、什么是大语言模型 大语言模型是一种人工智能模型&#xff0c;通常使用深度学习技术&#xff0c;比如神经网络&#xff0c;来理解和生成人类语言。这些模型的“大”在于它们的参数数量非常多&#xff0c;可以达到数十亿甚至更多&#xff0c;这使得它们能够理解和生成高度复杂…