推荐文章

摘要


在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>

问题合集

与element-plus框架搭配使用时可能出现菜单栏点击无响应的情况

现象描述


在使用element-plus框架的弹窗相关组件中引入tinymce编辑器，编辑器的菜单栏会出现无法点击的问题。

原因


编辑器在页面展示的优先级低于弹窗组件的优先级，也就是编辑器的z-index没有弹窗组件的优先级高。虽然弹窗中可以点击编辑器菜单栏，但是没有触发编辑器菜单栏。

解决方式

  1. 调整编辑器的样式z-index
  2. 那就别在弹窗中使用tinymce编辑器

# vue.js # 前端 # javascript # 编辑器
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

avatar 魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

avatar 魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r

avatar 魔乐社区