Vue3中使用tinymce全功能演示,包括开源功能

效果图:

1、下载插件:

npm i tinymce
npm i @tinymce/tinymce-vue

2、在node_modules文件夹中找到tinymce下的skins复制到项目public文件夹中

    (可以先创建一个tinymce文件夹):

 

3、在tinymce官网中下载中文包,并放在刚刚创建的tinymce文件夹中

  • Language Packages | Trusted Rich Text Editor | TinyMCE   前往官网
  • 点击按钮下载全部语言包,解压放至tinymce文件夹
  • TinyMCE中文文档中文手册  中文文档给大家作参考

4、在项目中建立components/TEditor文件夹封装tinymce(注释比较全 涵盖90%的功能):

<template><div><editorv-model="myValue":init="init":disabled="disabled":id="tinymceId"></editor></div>
</template><script setup>
import { uploadImg } from "@/api/article";
import tinymce from "tinymce/tinymce";
import "tinymce/skins/content/default/content.css";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default/icons";
import "tinymce/models/dom"; // 这里是个坑 一定要引入
import "tinymce/themes/silver"; // 界面UI主题
import "tinymce/plugins/image";
import "tinymce/plugins/table";
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/wordcount"; // 文字计数
import "tinymce/plugins/preview"; // 预览
import "tinymce/plugins/emoticons"; // emoji表情
import "tinymce/plugins/emoticons/js/emojis.js"; //必须引入这个文件才有表情图库
import "tinymce/plugins/code"; // 编辑源码
import "tinymce/plugins/link"; // 链接插件
import "tinymce/plugins/advlist"; //高级列表
import "tinymce/plugins/codesample"; //代码示例
import "tinymce/plugins/autoresize"; // 自动调整编辑器大小
import "tinymce/plugins/quickbars"; // 光标处快捷提示
import "tinymce/plugins/nonbreaking"; //插入不间断空格
import "tinymce/plugins/searchreplace"; //查找替换
import "tinymce/plugins/autolink"; //自动链接
import "tinymce/plugins/directionality"; //文字方向
import "tinymce/plugins/visualblocks"; //显示元素范围
import "tinymce/plugins/visualchars"; //显示不可见字符
import "tinymce/plugins/charmap"; // 特殊符号
import "tinymce/plugins/nonbreaking"; //插入不间断空格
import "tinymce/plugins/insertdatetime"; //插入日期时间
import "tinymce/plugins/importcss"; //引入自定义样式的css文件const emits = defineEmits(["getContent"]);
//这里我选择将数据定义在props里面,方便在不同的页面也可以配置出不同的编辑器,当然也可以直接在组件中直接定义
const props = defineProps({value: {type: String,default: () => {return "";},},baseUrl: {type: String,default: "",},disabled: {type: Boolean,default: false,},plugins: {type: [String, Array],default:"preview searchreplace autoresize quickbars autolink directionality code visualblocks visualchars image link codesample table nonbreaking charmap insertdatetime advlist lists wordcount emoticons",},knwlgId: {type: String,},toolbar: {type: [String, Array],default:"undo redo | forecolor backcolor bold emoticons italic underline strikethrough link codesample table image | alignleft aligncenter alignright alignjustify outdent indent | \blocks fontfamily fontsize | bullist numlist | blockquote subscript superscript removeformat | \charmap insertdatetime | cut copy paste pastetext",},
});const loading = ref(false);
const myValue = ref(props.value);
const tinymceId = ref("vue-tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + "")
);//定义一个对象 init初始化
const init = reactive({selector: "#" + tinymceId.value, //富文本编辑器的id,language_url: "../../../public/tinymce/langs/zh_CN.js", // 语言包的路径,具体路径看自己的项目language: "zh_CN",skin_url: "../../../public/tinymce/skins/ui/oxide", // skin路径,具体路径看自己的项目branding: false, // 是否禁用“Powered by TinyMCE”promotion: false, //去掉 upgrademenubar: "edit view insert format tools table",paste_data_images: true, //允许粘贴图像image_dimensions: false, //去除宽高属性plugins: props.plugins, //这里的数据是在props里面就定义好了的toolbar: props.toolbar, //这里的数据是在props里面就定义好了的// 选中图片的快捷提示quickbars_image_toolbar:"alignleft aligncenter alignright | rotateleft rotateright | imageoptions",editimage_toolbar:"rotateleft rotateright | flipv fliph | editimage imageoptions",// 文字样式font_formats:"Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;", //字体fontsize_formats: "11px 12px 14px 16px 18px 24px 36px 48px 64px 72px", //文字大小image_caption: true,editimage_cors_hosts: ["picsum.photos"],noneditable_class: "mceNonEditable",toolbar_mode: "wrap", // 工具栏模式 floating / sliding / scrolling / wrap// contextmenu: "bold copy",  // 上下文菜单// contextmenu: "link image table",content_style:"body { font-family:Helvetica,Arial,sans-serif; font-size:16px }",image_advtab: true,importcss_append: true,paste_webkit_styles: "all",paste_merge_formats: true,nonbreaking_force_tab: false,paste_auto_cleanup_on_paste: false,file_picker_types: "file",// 选中文字的快捷提示quickbars_selection_toolbar:"bold italic | quicklink h2 h3 blockquote quickimage quicktable",// 编辑器高度自适应autoresize_bottom_margin: 50,autoresize_max_height: 500,autoresize_min_height: 350,autoresize_on_init: true,autoresize_overflow_padding: 50,content_css: "../../../public/tinymce/skins/content/default/content.css", //以css文件方式自定义可编辑区域的css样式,css文件需自己创建并引入//图片上传images_upload_handler: (blobInfo, progress) =>new Promise((resolve, reject) => {let file = blobInfo.blob();console.log(blobInfo.blob(), "file");if (file.size / 1024 / 1024 > 200) {reject({message: "上传失败,图片大小请控制在 200M 以内",remove: true,});}const formData = new FormData();formData.append("file", file);loading.value = true;uploadImg(props.knwlgId, formData).then((res) => {loading.value = false;resolve(import.meta.env.VITE_APP_BASE_API +"/ekms/images/v1/preview/" +res.data.imgId);}).catch(() => {loading.value = false;});}),
});// 监听外部传递进来的的数据变化
watch(() => props.value,() => {myValue.value = props.value;}
);
//监听富文本中的数据变化
watch(() => myValue.value,() => {emits("getContent",tinymce.activeEditor.getContent({ format: "text" }),myValue.value);}
);//初始化编辑器
onMounted(() => {tinymce.init({});
});
</script><style lang="scss" scoped>
:deep(.tox-tinymce) {border: 1px solid #dcdfe6;border-radius: 4px;.tox-statusbar {display: none;}
}
</style>

