【Vue】vue项目中使用tinymce富文本组件（@tinymce/tinymce-vue）

news2025/10/31 11:45:49

【Vue】vue项目中使用tinymce富文本组件（@tinymce/tinymce-vue）

  • 一、安装
  • 二、前期准备工作
    • 1、去[官网](https://www.tiny.cloud/get-tiny/language-packages/)下载语言包；
    • 2、将下载的语言包复制到项目中的assets（存放路径您随意）下；
    • 3、到node_modules中找到tinymce对应的文件夹，将其中的skins文件夹复制到static（存放路径您随意）中；
    • 4、如果需要支持粘贴保留原格式，将powerpaste文件夹复制到static（存放路径您随意）中；
  • 三、插件使用&配置说明
    • 1、基本功能（不需要配置toolbar&plugins）
    • 2、扩展插件功能
    • 3、踩坑点
  • 四、效果
    • 1、基础功能（即不需配置toolbar、plugins）
    • 2、进阶效果

一、安装

npm install tinymce
npm install @tinymce/tinymce-vue

二、前期准备工作

1、去官网下载语言包；

在这里插入图片描述

2、将下载的语言包复制到项目中的assets（存放路径您随意）下；

在这里插入图片描述

3、到node_modules中找到tinymce对应的文件夹，将其中的skins文件夹复制到static（存放路径您随意）中；

4、如果需要支持粘贴保留原格式，将powerpaste文件夹复制到static（存放路径您随意）中；

powerpaste文件夹提取链接：https://pan.baidu.com/s/1Y7ziHe0Rgm2n5r1XcVEmNg
提取码: xcbz
在这里插入图片描述

三、插件使用&配置说明

1、基本功能（不需要配置toolbar&plugins）

toolbar描述
newdocument创建一个新文档
undo撤回
redo恢复
visualaid网格线
cut剪切
copy复制
paste粘贴
selectall全选
bold加粗
italic斜体
removeformat清除格式
alignright右对齐
alignjustify两边对齐
outdent减少缩进
indent增加缩进
forecolor前景色
backcolor背景色
fontsizeselect字号大小
formatselect标题大小
underline下划线
strikethrough删除线
subscript下标
superscript上标
superscript上标
在node_modules/tinymce/plugins目录中查看其他插件…

2、扩展插件功能

除了以上的基本功能，TinyMCE编辑器还支持插件扩展，tinymce 通过添加插件plugins的方式来添加功能，在添加之前我们需要先来引入相应的插件，引入插件之后我们就可以在init中重新初始化下对应的toolbar（工具栏图标）和plugins（对应的插件组件）属性

toolbar插件引入(toolbar)描述
pastetextimport “tinymce/plugins/paste”;粘贴为纯文本
powerpasteimport “tinymce/plugins/powerpaste”;复制粘贴保留原格式
previewimport “tinymce/plugins/preview”;预览
codeimport “tinymce/plugins/code”;编辑源码
imageimport “tinymce/plugins/image”;插入图片
imageimport “tinymce/plugins/imagetools”;编辑图片
-import “tinymce/plugins/media”;插入视频
linkimport “tinymce/plugins/link”;超链接
previewimport “tinymce/plugins/preview”;预览
codeimport “tinymce/plugins/template”;模板
inserttableimport “tinymce/plugins/table”;插入表格
tablepropsimport “tinymce/plugins/table”;配置并插入表格
deletetableimport “tinymce/plugins/table”;删除表格
cellimport “tinymce/plugins/table”;表格单元配置
rowimport “tinymce/plugins/table”;表格行配置
columnimport “tinymce/plugins/table”;表格列配置
-import “tinymce/plugins/advlist”;高级列表
bullistimport “tinymce/plugins/lists”;项目符号
numlistimport “tinymce/plugins/lists”;编号列表
-在node_modules/tinymce/plugins目录中查看其他插件…
<template>
  <div>
    <editor :id="tinymceId" :init="init">
  </div>
</template>
<script>
// 导入富文本
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default"; //富文本样式
// 配置富文本
import "tinymce/plugins/table";
import "tinymce/plugins/image";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/autoresize";
import "tinymce/plugins/advlist"; //高级列表
import "tinymce/plugins/paste"; //可复制
import "tinymce/plugins/link";
import "tinymce/themes/silver/theme.min.js"; //引入富文本的主要脚本
import "tinymce/skins/ui/oxide/skin.min.css"; //富文本样式
const toolbar =
  "  undo redo restoredraft | fontselect fontsizeselect styleselect forecolor backcolor bold italic underline strikethrough  anchor link | alignleft aligncenter alignright alignjustify outdent indent lineheight| \
table tablemergecells  image  charmap emoticons hr pagebreak |bullist numlist | blockquote subscript superscript removeformat | \
insertdatetime print preview | fullscreen | bdmap indent2em  formatpainter axupimgs";
const plugins =
  "powerpaste autoresize print paste preview searchreplace autolink directionality visualblocks visualchars fullscreen image imagetools template  codesample table  charmap hr pagebreak nonbreaking anchor link insertdatetime advlist lists wordcount  textpattern help emoticons autosave ";
const fonts = [
  "宋体=宋体",
  "微软雅黑=微软雅黑",
  "新宋体=新宋体",
  "黑体=黑体",
  "楷体=楷体",
  "隶书=隶书",
  "Courier New=courier new,courier",
  "AkrutiKndPadmini=Akpdmi-n",
  "Andale Mono=andale mono,times",
  "Arial=arial,helvetica,sans-serif",
  "Arial Black=arial black,avant garde",
  "Book Antiqua=book antiqua,palatino",
  "Comic Sans MS=comic sans ms,sans-serif",
  "Courier New=courier new,courier",
  "Georgia=georgia,palatino",
  "Helvetica=helvetica",
  "Impact=impact,chicago",
  "Symbol=symbol",
  "Tahoma=tahoma,arial,helvetica,sans-serif",
  "Terminal=terminal,monaco",
  "Times New Roman=times new roman,times",
  "Trebuchet MS=trebuchet ms,geneva",
  "Verdana=verdana,geneva",
  "Webdings=webdings",
  "Wingdings=wingdings,zapf dingbats",
];
export default {
  components: { Editor },
  data() {
    return {
      tinymceId:
        "vue-tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + ""), //富文本编辑器的id,
      init: {
        language_url: require("@/assets/langs/zh_CN.js"), // 语言包的路径，具体路径看自己的项目（前期工作请下载好语言包）
        language: "zh_CN",
        fontsize_formats:
          "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", //字体大小
        font_formats: fonts.join(";"),//字体
        setup: function (editor) {
          //设置默认字体样式
          editor.on("init", function (e) {
            this.getBody().style.fontFamily = "宋体";
          });
        },
        min_height: 300,//编辑器最小高度
        statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        //主题样式路径
        skin_url:
         (process.env.API_ROOT == "//xx.woa.com/wxgame"
            ? "//xx.woa.com/wxgame"
            : process.env.API_ROOT == "//xx.woa.com/wxgame-test"
            ?"//xx.woa.com/wxgame-test"
            : "") + "/static/skins/ui/oxide",// 必选 skin路径，具体路径看自己的项目
          //为编辑区指定css文件
          //  content_css:"./static/css/content.css",//一般我们这里都是直接获取路径是没有问题的，但是有坑点，往下看会有解释原因,skin_url,powerpaste同理
          //正确写法，根据自己的环境判断拼接根路径
          // (process.env.API_ROOT == 测试环境路径
          //  ? 测试环境路径
          // : process.env.API_ROOT == 现网环境路径
          //  ? 现网环境路径
          // : "") 
        content_css:
          (process.env.API_ROOT == "//xx.woa.com/wxgame"
            ? "//xx.woa.com/wxgame"
            : process.env.API_ROOT == "//xx.woa.com/wxgame-test"
            ?"//xx.woa.com/wxgame-test"
            : "") + "/static/css/content.css",
        // 添加复制可保留原格式扩展插件开始
        external_plugins: {
        //powerpaste 路径
          powerpaste:
            (process.env.API_ROOT == "//xx.woa.com/wxgame"
            ? "//xx.woa.com/wxgame"
            : process.env.API_ROOT == "//xx.woa.com/wxgame-test"
            ?"//xx.woa.com/wxgame-test"
            : "") + "/static/powerpaste/plugin.min.js",
        },
        powerpaste_word_import: "propmt", // 参数可以是propmt, merge, clear，效果自行切换对比
        powerpaste_html_import: "propmt", // propmt, merge, clear
        powerpaste_allow_local_images: true,
        // 添加复制可保留原格式扩展插件结束
        image_dimensions: true, // 保存图片的时候可以设置大小
        //表格默认样式
        table_default_styles: {
          "line-height": "47px",
          "border-collapse": "collapse",
          width: "100%",
          "border-color": "#EBEEF5",
          "box-sizing": " border-box",
        },
        plugins: plugins,
        toolbar: toolbar,
      },
    };
  },
  mounted() {
    tinymce.init({});
  },
};
</script>

3、踩坑点

  • 踩坑点：开发环境测试无问题，等项目打包上线后，发现skin_url、content_css和powerpasteurl不生效；
  • 原因：打包后路径不对，自己根据自己的项目环境进行拼接url路径；

四、效果

1、基础功能（即不需配置toolbar、plugins）

在这里插入图片描述

2、进阶效果

在这里插入图片描述
最后，如果帮到您
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SAP的FAGLGVTR执行出现视图名称FGLV_BCF_ALLB不存在

SAP的FAGLGVTR执行出现视图名称FGLV_BCF_ALLB不存在

这个问题找了很久没有找到问题所在&#xff0c;查阅了很多资料也没有 执行完FAGLGVTR出现视图dump&#xff0c;原因是CB的增强字段不知道什么原因在视图没有保持一致 往前面溯源的时候 FGLV_BCF_ALLB10 FGLV_BCF_PER0B FGLV_BCF_PER0B10 FGLV_BCF_PER0 前面FGLV_BCF_…
阅读更多...
三子棋游戏小课堂

三子棋游戏小课堂

&#x1fa90;&#x1fa90;&#x1fa90;欢迎来到程序员餐厅&#x1f4ab;&#x1f4ab;&#x1f4ab; 今天的主菜是&#xff0c;C语言实现的三子棋小游戏&#xff0c; 所属专栏&#xff1a; C语言知识点 主厨的主页&#xff1a;Chef‘s blog 前言&…
阅读更多...
SpringBoot集成H2数据库

SpringBoot集成H2数据库

1&#xff09;添加H2的依赖 <dependency><groupId>com.h2database</groupId><artifactId>h2</artifactId><scope>compile</scope> </dependency>2&#xff09;添加连接配置&#xff0c;启用web控制台 spring:datasource:url…
阅读更多...
短信验证码接口被恶意攻击了该怎么办？

短信验证码接口被恶意攻击了该怎么办？

在企业运行的时候&#xff0c;安全意识和风险防范机制一定要做好。在2019年SUBMAIL短信平台就有几个客户的短信验证码接口遭到了恶意攻击&#xff0c;如果没有做好防范就会造成一定程度的损失。 那么&#xff0c;当短信验证码接口被恶意攻击的时候&#xff0c;该怎么办呢&#…
阅读更多...
【OCR软件进化史】文字、表格、公式图片识别并与ChatGPT交互

【OCR软件进化史】文字、表格、公式图片识别并与ChatGPT交互

第1年 由于日常工作需要大量的文本处理&#xff0c;身为一个全栈pythoner是绝不允许手动复制粘贴。 于是&#xff0c;在2021年&#xff0c;封装了第1版的文字、表格、公式图片识别工具&#xff08;第1版&#xff09;&#xff1a; 第1版做的比较粗糙&#xff0c;就是封装了百度…
阅读更多...
STC8G1K17A点灯

STC8G1K17A点灯

目录 1设计目的 2STC8G1K17A介绍 3代码实现 4效果测试 1设计目的 通用的STC89C52单片机由于封装太大&#xff0c;而且还需要外加晶振才能工作&#xff0c;对于一些要求不高的场合&#xff0c;就显得很笨重&#xff0c;所以&#xff0c;此次设计就是寻找一个代替产品&#x…
阅读更多...
Kotlin 协程：用源码来理解 ‘viewModelScope‘

Kotlin 协程：用源码来理解 ‘viewModelScope‘

Kotlin 协程&#xff1a;用源码来理解 ‘viewModelScope’ Kotlin 协程是 Kotlin 语言的一大特色&#xff0c;它让异步编程变得更简单。在 Android 开发中&#xff0c;我们经常需要在后台线程执行耗时操作&#xff0c;例如网络请求或数据库查询&#xff0c;然后在主线程更新 UI…
阅读更多...
PHP的线程安全与非线程安全模式选哪个

PHP的线程安全与非线程安全模式选哪个

曾经初学PHP的时候也很困惑对线程安全与非线程安全模式这块环境的选择&#xff0c;也未能理解其中意。近来无意中看到一个教程对线程安全&#xff08;饿汉式&#xff09;&#xff0c;非线程安全&#xff08;懒汉式&#xff09;的描述&#xff0c;虽然觉得现在已经能够很明了透彻…
阅读更多...
Python算法题集_最大子数组和

Python算法题集_最大子数组和

本文为Python算法题集之一的代码示例 题目53&#xff1a;最大子数组和 说明&#xff1a;给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。…
阅读更多...
RS485自动收发电路震荡的问题

RS485自动收发电路震荡的问题

电路 设计初衷 电源5V 选择5V的原因&#xff0c;差分2.5V比1.5V可以提高传输能力 TTL输入 3.3V电平满足需求 TTL输出 4.5V了&#xff0c;MCU是3.3V平台 这样就分为两种情况 MCU接收端可以容忍5V输入 MCU接收端不可以容忍5V输入&#xff0c;就要进行电压转换&#xff0c;我这里使…
阅读更多...
【C++】STL优先级队列（priority_queue）

【C++】STL优先级队列（priority_queue）

priority_queue 基本介绍 priority_queue就是优先级队列。其头文件就是queue&#xff0c;但是队列和优先级队列关系不大&#xff0c;两个是不同的数据结构。但二者都是适配器&#xff0c;容器适配器。 优先级队列中存放的数据是有优先级的。 其内部有以下成员方法&#xff0c…
阅读更多...
跟着cherno手搓游戏引擎【17】整理代码、timestep和transform

跟着cherno手搓游戏引擎【17】整理代码、timestep和transform

这里就不分部走了&#xff0c;直接上代码。 全局&#xff1a; YOTO.h:添加renderer的头文件&#xff1a; #pragma once//用于YOTO APP#include "YOTO/Application.h" #include"YOTO/Layer.h" #include "YOTO/Log.h"#include"YOTO/Core/T…
阅读更多...
V2X，启动高增长引擎

V2X，启动高增长引擎

车载通讯的下一个新周期&#xff0c;毋庸置疑是V2X。从4G、5G再到C-V2X&#xff0c;是车载通讯逐步从信息娱乐、行车数据监控到万物互联的关键。 去年5月&#xff0c;全球车载通讯芯片巨头—高通公司宣布&#xff0c;与以色列车联网&#xff08;V2X&#xff09;芯片设计公司Aut…
阅读更多...
DevOps落地笔记-05|非功能需求：如何有效关注非功能需求

DevOps落地笔记-05|非功能需求：如何有效关注非功能需求

上一讲主要介绍了看板方法以及如何使用看板方法来解决软件研发过程中出现的团队过载、工作不均、任务延期等问题。通过学习前面几个课时介绍的知识&#xff0c;你的团队开始源源不断地交付用户价值。用户对交付的功能非常满意&#xff0c;但等到系统上线后经常出现服务不可用的…
阅读更多...
扣库的函数经验

扣库的函数经验

有的库确实可以提出来的 比如这个库 GitHub - intel/x86-simd-sort: C template library for high performance SIMD based sorting algorithms 根据自己的需要是可以&#xff0c;把内容抠出来的&#xff0c;重新build的。 我就自己新建了一个vs的工程&#xff0c;然后把源…
阅读更多...
将java对象转换为json字符串的几种常用方法

将java对象转换为json字符串的几种常用方法

目录 1.关于json 2.实现方式 1.Gson 2.jackson 3.fastjson 3.与前端的联系 1.关于json JSON是一种轻量级的数据交换格式。它由Douglas Crockford在2001年创造。JSON的全称是JavaScript Object Notation&#xff0c;它是一种文本格式&#xff0c;可以轻松地在各种平台之间传…
阅读更多...
【GEE】基于GEE可视化和下载Landsat8 L2A数据（镶嵌、裁剪）

【GEE】基于GEE可视化和下载Landsat8 L2A数据（镶嵌、裁剪）

之前发过一篇使用GEE下载Landsat8的文章&#xff0c;然后有很多小伙伴私信我各种问题&#xff0c;如L1C、L2数据代码怎么修改&#xff0c;如何镶嵌&#xff0c;如何去云、 如何裁剪等一系列问题。正好快过年了&#xff0c;手头的事也没有多少了&#xff0c;所以这两天整理了一下…
阅读更多...
考研高数（数列极限之f(xn)和{xn}的关系）

考研高数（数列极限之f(xn)和{xn}的关系）

说白了&#xff0c;f(xn)是复合函数&#xff0c;是f(x)与{xn}的复合函数。&#xff08;复合函数的单调性有同增异减的原则&#xff09; 例题1&#xff1a;【可以用同增异减的原则&#xff0c;迅速解答&#xff08;有不合理的地方&#xff0c;请各位大佬指正&#xff01;&#…
阅读更多...
【操作系统】FileOutputStream的flush操作有时不生效

【操作系统】FileOutputStream的flush操作有时不生效

按照我们的理解&#xff1a;FileOutputStream的flush()方法的作用就是将缓冲区中的数据立即写入到文件中&#xff0c;即使缓冲区没有填满。这样可以确保数据的及时写入&#xff0c;而不需要等待缓冲区填满或者调用 close() 方法关闭流时才写入。真的是这样吗&#xff1f;&#…
阅读更多...
dv和ov通配符SSL证书的区别

dv和ov通配符SSL证书的区别

SSL数字证书是一种数字证书&#xff0c;可以保护网站传输数据安全以及对服务器身份进行验证&#xff0c;SSL证书有很多种&#xff0c;而通配符证书则是其中的一种特殊类型。SSL证书旗下的通配符SSL证书随着互联网的发展&#xff0c;颁发量也越来越多&#xff0c;为了使用户选择…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023