将按钮添加到tinymce
[英]Add Button to tinymce
问题描述
我想要做的是，我想要一个按钮，单击该按钮时，文本区域的文本将使用特定样式进行格式化，例如字体颜色：红色和字体样式：粗体。 我不太了解js。
我正在尝试此操作，但没有在textarea上获得按钮。 请帮忙。
<script type="text/javascript" src="../tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea#area2",
toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor",
toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",
setup: function (editor) {
editor.addButton('mybutton', {
type: 'menubutton',
text: 'My split button',
icon: false,
onclick : function() {
//js example
var content = tinymce.get('area2').getContent();
content.style.color='red'
content.style.font='bold'
}
})
}
});
</script>
</head>
<body>
<textarea cols="" rows="" name="content" id="area2" style="width: 300px; height: 100px;"></textarea>
1 个解决方案
解决方案1
1 已采纳 2014-04-03 08:58:12
要向tinyMCE添加按钮，您必须将其直接添加到您的init中；
setup: function (editor) {
editor.addButton('mybutton', {
type: 'menubutton',
text: 'My split button',
icon: false,
onclick : function() {
//js example
var content = tinyMCE.get('area2').getContent();
content.style.color='red'
content.style.font='bold'
}
}
}
这是经过修改的代码版本：
<script type="text/javascript">
tinymce.init({
selector: "textarea#area2",
mode: "textareas",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste"
],
toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor",
toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft | mybutton",
setup: function (editor) {
editor.addButton('mybutton', {
type: 'menubutton',
text: 'My split button',
icon: false,
onclick : function() {
//js example
var content = tinymce.get('area2').getContent();
content.style.color='red'
content.style.font='bold'
}
})
}
});
</script>
</head>
<body>
<textarea cols="" rows="" name="content" id="area2" style="width: 300px; height: 100px;"></textarea>
TinyMCE - 如何添加带名称的按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.