动态更改TinyMCE配置
TinyMCE 是一个流行的基于 JavaScript 的富文本编辑器，允许用户在网页上进行文本编辑。动态更改 TinyMCE 的配置可以通过多种方式实现，具体取决于你需要更改的配置项和应用场景。以下是一些常见的方法：
方法 1: 重新初始化 TinyMCE
一种简单的方法是销毁现有的 TinyMCE 实例，然后使用新的配置重新初始化它。这种方法适用于需要大规模更改配置的情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TinyMCE Dynamic Configuration</title>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
<textarea id="mytextarea">Hello, World!</textarea>
<button id="changeConfig">Change Config</button>
<script>
// 初始化 TinyMCE
tinymce.init({
selector: '#mytextarea',
plugins: 'lists link image',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image'
});
document.getElementById('changeConfig').addEventListener('click', function() {
// 销毁现有的 TinyMCE 实例
tinymce.get('mytextarea').remove();
// 使用新的配置重新初始化 TinyMCE
tinymce.init({
selector: '#mytextarea',
plugins: 'code',
toolbar: 'code'
});
});
</script>
</body>
</html>方法 2: 动态更改特定配置项
对于某些配置项，可以直接通过 TinyMCE 的 API 动态更改，而不需要重新初始化。例如，可以动态更改工具栏的内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TinyMCE Dynamic Configuration</title>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
<textarea id="mytextarea">Hello, World!</textarea>
<button id="changeToolbar">Change Toolbar</button>
<script>
// 初始化 TinyMCE
tinymce.init({
selector: '#mytextarea',
plugins: 'lists link image',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image'
});
document.getElementById('changeToolbar').addEventListener('click', function() {
// 获取 TinyMCE 实例
var editor = tinymce.get('mytextarea');
// 动态更改工具栏配置
editor.ui.registry.addToolbarButton('mybutton', {
text: 'My Button',
onAction: function () {
editor.insertContent(' <strong>It\'s my button!</strong> ');
}
});
editor.ui.registry.addContextToolbar('textselection', {
predicate: function (node) {
return !editor.selection.isCollapsed();
},
items: 'mybutton | bold italic | link',
position: 'selection',
scope: 'node'
});
editor.ui.registry.addContextToolbar('image', {
predicate: function (node) {
return node.nodeName.toLowerCase() === 'img';
},
items: 'alignleft aligncenter alignright | imageoptions',
position: 'node',
scope: 'node'
});
// 重新渲染工具栏
editor.ui.registry.addContextToolbar('textselection', {
predicate: function (node) {
return !editor.selection.isCollapsed();
},
items: 'mybutton | bold italic | link',
position: 'selection',
scope: 'node'
});
});
</script>
</body>
</html>方法 3: 使用 TinyMCE API 动态更改内容
你还可以使用 TinyMCE 的 API 动态更改编辑器的内容和其他属性。例如，动态更改编辑器的内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TinyMCE Dynamic Configuration</title>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
<textarea id="mytextarea">Hello, World!</textarea>
<button id="changeContent">Change Content</button>
<script>
// 初始化 TinyMCE
tinymce.init({
selector: '#mytextarea'
});
document.getElementById('changeContent').addEventListener('click', function() {
// 获取 TinyMCE 实例
var editor = tinymce.get('mytextarea');
// 动态更改编辑器内容
editor.setContent('<p>This is the new content!</p>');
});
</script>
</body>
</html>相关·内容
0回答
动态更改TinyMCE配置
、、、、
我在我的网站上使用过Tinymce。当我上传任何文件(如图像，视频或其他文件)时，它是由定义了TinyMCE config.php文件的默认文件夹上传的。但问题是多个用户同时上传使用TinyMCE，然后所有文件上传到这个文件夹，所以任何用户都可以看到所有文件并保存在数据库中。如何防止此问题？
浏览 4提问于2016-07-13得票数 0
2回答
当我尝试渲染缩小的TinyMCE捆绑包时，Internet Explorer会产生异常反应。.Include( "~/Scripts/tinymce/tinymce.min.js",@Bundles.Render( "~/Scripts
浏览 2提问于2014-10-30得票数 5
我使用的是TinyMCE 5。我定义了一个image_list，在页面的其他地方处理图像时，我需要动态地更改它。为此，我调用tinymce.remove()，然后调用tinyme.init()，使用一个新的配置对象初始化，该对象具有更新的image_list。但是，如果用户更改了状态，例如单击“粘贴为文本”，当编辑器重新初始化这些更改时，这些更改将丢失。
我是否可以询问编辑器状态，以便将其重新初始化为关闭时所处的状态？
浏览 5提问于2019-09-25得票数 1
回答已采纳
在Orchard CMS从1.8升级到1.10.2 (以及随后升级到TinyMCE4)之后，我正在尝试重新配置TinyMCE以应用一些自定义配置选项。但是，对Modules\ TinyMCE \Scripts\ Orchard -tinymce.js所做的任何更改都不会反映在果园界面的TinyMCE编辑器中。我曾尝试在更改后重新启动IIS站点，但没有成功。
为了让TinyMCE读取配置更改<
浏览 0提问于2017-11-07得票数 0
1回答
我试图根据下拉菜单中选定的选项动态地将内容设置为TinyMCE编辑器。<app-tinymce [elementId]="'myEditor'" [content]="myContentVar"></app-tinymce> this.myContentVar = se
浏览 3提问于2017-11-13得票数 0
回答已采纳
6回答
我使用tinymce作为动态生成至少5条文本的网页。 height : "300", elements : "content",
theme : "simple"<textarea class="mceEditor" name="content" row
浏览 1提问于2013-03-19得票数 15
回答已采纳
2回答
我正在使用和tinymce4.5.6，我试图动态地更改编辑器的本地化。对于本地化，我使用，但是我不能这样做。我努力做到这一点var tinymce=null; setup: function(editor) { },
content_css: "vendor/tinymce/angular-ui-tinymce/
浏览 3提问于2017-04-19得票数 1
回答已采纳
如何动态更改文件路径，以便可以将编辑器的一个实例用于不同的组织功能？
我可以很容易地将变量传递给tinymce.init配置，但我不知道也找不到文件路径的配置选项。
浏览 1提问于2010-03-03得票数 2
回答已采纳
我有网页(index.pl)，在它的div (id = 'right')中，我动态加载了一个包含 textarea .To的页面(editor.pl)，因为TinyMce编辑器动态加载了一个js文件(include_tiny_mce.js)，该文件具有如下tinyMce.init()功能： type:'POST', success:function(msg){src='/
浏览 1提问于2012-07-02得票数 2
回答已采纳
1回答
我正在尝试将word文档中的内容粘贴到tinymce实例中。内容包含§(段落)字符，但TinyMce将其更改为安莉标记。
有没有办法将TinyMce配置为允许使用§这样的特殊字符？
浏览 1提问于2017-02-08得票数 0
我最近为Laravel ktquez/laravel-tinymce安装了一个TinyMCE包，它工作得很好。安装时发布的配置文件为：
'default' => ["selector" => "#tinymc
浏览 0提问于2016-05-21得票数 0
我刚刚安装了TinyMCE并将其配置到我的应用程序中。但我在TinyMCE中看到的基本编辑选项非常少，而且只有很少。无法上传图片，甚至无法调整文本的大小。我是把它配置错了，还是它真的有有限的选择？下面是使用TinyMCE的textfield的屏幕截图：
models.pyfrom django.template.defaultfiltersimport slugify
from django.contrib.auth.
浏览 6提问于2015-12-08得票数 4
回答已采纳
有没有人知道有没有一种方法可以在TinyMCE加载后动态加载和卸载TinyMCE插件？具体地说，我正在考虑询问用户是否希望使用单选按钮或TinyMCE上的某个东西来加载完整页面插件：
<input type="radio" name="fullpage" value="enabled"input type="radio" name="fullpage" value="disabled" /
浏览 5提问于2009-12-07得票数 8
我像这样使用tinymce style_formats： {title : '20px', selector : 'p,div,h1,
浏览 1提问于2012-12-18得票数 3
1回答
我在自己的文件浏览器中使用tinymce：{ title: 'My Title',}
我希望使用file_browser.html iframe内部的javascript动态地更改对话框的标题ti
浏览 2提问于2014-06-28得票数 0
回答已采纳
3回答
当我上传一个图像时，它存储在我在config.php文件中定义的路径(pnetwork/images/tiny)中，如下图所示
但是当我将路径更改为"“时，它给出了错误。
浏览 12提问于2013-06-29得票数 1
在尝试从5.8升级到laravel 6之后，我得到了以下代码错误，以前有人遇到过这种情况吗？
Fatal error: Uncaught TypeError: Argument 2 passed to Illuminate\Routing\UrlGenerator::__construct() must be an instance of Illuminate\Http\Request, null given, called in C:\xampp\htdocs\rebuild\vendor\laravel\framework\src\Illuminate\Routing\RoutingSer
浏览 2提问于2020-03-01得票数 0
2回答
将tinymce JS包含在基本模板中。
mode : "specific_textareas", editor_selectorwritTo元素)，这样就没有tinymce类了。我做错什么了？
我应该为动态内容启动一个tinymce事件吗？
浏览 3提问于2015-02-11得票数 0
我使用的是TinyMCE 6.0.3，而fontsizeselect选项没有显示。下面是我的初始化： selector: '#txtServiceDscr',
menubar: false,
浏览 13提问于2022-06-16得票数 0
回答已采纳
我必须在MODX中制作搜索栏，我想使用AjaxSearch，它是在MODX中构建的。 [!AjaxSearch? &showResults=`0` &landingPage=`52` &showMoreResults=`1` &moreResultsPage=`52`!][!AjaxSearch? &showInputForm=`0` &ajaxSearch=`0`!]但当我键入一些东西并搜索时，我得
浏览 5提问于2013-02-07得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
