根据用户选择的 Tinymce 加载按钮

Question

我们正在为 transcription/annotation 使用 Tinymce。每个按钮都是'thing'的一种。但是我们有很多东西，所以不希望所有的东西都加载。

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

Tinymce 可以吗？还有其他人这样做过吗？

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

Answer 1

您是否考虑过根据用户输入动态加载和卸载 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>

Answer 2

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

我稍微修改了@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>

根据用户选择的 Tinymce 加载按钮

Tinymce load buttons according to users selection

javascript

tinymce