CODEWITHSUNDEEP
javascriptphpcsstinymce
Nirali Joshi
Nirali Joshi

Reputation: 2008

Add Button to tinymce

What i want to do is , I want one button, on click of that button text area's text will get formatted with particular style like font color : red and font style : bold. I am not much aware of js.

I am trying this but not getting button on textarea. Please help.

 <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>

Upvotes: 3

Views: 1693

Answers (1)

radia
radia

Reputation: 1486

to add button to tinyMCE you have to add this directly to your 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'

            }
 }
}

Here's an edited version of your code with some corrections :

<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>

Upvotes: 1

Related Questions