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

2024-02-01 21:44
文章标签 javascript 使用 组件 项目 vue frontend 文本 tinymce

本文主要是介绍【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, clearpowerpaste_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、进阶效果

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

这篇关于【Vue】vue项目中使用tinymce富文本组件（@tinymce/tinymce-vue）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/668570。

相关文章

C语言中联合体union的使用

C语言中联合体union的使用

本文编辑整理自： http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=179471 一、前言 “联合体”(union）与“结构体”(struct)有一些相似之处。但两者有本质上的不同。在结构体中,各成员有各自的内存空间, 一个结构变量的总长度是各成员长度之和。而在“联合”中,各成员共享一段内存空间, 一个联合变量
阅读更多...
Tolua使用笔记（上）

Tolua使用笔记（上）

目录   1.准备工作 2.运行例子 01.HelloWorld：在C#中，创建和销毁Lua虚拟机 和 简单调用。 02.ScriptsFromFile：在C#中，对一个lua文件的执行调用 03.CallLuaFunction：在C#中，对lua函数的操作 04.AccessingLuaVariables：在C#中，对lua变量的操作 05.LuaCoroutine：在Lua中，
阅读更多...
RedHat运维-Linux文本操作基础-AWK进阶

RedHat运维-Linux文本操作基础-AWK进阶

你不用整理，跟着敲一遍，有个印象，然后把它保存到本地，以后要用再去看，如果有了新东西，你自个再添加。这是我参考牛客上的shell编程专项题，只不过换成了问答的方式而已。不用背，就算是我自己亲自敲，我现在好多也记不住。 1. 输出nowcoder.txt文件第5行的内容 2. 输出nowcoder.txt文件第6行的内容 3. 输出nowcoder.txt文件第7行的内容 4. 输出nowcode
阅读更多...
Vim使用基础篇

Vim使用基础篇

本文内容大部分来自 vimtutor，自带的教程的总结。在终端输入vimtutor 即可进入教程。 先总结一下，然后再分别介绍正常模式，插入模式，和可视模式三种模式下的命令。 目录 看完以后的汇总 1.正常模式（Normal模式） 1.移动光标 2.删除 3.【:】输入符 4.撤销 5.替换 6.重复命令【. ; ,】 7.复制粘贴 8.缩进 2.插入模式 INSERT
阅读更多...
用Microsoft.Extensions.Hosting 管理WPF项目.

用Microsoft.Extensions.Hosting 管理WPF项目.

首先引入必要的包: <ItemGroup><PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" /><PackageReference Include="Microsoft.Extensions.Hosting" Version="8.0.0" /><PackageReference Include="Serilog
阅读更多...
eclipse运行springboot项目，找不到主类

eclipse运行springboot项目，找不到主类

解决办法尝试了很多种，下载sts压缩包行不通。最后解决办法如图： help--->Eclipse Marketplace--->Popular--->找到Spring Tools 3---->Installed。
阅读更多...
公共筛选组件（二次封装antd）支持代码提示

公共筛选组件（二次封装antd）支持代码提示

如果项目是基于antd组件库为基础搭建，可使用此公共筛选组件 使用到的库 npm i antdnpm i lodash-esnpm i @types/lodash-es -D /components/CommonSearch index.tsx import React from 'react';import { Button, Card, Form } from 'antd'
阅读更多...
vue, 左右布局宽，可拖动改变

vue, 左右布局宽，可拖动改变

1：建立一个draggableMixin.js  混入的方式使用 2：代码如下draggableMixin.js  export default {data() {return {leftWidth: 330,isDragging: false,startX: 0,startWidth: 0,};},methods: {startDragging(e) {this.isDragging = tr
阅读更多...
Lipowerline5.0 雷达电力应用软件下载使用

Lipowerline5.0 雷达电力应用软件下载使用

1.配网数据处理分析 针对配网线路点云数据，优化了分类算法，支持杆塔、导线、交跨线、建筑物、地面点和其他线路的自动分类；一键生成危险点报告和交跨报告；还能生成点云数据采集航线和自主巡检航线。 获取软件安装包联系邮箱:2895356150@qq.com，资源源于网络，本介绍用于学习使用，如有侵权请您联系删除！ 2.新增快速版，简洁易上手 支持快速版和专业版切换使用，快速版界面简洁，保留主
阅读更多...
如何免费的去使用connectedpapers？

如何免费的去使用connectedpapers？

免费使用connectedpapers 1. 打开谷歌浏览器2. 按住ctrl+shift+N,进入无痕模式3. 不需要登录（也就是访客模式）4. 两次用完，关闭无痕模式（继续重复步骤 2 - 4） 1. 打开谷歌浏览器 2. 按住ctrl+shift+N,进入无痕模式 输入网址：https://www.connectedpapers.com/ 3. 不需要登录（也就是
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2