补充:

1、引入中文语言包有两种方案:

  • 方案一:可以通过上面的第三步把所有语言包下载后,在初始化tinymce的时候指定语言及语言包
    language_url: "../../../public/tinymce/langs/zh_CN.js", // 语言包的路径,具体路径看自己的项目
    language: "zh_CN",
  • 方案二:直接下载Chinese Simplified后将下载下来的zh-Hans解压放入tinymce中
language_url: "../../../public/tinymce/langs/zh-Hans.js", // 语言包的路径,具体路径看自己的项目
language: "zh-Hans",

2、如果使用 tinymce.activeEditor.setContent发现没办法为编辑器赋值的话可以考虑使用setTimeout等编辑器init初始化完后再赋值内容:

setTimeout(()=>{tinymce.activeEditor.setContent('123')
},1000)

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pytorch中nn.DataParallel多次使用

pytorch中nn.DataParallel多次使用 import torch import torch.nn as nn import torch.optim as optim from torch.utils.data import DataLoader# 定义模型 class MyModel(nn.Module):def __init__(self):super(MyModel, self).__init__()self.fc nn.Linear(10, 1)def forwa…

STM32简介

STM32是ST公司基于ARM Cortex-M内核开发的32位微控制器&#xff0c;常应用在嵌入式领域如&#xff1a; 智能车&#xff08;用stm32做寻迹小车&#xff0c;读取光电传感器或者摄像头数据&#xff0c;然后驱动电机前进和转弯&#xff09;&#xff1b; 无人机&#xff08;用stm3…

Facebook广告账户被封?最全防封及申诉指南

Facebook广告是海外营销的一大利器&#xff0c;但是随着互联网的发展&#xff0c;有部分不法分子正在利用他进行盈利&#xff0c;导致Facebook官方安全审核日益严格&#xff0c;不少卖家遭遇封号问题&#xff01;这篇文章就来教你如何更好地管理 Facebook广告帐户&#xff0c;实…

windows10系统-15-markdown编辑器和文本复制工具Textify

1 markdown编辑器 Markdown是一种轻量级标记语言&#xff0c;创始人为约翰格鲁伯。 它允许人们使用易读易写的纯文本格式编写文档&#xff0c;然后转换成有效的XHTML&#xff08;或者HTML&#xff09;文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。 1.1 Typo…

EXCEL——根据单元格值设置不同色阶

方法&#xff1a;开始—>条件格式—>色阶&#xff08;默认色阶或复杂色阶&#xff09;。 一、默认色阶 如图&#xff0c;可选择自定义的色阶模式。 二、复杂色阶 1、如图&#xff0c;点击"其他规则" 2、选择复杂格式 此时可以看到&#xff0c;支持多种格式…

Vue实战项目1:跑马灯效果

Vue实战项目1&#xff1a;跑马灯效果 目录 一、效果预览二、编写思路三、整体代码展示 一、效果预览 二、编写思路 两个按钮用于启动和停止&#xff0c;绑定点击事件&#xff0c;使用v-on&#xff0c;可以简写为 <input type"button" value"跑起来" c…

《动手学深度学习 Pytorch版》 8.2 文本预处理

import collections import re from d2l import torch as d2l解析文本的常见预处理步骤&#xff1a; 将文本作为字符串加载到内存中。 将字符串拆分为词元&#xff08;如单词和字符&#xff09;。 建立一个词表&#xff0c;将拆分的词元映射到数字索引。 将文本转换为数字索…

