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

已于 2024-02-01 09:48:03 修改
阅读量3.8k 收藏 43
点赞数 34
分类专栏： VUE 笔记 前端 笔记 文章标签： vue.js 前端 javascript
于 2024-01-31 11:54:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61049675/article/details/135946760
版权

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

一、安装

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

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

香菜啵子欸
关注
  • 34
    点赞
  • 踩
  • 43
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2+@tinymce/tinymce-vue富文本编辑器的实现
wulijuan888666的博客
05-08 383
vue2项目实现富文本编辑和回显，支持上传图片，视频。
Vue3使用富文本框tinymce
06-21
tinymce的静态文件，包括样式以及js等
vue3中使用tinyMCE
07-01
vue3中使用tinyMCE的demo，setup语法糖写法，解压后请删除node_model包后重新cnpm i
在vue3项目中使用tinymce编辑器
01-22
汉化包
Flutter【组件】富文本组件
最新发布
JackWu blog
06-18 413
flutter 富文本组件，富文本组件（Rich Text Component）是一个用户界面元素，用于显示和编辑带有多种样式的文本。它允许在同一段文本中应用不同的字体、颜色、大小、粗细、斜体、下划线
tinymce-vue：TinyMCE Vue官方组件
02-06
TinyMCE Vue官方组件 关于 该软件包是的薄包装，可以更轻松地在Vue应用程序中使用。 如果您需要有关TinyMCE的详细文档，请参阅： 。 有关TinyMCE Vue快速入门，请参阅： 。 有关TinyMCE Vue技术参考，请参阅： 。 支持 版本4.0旨在支持Vue3。对于Vue 2.x及以下版本，请使用包装的早期版本。 问题 您是否发现了tinymce-vue或有功能要求？ 打开一个，让我们知道或提交。 注意：有关TinyMCE的问题，请访问。
vue-tinymce 富文本编辑器自定义图片上传
11-24
vue-tinymce 封装了el-upload 控件，支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见：https://xingyun.blog.csdn.net/article/details/102492921
tinymce富文本编辑器（vue）
qq_48294048的博客
06-07 6587
tinymce富文本编辑器使用
vue中tinymce的使用
LJJONESEED的博客
11-15 1万+
vue中使用tinymce富文本编辑器 （我这里是vue2，vue3不是写在public下，具体的可以搜搜 看看） 3.在public中新建 tinymce 文件夹 把三个文件复制进去 4.在components文件夹中新建tinymce.vue （中文文件，自己去官网下载也可以，我这里下载下来的不能用，所以就用的这个） 5.使用 【如果用的elementui el-dialog 那么富文本编辑器的功能可能会被el-dialog覆盖，导致功能不能使用】 解决办法： 找到刚刚复制的skin.
【vue】 vue2 中使用 Tinymce 富文本编辑器
热门推荐
amoureux555的博客
04-12 1万+
【vue】 vue2 中使用 Tinymce 富文本编辑器
vue-tinymce-editor Vue2的Tinymce编辑器组件。-Vue.js开发
05-27
vue-tinymce-editor此组件为vue开发人员提供了易于使用的tinymce演示。在此页面中，您可以看到一个演示和示例：演示和示例vue-tinymce-editor该组件为vue开发人员提供了易于使用的tinymce演示。可以在此页面中查看演示和示例：演示和示例安装$ npm install vue-tinymce-editor如何使用从'vue'导入import Vue从'vue-tinymce-editor'导入tinymce Vue.component（'tinymce'， tinymce）您可以在标记中使用该组件 导出默认值{data（）{返回{data：''}; }}
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码 在 Vue 项目中引入 tinymce 富文本编辑器需要完成以下几个步骤：资源下载、初始化、扩展插件。 资源下载 首先，需要下载 tinymce 的 Vue 组件 tinymce-vue，...
vue3 中使用 TinyMCE 富文本编辑器
qq_40893035的博客
03-05 2482
找到官网，找到下载vue版本的地址上执行下载命令，将官网上的实例代码复制粘贴上去注册账号，获取免费的API-key汉化优化组件行为动作，比如上传图片。
【超详细】vue项目：Tinymce富文本使用教程以及踩坑总结+业务需要功能扩展
weixin_55846296的博客
12-01 1万+
在Vue项目的开发过程中，经常需要使用富文本编辑器来处理用户的输入内容。 是一个功能强大且易于使用的富文本编辑器，它支持大多数常见的文本编辑功能，并且可以通过插件进行扩展。本文将详细介绍如何在Vue项目中使用Tinymce富文本编辑器
当TinyMCE富文本编辑器遇到Vue3+nuxt+ts项目，分享引入成功案例及过程中踩的那些坑
vvv3171071的博客
11-28 783
如果你的前端项目技术栈使用的是Vue3+nuxt+ts，并且老大让你集成一下那个传说中非常丝滑的TinyMCE富文本编辑器，那么恭喜你和我一样中大奖了。网上找了好久都没有找到同类型且靠谱的实现方案，于是就自己着手研究文档并踩着坑解决了。TinyMCE中文文档中文手册懒得看过程的直接跳到最下方复制组件源码后按自己项目微调即可。
vue项目中使用 tinymce富文本编辑器
ljlhah的博客
06-04 2697
下载解压后是一个langs文件夹里面有zh_CN.js文件，将langs文件夹放在我们刚才新建的static/tinymce文件目录下与skins文件夹同级。2.在node_modules依赖，会出现tinymce，找到之后，复制以下四个文件，放入public目录下，用tinymce包着是个4个文件。注意：在v-model绑定的，于点击事件做是事，主要为了有个表单验证，以及去重验证。这是一个汉化版，，在最一开始时富文本是英文需要转为中文。
tinymce-vue使用教程
Future1994的博客
01-04 1万+
转自：tinymce-vue使用教程 - 简书 一、资源下载 npm install tinymce -S //当前版本^5.1.1 npm install @tinymce/tinymce-vue -S //当前版本^3.0.1 二、安装语言包 资源下载后,在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下,(PS: 如果是使用 vue-cli 3.x 构建的 typescript 项目，就放到 public 目
在Vue项目中使用tinymce富文本编辑器
服务员的博客
04-16 5084
这两个组件安装完之后，在public目录下新建文件夹tinymce，目录建好后，找到node_modules文件夹下的tinymce/skins目录，将skins目录复制到我们创建的tinymce文件夹内。安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 public/tinymce 目录下。在刚才创建的static/tinymce文件夹内再新建langs文件夹，用来存放我们下载的中文语言包，如下图所示。多语言支持，官网可下载几十种语言。
tinymce/tinymce-vue富文本编辑器
08-19
tinymce/tinymce-vue是一个集成了TinyMCE富文本编辑器的Vue组件。TinyMCE是一个功能强大、可定制性高的富文本编辑器，它提供了许多强大的编辑功能，如字体样式、图像插入、表格编辑等。这个组件可以在Vue项目中方便地使用富文本编辑器功能。引用引用引用<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue3 中 tinymce+tinymce-vue 富文本编辑器使用](https://blog.csdn.net/YY11230/article/details/128835389)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [富文本编辑器tinymce（@tinymce/tinymce-vue）](https://blog.csdn.net/xutongbao/article/details/125387308)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值