将元素添加到 Tinymce Object
[英]Adding Element to Tinymce Object
问题描述
我想通过 html 按钮单击向 tinymce 编辑器添加一个按钮。 我在变量setting中声明了 tinymce 的配置 object。 首先，我在 tinymce init function 中使用这个变量作为tinymce.init(setting); . 然后，在重新初始化期间，我通过setting.setup=function (editor){insert_content;add_button;}; 并重用于二审。 我可以删除、创建和渲染新实例。 但是该按钮未插入工具栏中。 在重新初始化期间，我删除了以前的 tinymce 实例。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../../bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="../../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="tinymce-dist-5.7.0/jquery.tinymce.min.js"></script>
<script src="tinymce-dist-5.7.0/tinymce.min.js"></script>
<script src="../../../bootstrap/js/bootstrap.min.js"></script>
<script src="../../../../../plugin/tinymce-variable-master/src/plugin.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
setting={
selector: "#a",
plugins: 'print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons variable',
toolbar: 'mysecondbutton customInsertButton pagebreak undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen preview save print | insertfile image media template link anchor codesample | ltr rtl',
content_css: "content.css",
},
height:600,
};
tinymce.init(setting);
$('#reinit').click(function(){
editor =tinymce.get('a');
con =editor.getContent();
tinymce.EditorManager.execCommand('mceRemoveEditor',true, 'a');
insert_content =editor.insertContent(con);
add_button =editor.ui.registry.addButton('customInsertButton',
{
text: 'My Button',
onAction: function (_)
{
editor.insertContent(' <strong>It\'s my button!</strong> ');
}
});
setting.setup=function (editor){insert_content;add_button;};
var ed = new tinymce.Editor('a', setting , tinymce.EditorManager);
ed.render();
})
})
</script>
<textarea id="a" name="mytextarea" rows="30">
</textarea>
<button id="reinit">reinitialize</button>
1 个解决方案
解决方案1
0 已采纳 2021-03-19 09:16:31
当我们插入整个 function 而不通过变量调用时，此 setting.setup 工作
setting.setup=function (editor)
{
editor.ui.registry.addButton('customInsertButton',
{
text: 'My Button',
onAction: function (_)
{
editor.insertContent(' <strong>It\'s my button!</strong> ');
}
});
};
另一种方式，将元素（函数）添加到空对象（新）。 然后，使用Object.assign组合对象（新）和现有对象（设置）
var setup = {
setup: function (editor)
{
editor.ui.registry.addButton('customInsertButton',
{
text: 'My Button',
onAction: function (_)
{
editor.insertContent(' <strong>It\'s my button!</strong> ');
}
});
editor.setContent(con);
}
};
//combine both object as new object
var obj = Object.assign({}, setting, setup);
将tinymce编辑器添加到元素对象而不是选择器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.