vue3使用TinyMCE富文本

TinyMCE 介绍

TinyMCE 是一个功能强大的富文本编辑器,它允许您在网页应用程序中创建和编辑具有丰富格式的内容。官网    github项目地址   文档地址

下载tinymce文件

从网页下载最新版zip,也可以打开下面链接下载。 打开网页

tinymce.zip
zh-Hans

将下载的文件解压缩到Vue项目 public文件中

在这里插入图片描述

修改lang

将 zh-Hans 改为 zh_CN

在这里插入图片描述
在这里插入图片描述

组件

<template>
	<textarea :id="id" class="hidden"></textarea>
</template>
<script lang="ts" setup>
import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
import type { EditorManager } from 'public/js/tinymce/tinymce';

const emit = defineEmits(['update:value']);

interface Props {
	value: string | undefined;
}
/** 设置默认值 */
const props = withDefaults(defineProps<Props>(), {
});

// 根据当前时间戳转16进制
function getId() {
	return Date.now().toString(16);
}
// id
const id = ref<string>('tinymce_' + getId());
// 内容
const value = ref<string>(props.value || '');
// tinymce对象
var tinymce: EditorManager;

/**
 * 加载Script
 * @param url Script地址
 */
function loadScript(url: string) : Promise<boolean> {
	if (window?.$tinymceLoad) {
		return window.$tinymceLoad;
	}
	window.$tinymceLoad = new Promise<boolean>((resolve, reject) => {
		try {
			const script = document.createElement('script');
			script.src = url;
			script.onload = function () {
				resolve(true);
			};
			script.onerror = function () {
				reject(false);
			};
			document.body.appendChild(script);
		} catch (error) {
			reject(false);
		}
	});
	return window?.$tinymceLoad;
}

/** Script  */
const tinymceLoad = loadScript('/js/tinymce/tinymce.min.js');

watch(() => props.value, (_nVal, _oVal) => {
	if (_nVal != value.value) {
		value.value = _nVal || '';
		if (tinymce.get(id.value)) {
			tinymce.get(id.value)?.setContent(value.value);
		}
	}
});

watch(value, (_nVal, _oVal) => {
	if (_nVal != _oVal)
		emit('update:value', _nVal);
});

// 挂载
onMounted(async () => {
	const isSuccess = await tinymceLoad;
	if (!isSuccess || !window.tinymce) {
		console.error('tinymce 加载失败!!!!')
		return;
	}
	if(value.value){
		const el = document.getElementById(id.value);
		if(el)
			el.innerText = value.value
	}
	tinymce = window.tinymce;
	tinymce._setBaseUrl('/js/tinymce/');
	tinymce.init({
		selector: `#${id.value}`,
		language: 'zh_CN',
		language_url: '/js/tinymce/langs/zh-Hans.js',
		// 编辑器的高度
		height: '100%',
		// 编辑器的宽度
		width: '100%',
		// 菜单栏
		menubar: false,
		// 去掉右上脚升级按钮
		promotion: false,
		// 底部状态栏
		statusbar: true,
		// 元素路径
		elementpath: true,
		// 去掉右下脚Logo图标
		branding: false,
		// 调整大小
		resize: false,
		// 工具栏
		toolbar: 'undo redo restoredraft |blocks fontfamily fontsize forecolor backcolor removeformat| bold italic underline strikethrough blockquote| alignleft aligncenter alignright alignjustify accordion| bullist numlist outdent indent | anchor link image media  |  codesample  visualblocks emoticons code preview searchreplace  pagebreak fullscreen  print  help ',
		// toobar 显示模式  floating  sliding scrolling  wrap
		toolbar_mode: 'wrap',
		// 插件
		plugins: 'advlist autolink lists link image charmap  preview anchor searchreplace visualblocks code fullscreen insertdatetime media table  code help wordcount pagebreak visualblocks emoticons codesample accordion ', 
		//contextmenu: 'undo redo | inserttable | cell row column deletetable | help',
		setup: function (editor) {
			editor.on('change', function () {
				const content = editor.getContent();
				value.value = content;
			});
		}
	}); 
})

/** 卸载 */
onBeforeUnmount(() => {
	tinymce?.remove('#' + id.value);
})

</script>

使用

<template>
	<div class="m-8px">
		<tiny-mce	v-model:value="text"></tiny-mce>
	</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const text =ref<string>('Hello Word');
</script>

效果

在这里插入图片描述

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

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

相关文章

基于PLC的果园灌溉系统设计(论文+源码)

1.系统设计 系统示意图如图2-1所示。某一果园 共有3个灌溉区域&#xff0c;分别为灌溉1#区&#xff0c;灌溉2#区&#xff0c;灌溉3#区&#xff0c;分别使用不同湿度传感器检测湿度&#xff0c;用于各区域控制湿度&#xff0c;进行灌溉&#xff0c;使用相应的灌溉阀进行灌溉。这…

Mybatis学习笔记-映射文件,标签,插件,万字长文,史上最全

目录 概述 mybatis做了什么 原生JDBC存在什么问题 MyBatis组成部分 Mybatis工作原理 mybatis和hibernate区别 使用mybatis&#xff08;springboot&#xff09; mybatis核心-sql映射文件 基础标签说明 1.namespace&#xff0c;命名空间 2.select&#xff0c;insert&a…

AI智能人机对话小程序系统源码 附带完整的搭建教程

移动互联网的普及和快速发展&#xff0c;小程序已经成为了一种非常流行的应用形态。小程序具有即用即走、轻量级的特点&#xff0c;非常适合用于提供各种便捷服务。下面罗峰来给大家分享一款AI智能人机对话小程序系统源码&#xff0c;带有完整的搭建教程。 以下是部分代码示例…

