当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 dialog
    if (meta.filetype == 'file') {
      callback('mypage.html', { text: 'My text' })
    }

    // Provide image and alt text for the image dialog
    if (meta.filetype == 'image') {
      callback('myimage.jpg', { alt: 'My alt text' })
    }

    // Provide alternative source and posted for the media dialog
    if (meta.filetype == 'media') {
      callback('movie.mp4', { source2: 'alt.ogg', poster: 'image.jpg' })
    }
  }
})
//监听外部传递进来的的数据变化
watch(
  () => props.value,
  () => {
    myValue.value = props.value
    emits('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

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

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

相关文章

数据结构 / day01 作业

数据结构 / day01 作业

1.定义结构体数组存储5个学生的信息&#xff1a;姓名&#xff0c;年龄&#xff0c;性别 定义函数实现输入&#xff0c;要求形参使用结构体指针接收 函数实现5个学生年龄排序(注意对年龄排序时&#xff0c;交换的是所有信息) 定义函数实现输出&#xff0c;要求形参使用结构体…
阅读更多...
学习知识随笔（Django）

学习知识随笔（Django）

文章目录 MVC与MTV模型MVCMTV Django目录结构Django请求生命周期流程图路由控制路由是什么路由匹配反向解析路由分发 视图层视图函数语法reqeust对象属性reqeust对象方法 MVC与MTV模型 MVC Web服务器开发领域里著名的MVC模式&#xff0c;所谓MVC就是把Web应用分为模型(M&#…
阅读更多...
大模型的实践应用9-利用LoRA方法在单个GPU上微调FLAN-T5模型的过程讲解与实现

大模型的实践应用9-利用LoRA方法在单个GPU上微调FLAN-T5模型的过程讲解与实现

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下大模型的实践应用9-利用LoRA方法在单个GPU上微调FLAN-T5模型的过程讲解与实现&#xff0c;文本我们将向您展示如何应用大型语言模型的低秩适应(LoRA)在单个GPU上微调FLAN-T5 XXL(110 亿个参数)模型。我们将利用Tran…
阅读更多...
RF Power Generator射频源维修射频匹配器维修

RF Power Generator射频源维修射频匹配器维修

RF MATCH射频匹配器维修范围有ADVANCED射频电源匹配器&#xff1b;ASTEX射频电源匹配器&#xff1b;NP射频电源匹配器&#xff1b;ASTECH射频电源匹配器&#xff1b;SEREN射频电源匹配器&#xff1b;射频电源匹配器&#xff1b;KYOSAN射频电源匹配器&#xff1b;ENI射频电源匹配…
阅读更多...
Matlab 点云曲率计算（之二）

Matlab 点云曲率计算（之二）

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 之前已经讨论过许多关于计算曲率的问题，这里使用一个通过拟合三次曲面方程的方式来计算曲率，计算过程如下图所示： 二、实现代码 %********
阅读更多...
EfficientViT：具有级联群体注意力的内存高效Transformer

EfficientViT：具有级联群体注意力的内存高效Transformer

EfficientViT: Memory Efficient Vision Transformer with Cascaded Group Attention 1、介绍2、使用 Vision Transformer 加快速度2.1 内存效率2.2 计算效率2.3 参数效率 3、Efficient Vision Transformer3.1 EfficientViT 构建模块3.3 EfficientViT 网络架构 4、实验5、结论 …
阅读更多...
Appium自动化测试：sdk版本和手机版本不兼容你就这样做，分分钟解决问题

Appium自动化测试：sdk版本和手机版本不兼容你就这样做，分分钟解决问题

使用pythonappium执行自动化测试脚本提示报错 环境&#xff1a;python3.7以上&#xff0c;appium1.21.0&#xff1b;设备&#xff1a;华为max8真机 报错信息&#xff1a; android.intent.category.LAUNCHER -f 0x10200000 exited with code 4294967295; Stderr: Security ex…
阅读更多...
Toast UI Editor上传图片到Flask

Toast UI Editor上传图片到Flask

Toast UI Editor国内文档几乎搜不到&#xff0c;国外文档也写得不是特别项目&#xff0c;没有太多举例的demo。一开始选择使用这个就是因为UI好看。不过看看源码把思路滤清了。 他会给把图片转成Base64&#xff0c;到时候发表单直接丢过去就行了&#xff0c;blob这个参数能拿到…
阅读更多...
RK3568笔记六：基于Yolov8的训练及部署

RK3568笔记六：基于Yolov8的训练及部署

若该文为原创文章&#xff0c;转载请注明原文出处。 基于Yolov8的训练及部署&#xff0c;参考鲁班猫的手册训练自己的数据集部署到RK3568,用的是正点的板子。 1、 使用 conda 创建虚拟环境 conda create -n yolov8 python3.8 ​ conda activate yolov8 2、 安装 pytorch 等…
阅读更多...
UserWarning: FigureCanvasAgg is non-interactive, and thus cannot be shown

UserWarning: FigureCanvasAgg is non-interactive, and thus cannot be shown

一个奇怪的BUG 这个代码会报下面的错&#xff1a; 但是把模型导入部分注释掉之后就没有这个错误了&#xff08;第六行&#xff09; 解决办法&#xff1a;在模型加载后面加入一行代码 matplotlib.use( TkAgg’)&#xff0c;这个bug的问题就是模型加载改变了matplotlib使用的终端…
阅读更多...
Blazor Table 实现获取当前选中行的功能

Blazor Table 实现获取当前选中行的功能

这里需要使用到OnClickRowCallBack事件 后台使用案例
阅读更多...
Unity-链接MySql5.7

Unity-链接MySql5.7

链接MySql5.7 前言&#xff1a; 为什么不选择最新的MySQL8.0或者MySQL8.2呢&#xff0c;实际发现&#xff0c;如果使用这两个版本&#xff0c;虽然能够用同样的方法找到合适的dll&#xff0c;但是在编写代码的过程中往往会卡死&#xff0c;非常的影响效率&#xff0c;因此放弃…
阅读更多...
Linux环境安装Java,Tomcat，Mysql,

Linux环境安装Java,Tomcat，Mysql,

1、Java的安装 载 jdk1.8 注&#xff1a;此处 CentOS7 是64位&#xff0c;所以下载的是&#xff1a;Linux x64&#xff0c; 文件类型为 tar.gz 的文件 JDK 官网地址&#xff1a;https://www.oracle.com/java/ cd /usr/local/ mkdir jdk cd jdk/tar -xvf jdk-8u202-linux-x64.…
阅读更多...
winfrom 插件 ICSharpCode.SharpDevelop 使用 修改图标配置

winfrom 插件 ICSharpCode.SharpDevelop 使用 修改图标配置

1.需要安装 SharpDevelop 这个IDE对应的开发小工具 &#xff0c; 下载地址 SharpDevelop download | SourceForge.net 2.安装以及设置中文等其他的条件对应操作步骤&#xff0c;参考 SharpDevelop安装与配置 3.修改 图标配置 找到对应的 BitmapResources.resources 文件…
阅读更多...
Linux常见指令基础知识

Linux常见指令基础知识

目录 初始Linux操作系统 Linux背景&#xff1a; 开源 &#xff1a; 发行版本&#xff1a; ​编辑 OS概念&#xff0c;定位&#xff1a; 使用 XShell 远程登录 Linux Linux相关知识 文件是什么&#xff1f; 路径分隔符 &#xff08;.&#xff09; 和 &#xff08;. .&…
阅读更多...
小功能实现（十八）生成kml文件

小功能实现（十八）生成kml文件

引入依赖 <!--解析、生成kml文件类--><dependency><groupId>de.micromata.jak</groupId><artifactId>JavaAPIforKml</artifactId><version>2.2.0</version></dependency>使用方法 注意&#xff1a;需要什么内容可自行添…
阅读更多...
为第一个原生Spring5应用程序添加上Log4J日志框架！

为第一个原生Spring5应用程序添加上Log4J日志框架！

&#x1f609;&#x1f609; 学习交流群&#xff1a; ✅✅1&#xff1a;这是孙哥suns给大家的福利&#xff01; ✨✨2&#xff1a;我们免费分享Netty、Dubbo、k8s、Mybatis、Spring...应用和源码级别的视频资料 &#x1f96d;&#x1f96d;3&#xff1a;QQ群&#xff1a;583783…
阅读更多...
leetcode做题笔记1457. 二叉树中的伪回文路径

leetcode做题笔记1457. 二叉树中的伪回文路径

给你一棵二叉树&#xff0c;每个节点的值为 1 到 9 。我们称二叉树中的一条路径是 「伪回文」的&#xff0c;当它满足&#xff1a;路径经过的所有节点值的排列中&#xff0c;存在一个回文序列。 请你返回从根到叶子节点的所有路径中 伪回文 路径的数目。 示例 1&#xff1a; 输…
阅读更多...
操作系统CLOCK算法

操作系统CLOCK算法

操作系统时钟(CLOCK)置换算法_时钟置换算法-CSDN博客 前七步相同 第八步的时候 发现页面在内存中 标记位变成1 但是指针不需要移动。
阅读更多...
【数据结构】树与二叉树（廿四）：树搜索指定数据域的结点（算法FindTarget）

【数据结构】树与二叉树（廿四）：树搜索指定数据域的结点（算法FindTarget）

文章目录 5.3.1 树的存储结构5. 左儿子右兄弟链接结构 5.3.2 获取结点的算法1. 获取大儿子、大兄弟结点2. 搜索给定结点的父亲3. 搜索指定数据域的结点a. 算法FindTargetb. 算法解析c. 代码实现a. 使用指向指针的指针b. 直接返回找到的节点 4. 代码整合 5.3.1 树的存储结构 5.…
阅读更多...
最新文章

Copyright @ 2022~2023