认识SQLServer

深入认识SQL Server&#xff1a;从基础到高级的数据库管理 在当今数字时代&#xff0c;数据是企业成功的关键。为了存储、管理和分析数据&#xff0c;数据库管理系统&#xff08;DBMS&#xff09;变得至关重要。其中&#xff0c;Microsoft SQL Server是一款备受欢迎的关系型数据…

【LeetCode 算法专题突破】二分查找(⭐)

文章目录 前言1. 二分经典模板题目题目描述代码&#xff1a; 2. 在排序数组中查找元素的第一个和最后一个位置题目描述代码 3. 有效的完全平方数题目描述代码 4. 寻找峰值题目描述代码 5. 寻找旋转排序数组中的最小值题目描述代码 6. 点名题目描述代码 总结 前言 我刷过不少算…

​css的优先级​排序?

css的优先级 常用的选择器排序 !important>行内样式>#id>.class>标签(div,p…) 1.!important &#xff01;权重值无穷大,但也可以计算. 例如 div{ color:red !important; } body div{ color:red !important; /* 该权重值就大于上方*/ /* !important使用后不…

LeetCode【11】 盛水最多的容器

题目&#xff1a; 分析&#xff1a; 1、双指针&#xff0c;储水为&#xff08;R-L &#xff09;* 二者较小高度&#xff0c;如题目&#xff0c;(9-2)* 7 49 2、双指针向中间靠&#xff0c;每次移动较矮的指针。 代码&#xff1a; public int maxArea(int[] height) {int l…

适用于音视频的弱网测试整理

一、什么是弱网环境 对于弱网的定义&#xff0c;不同的应用对弱网的定义是有一定的差别的&#xff0c;不仅要考虑各类型网络最低速率&#xff0c;还要结合业务场景和应用类型去划分。按照移动的特性来说&#xff0c;一般应用低于2G速率的都属于弱网&#xff0c;也可以将3G划分…

【JAVA】最容易忽视的数据类型——枚举

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️初识JAVA】 前言 Java枚举是一个特殊的类一般表示一组常量,比如一年的 4个季节,一年的 12 个月份,一个星期的7天,方向有东南西北等。今天就让我们来学习一下在JAVA中这个特殊的类。 枚举 枚举是一…

10.12作业

以下是一个简单的比喻&#xff0c;将多态概念与生活中的实际情况相联系&#xff1a; 比喻&#xff1a;动物园的讲解员和动物表演 想象一下你去了一家动物园&#xff0c;看到了许多不同种类的动物&#xff0c;如狮子、大象、猴子等。现在&#xff0c;动物园里有一位讲解员&…

吃瓜神奇!企查查、天眼查、天眼销,到底哪家强?

最近&#xff0c;我发现很多人在讨论查企业信息的工具&#xff0c;什么企查查、天眼查、天眼销等&#xff0c;到底哪家强呢&#xff1f; 首先&#xff0c;我们来简单了解一下这些工具。企查查是一款可以帮助用户查询企业信息的工具&#xff0c;通过输入关键词&#xff0c;可以搜…

【VUE】element Table指定字段单元格样式及数据格式化

将列表中的指定字段的数据&#xff0c;根据字典值回显&#xff0c;并修改指定状态的显示样式 <el-tableref"table"height"500px":data"dataList"><template v-for"(item, index) in columns"><el-table-column:key&quo…

【C/C++】使用 g++ 编译器编译 C++ 程序的完全指南

本文介绍了 g 编译器的使用方法和常见参数解释&#xff0c;帮助您编译和构建 C 程序。 引言 在 C 程序开发中&#xff0c;选择一个合适的编译器是至关重要的。g 是 GNU 编译器集合&#xff08;GCC&#xff09;中的 C 编译器&#xff0c;提供了丰富的功能和选项&#xff0c;帮…

嵌入式面试常见问题(一)

目录 1.什么情况下会出现段错误&#xff1f; 2.swap() 函数为什么不能交换两个变量的值 3.一个函数有六个参数 分别放在哪个区&#xff1f; 4.定义一个变量&#xff0c;赋初值和不赋初值分别保存在哪个区&#xff1f; 5.linux查看端口状态的命令 6.结构体中->和.的区…

Tomcat自启动另一种方法

Tomcat自启动另一种方法 问题&#xff1a; 不知道怎么回事&#xff0c;好几台电脑都可以开机自启动tomcat&#xff0c;正常运行项目。一样的配置一样的操作流程&#xff0c;偏偏要运行的机器开机自启动后&#xff0c;项目不能运行&#xff0c;手动重启tomcat又可以用了。网上…

FHRP首跳冗余的解析

首跳冗余的解析 个人简介 HSRP hot standby router protocol 热备份路由协议 思科设备上 HSRP VRRP 华为设备上 VRRP HSRP v1 version 1 HSRP v2 version 2 虚拟一个HSRP虚拟IP地址 192.168.1.1 开启HSRP的抢占功能 通过其他参数 人为调整谁是主 谁是从 &a…