C++学习之路(六)C++ 实现简单的工具箱系统命令行应用 - 示例代码拆分讲解

简单的工具箱系统示例介绍: 这个示例展示了一个简单的工具箱框架&#xff0c;它涉及了几个关键概念和知识点&#xff1a; 面向对象编程 (OOP)&#xff1a;使用了类和继承的概念。Tool 是一个纯虚类&#xff0c;CalculatorTool 和 FileReaderTool 是其派生类。 多态&#xff1…

【非监督学习 | 聚类】聚类算法类别大全 距离度量单位大全

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…

Elastic Search的RestFul API入门:初识mapping

本节课旨在探讨Elasticsearch中Mapping的使用。在Elasticsearch中&#xff0c;Mapping是定义索引中字段&#xff08;Field&#xff09;的数据类型和属性的过程。它为Elasticsearch提供了一种途径&#xff0c;以解析和处理文档中的各个字段&#xff0c;以便在搜索、排序和聚合等…

kali系统复现环境:Vulfocus 提示服务器内部错误,请联系管理员的解决方法

Linux-kali系统复现环境&#xff1a;Vulfocus&&提示服务器内部错误&#xff0c;请练习管理员的解决方法 第一步&#xff1a; 先下载docker和docker-compose apt-get update apt-get install docker apt-get install docker-compose输入如下图命令&#xff0c;有版本…

【ceph】如何打印一个osd的op流程,排查osd在干什么

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…

2023年【通信安全员ABC证】考试题及通信安全员ABC证证考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年【通信安全员ABC证】考试题及通信安全员ABC证证考试&#xff0c;包含通信安全员ABC证考试题答案和解析及通信安全员ABC证证考试练习。安全生产模拟考试一点通结合国家通信安全员ABC证考试最新大纲及通信安全员A…

免费分享一套基于springboot的餐饮美食分享平台系统,挺漂亮的

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的基于springboot的餐饮美食分享平台系统&#xff0c;分享下哈。 项目视频演示 【免费】基于springboot的餐饮美食分享平台 Java毕业设计_哔哩哔哩_bilibili【免费】基于springboot的餐饮美食分享平台 Java毕…

BetaFlight模块设计之三十六:SoftSerial

BetaFlight模块设计之三十六&#xff1a;SoftSerial 1. 源由2. API接口2.1 openSoftSerial2.2 onSerialRxPinChange2.3 onSerialTimerOverflow2.4 processTxState2.5 processRxState 3. 辅助函数3.1 applyChangedBits3.2 extractAndStoreRxByte3.3 prepareForNextRxByte 4. 总结…

美食网站基本结构

代码&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>美食网站首页</title> <link rel"stylesheet" href"https://cdn.staticfile.org/layui/2.5.6/css/layui.min.c…

基于OGG实现MySQL实时同步

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…

Linux常用命令——bc命令

在线Linux命令查询工具 bc 算术操作精密运算工具 补充说明 bc命令是一种支持任意精度的交互执行的计算器语言。bash内置了对整数四则运算的支持&#xff0c;但是并不支持浮点运算&#xff0c;而bc命令可以很方便的进行浮点运算&#xff0c;当然整数运算也不再话下。 语法 …

MATLAB中corrcoef函数用法

目录 语法 说明 示例 矩阵的随机列 两个随机变量 矩阵的 P 值 相关性边界 NaN 值 corrcoef函数的功能是返回数据的相关系数。 语法 R corrcoef(A) R corrcoef(A,B) [R,P] corrcoef(___) [R,P,RL,RU] corrcoef(___) ___ corrcoef(___,Name,Value) 说明 R corrc…

RH2288H V3服务器使用ISO安装系统

1.配置和服务器相同网段地址&#xff0c;RH2288H V3服务器bmc管理网口默认IP是192.168.2.100/24&#xff0c;默认用户root&#xff0c;默认Huawei12#$&#xff0c;网线连接BMC口&#xff0c;登录。默认密码可以在开机时按del键进入配置页面修改 2.配置raid&#xff0c;生产环境…

【Java+SQL Server】前后端连接小白教程

目录 &#x1f4cb; 流程总览 ⛳️【SQL Server】数据库操作 1. 新建数据库text 2. 新建表 3. 编辑表 ⛳️【IntelliJ IDEA】操作 1. 导入jar包 2. 运行显示错误 &#x1f4cb; 流程总览 ⛳️【SQL Server】数据库操作 打开SQL Server数据库-->sa登录-->新建数据库…

《Effective Modern C++》全书内容提炼总结

个人博客地址: https://cxx001.gitee.io 前言 C程序员都应该是对性能执着的人&#xff0c;想要彻底理解C11和C14&#xff0c;不可止步于熟悉它们引入的语言特性&#xff08;例如&#xff0c;auto型别推导、移动语义、lambda表达式&#xff0c;以及并发支持&#xff09;。挑战在…

geemap学习笔记014:加载本地的tif文件

前言 Colab中似乎没法直接加载云盘中的数据&#xff0c;但是可以先上传到GEE中的assets中&#xff0c;再加载本地的数据。下面是以这个数据为例进行展示。 1 上传数据 首先将本地的tif数据上传到Asset中&#xff0c;得到独一的Image ID。 2 加载数据 使用ee.Image加载数据 …

Redis Lua沙盒绕过 命令执行(CVE-2022-0543)漏洞复现

Redis Lua沙盒绕过 命令执行(CVE-2022-0543)漏洞复现 Redis如果在没有开启认证的情况下&#xff0c;可以导致任意用户在可以访问目标服务器的情况下未授权访问Redis以及读取Redis的数据。–那么这也就是redis未授权访问了 Redis的默认端口是6379 可以用空间测绘搜索&#xff…