将按钮添加到 tinymce答案

【问题标题】：Add Button to tinymce将按钮添加到 tinymce
【发布时间】：2014-04-03 08:36:04
【问题描述】：

我想要做的是，我想要一个按钮，单击该按钮文本区域的文本将被格式化为特定样式，如字体颜色：红色和字体样式：粗体。我对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>

【问题讨论】：

必须添加插件很重要

标签： javascript php css tinymce

【解决方案1】：

要将按钮添加到 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>

【讨论】：

No.simple 空白文本区域
哦，对于选择器值，它必须是选择器：“textarea#area2”，
好的，现在它显示带有文件、编辑、视图、格式菜单的富文本区域。但仍然没有按钮。
添加的插件仍然没有按钮
磨碎它的工作原理！按钮显示。但它没有将字体颜色应用于文本