在网页开发中,TinyMCE是一个流行的富文本编辑器。它允许用户轻松地创建和编辑HTML内容,而无需直接操作代码。然而,有时我们可能需要通过JavaScript来动态修改编辑器中的内容。本文将介绍如何使用JavaScript来修改TinyMCE编辑器的内容。
首先,确保你已经在页面中正确引入了TinyMCE的库。然后,你可以使用以下代码来初始化编辑器:
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<textarea id="mytextarea">这是初始内容</textarea>
<script>
tinymce.init({
selector: '#mytextarea',
plugins: 'link image code',
toolbar: 'undo redo | link image | code'
});
</script>
一旦编辑器被初始化,你可以通过获取编辑器实例来修改其内容。以下是如何通过JavaScript修改TinyMCE编辑器内容的示例代码:
// 获取TinyMCE编辑器实例
var editor = tinymce.get('mytextarea');
// 设置编辑器的内容
editor.setContent('这是新的内容');
此外,你还可以使用`setContent`方法来插入HTML格式的内容:
editor.setContent('<p><strong>这是加粗的新内容</strong></p>');
如果你需要清空编辑器中的内容,可以使用以下代码:
editor.setContent('');
通过以上方法,你可以轻松地通过JavaScript动态修改TinyMCE编辑器的内容。这对于需要在运行时更新编辑器内容的场景非常有用,例如从服务器获取数据并显示在编辑器中。希望这篇文章对你有所帮助!
5

站星网
在网页开发中,TinyMCE是一个流行的富文本编辑器。它允许用户轻松地创建和编辑HTML内容,而无需直接操作代..
为您推荐
Web前端入门第 81 问:JavaScript cookie 的读写操作
前端开发
2025年08月01日
前端的 cookie 读写在 2020 年之前一直不存在一个官方的接口,每次需要使用 cookie 的时候,要么是引入三方插件,要么就需要自己封装一个公用的组件或函数。npm 的 cookie 插件周下载量 6 千万左右,可以想象一下此..
Web前端入门第 78 问:JavaScript 比较少见的模版字符串用法
前端开发
2025年07月22日
在 ES6 之前,JS 的多行字符串一直是开发难题,在处理多行字符串时,各种各样的方案都有~~在 JS 中,如果直接这样写多行字符串:const str1 = '第一行第二行';那浏览器转过来就打脸,分分钟报错:Uncaught S..
Web前端入门第 67 问:JavaScript 中的面向对象编程
前端开发
2025年06月24日
此 对象 非彼对象啊,不要理解错了哦~~面向对象编程 这个概念在 Java 编程语言中用得比较多,JS 同时支持 面向对象编程 和 函数式编程。像大名鼎鼎的 React 和 Vue 他们都有两种开发风格,比如:Vue 中的 组合式API ..
微软 SQL Server 2025 全新特性解析 | AI 加持、向量搜索、T‑SQL 革新
数据库
2025年06月12日
AI 原生嵌入:Copilot & 向量功能Copilot 集成 SSMS 21:在 SQL Server Management Studio 中添加 AI 助手,支持自然语言生成和优化 T‑SQL 查询。向量数据类型与索引:新增原生向量字段(支持单精度浮点),并提供..

