Tinymce load buttons according to users selection

Question

We are using Tinymce for transcription/annotation. Each button is a type of 'thing'. However we have a lot of things and so dont want all of them to load.

Instead we would ideally like tiny mce editor to have all the buttons hidden by default, except a drop down list which contains all the types of documents you are transcribing. The user can then select the document type and voila the buttons appear.

Is this possible with Tinymce? Has anyone else done this?

This has to be done within the tinymce editor as we are loading the editor as a floating window.

score 1 · Answer 1 · answered Aug 04 '15 at 07:46

Have you considered dynamically loading and unloading tinyMCE instances based on the user input?

I've put together an example here (with a drop down) which demo's 3 different Tiny MCE versions with varying buttons. There would be a much nicer / cleaner way to do this - it's a crude example to demo the concept (and showing it working)

http://fiddle.tinymce.com/fVeaab/2

Full code:

<script type="text/javascript">

function loadTinyMce(type) {
    var toolbar

    if(type!==null) {
        switch(type) {
          case "a":
              toolbar = "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image";
          break;
          case "b":
              toolbar = "insertfile undo redo | styleselect | bold italic";
          break;
          case "c":
              toolbar = "bullist numlist outdent indent | link image";
          break;
      }

        //Kill current (Probably better way to do this)
        destroy();

      //Run setup function with a custom set of toolbars    
      setup(toolbar);
    }



}

function setup(toolbarOptions) {

    tinymce.init({
      selector: "textarea",
      plugins: [
          "advlist autolink lists link image charmap print preview anchor",
          "searchreplace visualblocks code fullscreen",
          "insertdatetime media table contextmenu paste"
      ],
      toolbar: toolbarOptions
  });
}

function destroy() {
    tinymce.remove();
}

</script>

<select onchange="loadTinyMce(this.value);">
<option value="">Choose</option>
<option value="a">Example A</option>
<option value="b">Example B</option>
<option value="c">Example C</option>
</select>

<Br><Br>
<textarea name="content" id="content"></textarea>

Thanks for being the first to answer and get this kicked off. I have given you the bounty and dhruvpal the correct answer as both answers were great. — Paul M, Aug 05 '15 at 10:12

score 1 · Accepted Answer · answered Aug 04 '15 at 18:32

The key is to keep settings intact and modify those on user-selected option in your case.

I modified @Pete's code a little bit, and that works just fine.

Here is the code:

    <script type="text/javascript">

    var settings = {
        selector: "textarea",
        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste"
        ],
        toolbar: []
    };

    function loadTinyMce(type) {
        if (type !== null) {
            switch (type) {
                case "a":
                    settings.toolbar = "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image";
                    break;
                case "b":
                    settings.toolbar = "insertfile undo redo | styleselect | bold italic";
                    break;
                case "c":
                    settings.toolbar = "bullist numlist outdent indent | link image";
                    break;
            }

            tinymce.remove();

            //Run setup function with a custom set of toolbars  
            tinymce.init(settings);
        }



    }

</script>

<select onchange="loadTinyMce(this.value);">
<option value="">Choose</option>
<option value="a">Example A</option>
<option value="b">Example B</option>
<option value="c">Example C</option>
</select>

<Br><Br>
<textarea name="content" id="content"></textarea>

Great thanks, you and Pete got me out of a hole. I have given you the best answer. I do have another Tinymce question that no one has answered if you can help.http://stackoverflow.com/questions/31696391/tinymce-set-text-color-of-editor-button — Paul M, Aug 05 '15 at 10:15

Tinymce load buttons according to users selection

2 Answers2