Question

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

相反，我们理想地喜欢微小的mce编辑器默认隐藏所有按钮，除了下拉列表，其中包含您要转录的所有类型的文档。然后，用户可以选择文档类型，然后按钮出现。

这可能与Tinymce有关吗？还有其他人这样做过吗？

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

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负载按钮根据用户选择

2 个答案: