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

【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、进阶效果

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

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

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

相关文章

TensorFlow2实战-系列教程5：猫狗识别2------数据增强

TensorFlow2实战-系列教程5：猫狗识别2------数据增强

&#x1f9e1;&#x1f49b;&#x1f49a;TensorFlow2实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Jupyter Notebook中进行 本篇文章配套的代码资源已经上传 猫狗识别1 数据增强 猫狗识别2------数据增强 猫狗识别3------迁移学习 1、猫狗识别任…
阅读更多...
通过ETLCloud CDC构建高效数据管道解决方案

通过ETLCloud CDC构建高效数据管道解决方案

随着企业数据规模的快速增长和多样化的数据&#xff0c;如何高效地捕获、同步和处理数据成为了业务发展的关键。本文将介绍如何利用ETLCloud CDC技术&#xff0c;构建一套高效的CDC数据管道&#xff0c;实现实时数据同步和分析&#xff0c;助力企业实现数据驱动的业务发展。 一…
阅读更多...
基于Java SSM框架实现影院购票系统项目【项目源码+论文说明】

基于Java SSM框架实现影院购票系统项目【项目源码+论文说明】

基于java的SSM框架实现影院购票系统演示 摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#…
阅读更多...
Redis -- 单线程模型

Redis -- 单线程模型

失败是成功之母 ——法国作家巴尔扎克 目录 单线程模型 Redis为什么这么快 单线程模型 redis只使用一个线程&#xff0c;处理所有的命令请求&#xff0c;不是说redis服务器进场内部真的就只有一个线程&#xff0c;其实也有多个线程&#xff0c;那就是处理网络和io的线程。 R…
阅读更多...
有趣的css - 简约的动态关注按钮

有趣的css - 简约的动态关注按钮

页面效果 此效果主要使用 css 伪选择器配合 css content 属性&#xff0c;以及 transition(过渡)属性来实现一个简约的动态按钮效果。 此效果可适用于关注按钮、详情按钮等&#xff0c;增强用户交互体验。 核心代码部分&#xff0c;简要说明了写法思路&#xff0c;看 css 部分的…
阅读更多...
中移（苏州）软件技术有限公司面试问题与解答（8）—— coredump与vmcore（2）

中移（苏州）软件技术有限公司面试问题与解答（8）—— coredump与vmcore（2）

Linux 内核调试方法接前一篇文章&#xff1a;中移&#xff08;苏州&#xff09;软件技术有限公司面试问题与解答&#xff08;8&#xff09;—— coredump与vmcore&#xff08;1&#xff09; 本文参考以下文章&#xff1a; vmcore分析和实战 内核vmcore文件分析方法 crash工具…
阅读更多...
重磅！讯飞星火V3.5正式发布，3大核心能力超GPT-4 Turbo！

重磅！讯飞星火V3.5正式发布，3大核心能力超GPT-4 Turbo！

1月30日&#xff0c;科大讯飞召开星火认知大模型V3.5升级发布会&#xff0c;这是国内首个基于全国产算力训练的多模态认知大模型。科大讯飞董事长刘庆峰先生、研究院院长刘聪先生出席了大会&#xff0c;并对最新产品进行了多维度解读。 讯飞星火V3.5的7大核心能力实现全面大幅…
阅读更多...
数据结构：图文详解 搜索二叉树（搜索二叉树的概念与性质，查找，插入，删除）

数据结构：图文详解 搜索二叉树（搜索二叉树的概念与性质，查找，插入，删除）

目录 搜索二叉树的相关概念和性质 搜索二叉树的查找 搜索二叉树的插入 搜索二叉树的删除 1.删除节点只有右子树&#xff0c;左子树为空 2.删除节点只有左子树&#xff0c;右子树为空 3.删除节点左右子树都不为空 搜索二叉树的完整代码实现 搜索二叉树的相关概念和性质 …
阅读更多...
LeetCode： 189.轮转数组

LeetCode： 189.轮转数组

本篇目标了解&#xff0c;翻转数组的经典解法&#xff0c; 189. 轮转数组 - 力扣&#xff08;LeetCode&#xff09; 目录 基本方法概述&#xff1a; 1&#xff0c;翻转做法&#xff0c;推荐时O&#xff08;n&#xff09;&#xff0c;空&#xff08;1&#xff09; 2&#x…
阅读更多...
喜讯 | 经纬恒润整车电子电气测试实验室通过一汽研发总院外部实验室资质认证！

喜讯 | 经纬恒润整车电子电气测试实验室通过一汽研发总院外部实验室资质认证！

近日&#xff0c;经纬恒润整车电子电气测试实验室成功通过中国一汽研发总院的资质评定&#xff0c;获得外部实验室认可证书。这是继经纬恒润测试实验室获得一汽智能网联开发院车载以太网测试资质认证之后的又一次认可&#xff0c;它将拓宽经纬恒润与红旗新能源及相关零部件供应…
阅读更多...
windows pm2 执行 npm脚本或执行yarn脚本遇到的问题及解决方案

windows pm2 执行 npm脚本或执行yarn脚本遇到的问题及解决方案

环境&#xff1a; 在windows上启动终端来运行一个项目&#xff1b;通过指令npm run start来启动&#xff0c;但是将终端一关&#xff0c;就无法访问了&#xff0c;所以想到用pm2来管理 1. 全局安装pm2 npm i pm2 -g2. 在项目根目录执行指令(大部分兄弟的错误使用方法) pm2 st…
阅读更多...
docker私有库

docker私有库

1.registry私有仓库 拉取registry镜像 docker pull registry 修改docker配置文件并重启 vim /etc/docker/daemon.json {"insecure-registries": ["172.16.23.23:5000"], #添加&#xff0c;注意用逗号结尾"registry-mirrors": ["ht…
阅读更多...
阿赵UE学习笔记——14、LOD

阿赵UE学习笔记——14、LOD

阿赵UE学习笔记目录   大家好&#xff0c;我是阿赵。   继续学习虚幻引擎的用法。这次看看虚幻引擎的Level Of Detail(LOD)的用法。 一、测试场景准备 用植物系统&#xff0c;在地形上面刷了好多草&#xff1a; 这个时候看一下网格&#xff0c;会发现网格比较多和密集。 …
阅读更多...
免费AI写作网站，AI人工智能写作gpt+在线AI绘画midjourney国内版

免费AI写作网站，AI人工智能写作gpt+在线AI绘画midjourney国内版

大家可以通过收藏网页www.woka.chat 直接进行访问&#xff0c;也可通过关注新公众号实现微信端使用~ 注册赠送大量额度&#xff0c;可用于网站全部功能&#xff08;问答和绘画&#xff09;&#xff01;每天签到也可领取充足使用额度&#xff01; 废话不多说&#xff0c;我们现…
阅读更多...
【android】 android-＞profile 查看内存泄露

【android】 android-＞profile 查看内存泄露

目录 实例讲解 各字段解释 实例讲解 各字段解释 在 Android Studio 的 Profile 视图中&#xff0c;Arrange by Stack 用于对内存分配和释放事件进行堆栈排列&#xff0c;以便更好地了解内存使用情况。以下是表上各列的一般含义&#xff1a; 1. **Call Chart (调用图)**: …
阅读更多...
Web中的转发与重定向

Web中的转发与重定向

转发与重定向 一、转发和重定向的概念1.转发2.重定向 二、JavaWeb 中的转发和重定向三、SpringMVC 中的转发和重定向1.转发(1) 默认的方式(2) 完整的方式 2.重定向 四、总结 一、转发和重定向的概念 在 Web 应用中&#xff0c;转发和重定向都是用于将请求从一个页面传递到另一…
阅读更多...
MIMIC-IV官方视图解析 - cardiac_marker心脏标记表

MIMIC-IV官方视图解析 - cardiac_marker心脏标记表

今天在学习官方衍生表mimiciv_derived.cardiac_marker心脏标记表时候发现了一些问题&#xff1a; 该表中troponin_t &#xff08;肌钙蛋白t&#xff09;的值结果都是空值null 或者 ___ &#xff08;由于去标识化&#xff09;&#xff0c; 这明显是不合理的 小编查看了该表的官…
阅读更多...
提升小波的理解

提升小波的理解

本文简要介绍一下提升小波的计算过程和基本原理： 1、划分 假设有序列X， 将其奇数索引上的元素构成，Xo将其偶数索引上的元素构成，Xe之所以能文献中都用Xo和Xe划分，是因为 o来源于odd，奇数；e来源于even，偶数；举个例子： 有序列：X=[3,5,22,33,12,34,56,77,99,29] Xo…
阅读更多...
乐鑫与 Elektor 杂志合作推出特刊，聚焦 AIoT 创新

乐鑫与 Elektor 杂志合作推出特刊，聚焦 AIoT 创新

在新一年的起始之际&#xff0c;我们很荣幸地与 Elektor 合作推出由乐鑫领衔编辑的杂志特刊。欢迎点此阅读电子版本。 Elektor 杂志作为国际电子工程和科技创新的重要平台&#xff0c;自 20 世纪 60 年代起&#xff0c;就引领着电子制造的发展潮流。如今&#xff0c;它已经发展…
阅读更多...
服务端渲染

服务端渲染

SSR简单来说就是页面上的内容是通过服务端渲染生成的&#xff0c;浏览器直接显示服务端返回的html就可以了。相比之前常用的SPA来说有很多的优点&#xff0c;如下图&#xff0c;但也有一些实际存在的问题&#xff0c;在实际应用中需要多方面权衡利弊。 SSR优势 SSR缺点&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023