Tinymce 根据用户选择加载按钮

Question

我们正在使用 Tinymce 进行转录/注释。每个按钮都是一种“东西”。但是我们有很多东西，所以不想全部加载。

相反，我们希望微型 mce 编辑器默认隐藏所有按钮，除了包含您正在转录的所有文档类型的下拉列表。然后用户可以选择文档类型，然后按钮就会出现。

Tinymce 可以做到这一点吗？有其他人这样做过吗？

这必须在 tinymce 编辑器中完成，因为我们将编辑器加载为浮动窗口。

Answer 1

关键是保持设置不变，并根据您的情况修改用户选择的选项。

我稍微修改了@Pete 的代码，效果很好。

代码如下：

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

Answer 2

您是否考虑过根据用户输入动态加载和卸载 tinyMCE 实例？

我在这里汇总了一个示例（带有下拉菜单），该示例演示了具有不同按钮的 3 个不同的 Tiny MCE 版本。会有一种更好/更简洁的方法来做到这一点 - 这是一个演示概念（并显示它有效）的粗略示例

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

完整代码：

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