2025年最佳.NET C#实现PDF转Word:主流库功能与对比
.NET
2025年06月07日
在日常工作中,将 PDF 文件高质量地转换为 Word 文档已成为许多企业和办公人员的常见需求,尤其是在文档归档、编辑流程自动化和办公系统集成等场景中尤为重要。对于使用 .NET 平台,特别是 C# 的开发者来说,选择一..
Web前端入门第 57 问:JavaScript 数据类型与类型转换
前端开发
2025年06月03日
在程序语言中,数据类型是基础,一切程序都是建立在基础数据之上。如果说程序如同万丈高楼平地起,那么数据类型就像沙、石、钢筋、水泥等等最基础的原料。一样的高楼,不同的人,用相同的原料,造的方法也会有千般变..
JavaScript实现图片上传预览及获取图片尺寸和大小的完整指南
前端技术
2025年05月30日
在现代Web开发中,提供图片上传的预览功能以及获取图片的尺寸和大小信息,已成为提升用户体验的重要手段。本文将详细介绍如何使用JavaScript实现这些功能,帮助你在用户上传图片前进行有效的验证和优化。一、实现图..
Web前端入门第 60 问:JavaScript 各种数组定义与数组取值方法
前端开发
2025年05月30日
数组可以算是程序里面最常用的数据结构了,但凡网页上任何一个列表数据,基本都是以数组的形式存在,像表格、banner图、菜单列表、商品列表,分类列表等等,在前端领域都是以数组处理。数组的定义JS 的数组花样很多..
Web前端入门第 55 问:JavaScript 严格模式与非严格模式区别
前端开发
2025年05月23日
JavaScript 默认是非严格模式的,可以通过 "use strict"; 启用严格模式。此声明语句可以放在 JS 文件顶部,也可以放在函数内部。启用严格模式1、外部脚本在 JS 文件开头声明,内部脚本在 <script> 标签开头声明,声..
Web前端入门第 53 问:JavaScript 的各种调试方法
前端开发
2025年05月20日
任何一门编程语言,在学习之前都应该先弄清楚它的调试方法,毕竟没有不挖坑的人类!程序一旦出现问题,第一时间就是找到问题出在哪儿,其次才是拿出解决办法。如果都找不到问题原因,那又何从谈起解决办法呢?如何排..
Web前端入门第 52 问:JavaScript 的应用领域
前端开发
2025年05月16日
截至目前,您应该对前端的 HTML + CSS 应该有了很清楚的认知,至少实现一个静态网页已经完全不在话下了。当然,CSS 功能绝不止这些,一些不太常用的 CSS 相关知识,后续将通过案例进行分享。那么咱们接下来看看 Java..

2025年安装Chrome谷歌浏览器插件全攻略:解决无法安装扩展程序的问题
资源分享
2025年05月02日
在国内使用谷歌浏览器(Google Chrome)时,用户常常遇到无法安装扩展程序(插件)的困扰。这主要是由于网络限制、Chrome政策更新以及浏览器安全设置等因素导致的。本文将为你详细解析原因,并提供多种解决方案,帮..
从零实现富文本编辑器#3-基于Delta的线性数据结构模型
程序人生
2025年04月29日
数据模型的设计是编辑器的核心基础,其直接影响了选区模型、DOM模型、状态管理等模块的设计。例如在quill中的选区模型是index + len的表达,而slate中则是anchor + focus的表达,这些都是基于数据模型的设计而来的。..
.NET C# 过滤从富文本编辑器html里的Javascript脚本
.NET
2025年04月02日
富文本编辑器在允许用户输入丰富内容的同时,也带来了跨站脚本攻击(XSS)的风险。过滤提交的 HTML 中的 <script> 脚本是防止跨站脚本攻击(XSS)的关键步骤。在 .NET C# 服务端过滤 <script> 脚本主要有以下几种方..
轻松学习 JavaScript函数中的默认参数
前端开发
2025年03月15日
JavaScript函数可以有默认参数值。通过默认函数参数,你可以初始化带有默认值的正式参数。如果不初始化具有某些值的参数,则该参数的默认值为undefined。请看下列代码:function foo(num1){console.log(num1);}foo()..
JavaScript API 设计原则详解
前端开发
2025年03月15日
前言本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时遵循的原则,总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来。很难做到详..
JavaScript 中精度问题以及解决方案
前端开发
2025年03月15日
JavaScript 中的数字按照 IEEE 754 的标准,使用 64 位双精度浮点型来表示。其中符号位 S,指数位 E,尾数位M分别占了 1,11,52 位,并且在ES5 规范中指出了指数位E的取值范围是[-1074, 971]。精度问题汇总想用有限..
JavaScript 六种继承方式
前端开发
2025年03月15日
继承是面向对象编程中又一非常重要的概念,JavaScript支持实现继承,不支持接口继承,实现继承主要依靠原型链来实现的。原型链首先得要明白什么是原型链,在一篇文章看懂proto和prototype的关系及区别中讲得非常详细..

JavaScript 事件委托详解
前端开发
2025年03月15日
基本概念事件委托,通俗地来讲,就是把一个元素响应事件(click、focus……)的函数委托到另一个元素;一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应..
JavaScript 中的遍历详解
前端开发
2025年03月15日
编程这么多年,要是每次写遍历代码时都用 for 循环,真心感觉对不起 JavaScript 语言~对象遍历为了便于对象遍历的测试,我在下面定义了一个测试对象obj。测试对象// 为 Object 设置三个自定义属性(可枚举)Object.p..