在vue项目中使用富文本编辑器 - tinymce

橘式不妙

已于 2024-07-03 08:21:40 修改

阅读量348

点赞数 5

分类专栏： vue 富文本编辑器文章标签： vue.js 前端 javascript 编辑器

于 2024-06-29 15:43:49 首次发布

本文链接：https://blog.csdn.net/weixin_50849253/article/details/140065222

版权

vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

富文本编辑器

3 篇文章 0 订阅

订阅专栏

摘要

在vue项目中使用tinymce富文本编辑器。这款编辑器比较轻量级、界面简洁、功能丰富，主要是易扩展。

使用步骤

安装tinymce官方地址

1.安装tinymce

# pnpm命令是npm命令的增强，p是proformance的意思，高性能
pnpm install --save "@tinymce/tinymce-vue@^5"

2.引入tinymce的mainjs

tinymce官方提供了将tinymce插件引入项目的多种方式，其中最简便的是使用官方的api-key，但是这种方式不适合用在国内，因为api-key的方式是自动引入mainjs，由于网络防火墙的原因，这个mainjs的请求会超时。所以最好使用将tinymce的最小资源包下载到本地再引入的方式。

2.1下载最小资源包

tinymce最小资源包下载地址
一般按官方安装文档都是下载最新版本的，所以在最小资源包下载地址直接下载最新的即可
下载完成后将资源包放在项目可访问的目录下，如项目的/src/assets/，一般vue项目都会有这个目录

2.2引入mainjs

不使用api-key的方式就需要自行在项目中引入mainjs，vue项目中只需要在/index.html中引入即可

<!-- vue项目根目录下的/index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/cat.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="/src/assets/js/tinymce/js/tinymce/tinymce.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

3.使用编辑器

之后可以在任何需要的组件中使用富文本编辑器了。首先引入Editor，然后在模板中使用Editor组件

<template>
<Editor ref="commodityDetailRef" initial-value="Welcome to TinyMCE!"></Editor>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Editor from '@tinymce/tinymce-vue'
const commodityDetailRef = ref()
</script>

4.获取编辑器的内容

使用vue的ref特性获取到编辑器dom实例，之后就可以使用tinymce的API了

// 获取编辑器的文本内容，包含dom结构
commodityDetailRef.value.getEditor().getContent()

其他特性

文件上传

通常文件上传包含图片、办公文件，tinymce对图片的上传有很好的支持，但是上传办公文件时却比较麻烦。

上传图片

1.引入上传图片插件

使用下面的配置让富文本编辑器支持上传图片的功能

plugins: "image fullscreen"

2.实现上传逻辑

上传图片的完整配置

// 定义配置信息
editorInit: {
        plugins: "image fullscreen",
        // 实现上传逻辑
        images_upload_handler: async (blobInfo: any, success: any) => {
            console.log("upload image ", blobInfo, success)
            const formData = new FormData();
            // 可在此添加上传时需要的其他自定义的参数
            formData.append('file', blobInfo.blob());
            // 实现具体的上传逻辑
            const responseRs = await uploadImg(formData)
            // 模拟返回上传成功是的图片地址
           success(responseRs.data.url)
        }
}

3.将定义配置与编辑器元素绑定

通过编辑器元素的init属性就可以完成绑定

<template>
<Editor ref="commodityDetailRef" :init="state.editorConfig" initial-value="Welcome to TinyMCE!"></Editor>
</template>

完整代码

为Editor元素的init属性绑定配置好的上传配置

<template>
<Editor ref="commodityDetailRef" :init="state.editorConfig" initial-value="Welcome to TinyMCE!"></Editor>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Editor from '@tinymce/tinymce-vue'
const commodityDetailRef = ref()

const state = ref({
    editorConfig: {
        plugins: "image fullscreen",
        // 实现上传逻辑
        images_upload_handler: async (blobInfo: any, success: any) => {
            console.log("upload image ", blobInfo, success)
            const formData = new FormData();
            // 可在此添加上传时需要的其他自定义的参数
            formData.append('file', blobInfo.blob());
            // 实现具体的上传逻辑
            const responseRs = await uploadImg(formData)
            // 模拟返回上传成功是的图片地址
            success(responseRs.data.url)
        }
    }
})
</script>