在TinyMCE简单主题中将工具栏移到顶部

如何在TinyMCE Simple主题中将工具栏移到顶部？谢谢

tinyMCE.init({
    mode : "textareas",
    theme : "simple"
    theme_simple_toolbar_location : "top"
});

重要的一点是“工具栏位置”参数。

---

注意：以下说明适用于TinyMCE 3.x。TinyMCE 4.x现在可用，您可能应该改用它。有关更多信息，请参阅

---

只有在TinyMCE中使用

主题：高级

时，工具栏才能移动到顶部。没有

theme\u simple\u toolbar\u location

，只有

theme\u advanced\u toolbar\u location

。请参阅此处的文档

您可以做的是将编辑器用作

theme:advanced

，然后使用

theme\u advanced\u buttons\u 1\n

属性自定义按钮。这里有记录

例子： 示例中的代码没有经过测试，但应该可以工作。它将显示一个编辑器，顶部有粗体、斜体和下划线按钮

tinyMCE.init({
  mode : "textareas",
  theme : "advanced",
  theme_advanced_toolbar_location : "top",
  theme_advanced_buttons1 : "bold,italic,underline",
  theme_advanced_buttons2 : "",
  theme_advanced_buttons3 : ""
});

---

因此答案是：当使用

theme:simple

时，不能移动按钮。要执行此操作，必须编辑themes/simple文件夹中的编辑器\u template.js

下面是将工具栏置于顶部的更改代码

(function() {
    var a = tinymce.DOM;
    tinymce.ThemeManager.requireLangPack("simple");
    tinymce.create("tinymce.themes.SimpleTheme", {
        init: function(c, d) {
            var e = this,
                b = ["Bold", "Italic", "Underline", "Strikethrough", "InsertUnorderedList", "InsertOrderedList"],
                f = c.settings;
            e.editor = c;
            c.contentCSS.push(d + "/skins/" + f.skin + "/content.css");
            c.onInit.add(function() {
                c.onNodeChange.add(function(h, g) {
                    tinymce.each(b, function(i) {
                        g.get(i.toLowerCase()).setActive(h.queryCommandState(i))
                    })
                })
            });
            a.loadCSS((f.editor_css ? c.documentBaseURI.toAbsolute(f.editor_css) : "") || d + "/skins/" + f.skin + "/ui.css")
        },
        renderUI: function(h) {
            var e = this,
                i = h.targetNode,
                b, c, d = e.editor,
                f = d.controlManager,
                g, tbody;
            i = a.insertAfter(a.create("span", {
                id: d.id + "_container",
                "class": "mceEditor " + d.settings.skin + "SimpleSkin"
            }), i);
            i = g = a.add(i, "table", {
                cellPadding: 0,
                cellSpacing: 0,
                "class": "mceLayout"
            });
            tbody = c = a.add(i, "tbody");
            i = b = a.add(a.add(i, "td"), "div", {
                "class": "mceIframeContainer"
            });
            i = a.add(a.add(c, "tr", {
                "class": "last"
            }), "td", {
                "class": "mceToolbar mceLast",
                align: "center"
            });
            c = e.toolbar = f.createToolbar("tools1");
            c.add(f.createButton("bold", {
                title: "simple.bold_desc",
                cmd: "Bold"
            }));
            c.add(f.createButton("italic", {
                title: "simple.italic_desc",
                cmd: "Italic"
            }));
            c.add(f.createButton("underline", {
                title: "simple.underline_desc",
                cmd: "Underline"
            }));
            c.add(f.createButton("strikethrough", {
                title: "simple.striketrough_desc",
                cmd: "Strikethrough"
            }));
            c.add(f.createSeparator());
            c.add(f.createButton("undo", {
                title: "simple.undo_desc",
                cmd: "Undo"
            }));
            c.add(f.createButton("redo", {
                title: "simple.redo_desc",
                cmd: "Redo"
            }));
            c.add(f.createSeparator());
            c.add(f.createButton("cleanup", {
                title: "simple.cleanup_desc",
                cmd: "mceCleanup"
            }));
            c.add(f.createSeparator());
            c.add(f.createButton("insertunorderedlist", {
                title: "simple.bullist_desc",
                cmd: "InsertUnorderedList"
            }));
            c.add(f.createButton("insertorderedlist", {
                title: "simple.numlist_desc",
                cmd: "InsertOrderedList"
            }));
            c.renderTo(i);
            i = c = a.add(i, "tbody");
            i = a.add(c, "tr");
            return {
                iframeContainer: b,
                editorContainer: d.id + "_container",
                sizeContainer: g,
                deltaHeight: -20
            }
        },
        getInfo: function() {
            return {
                longname: "Simple theme",
                author: "Moxiecode Systems AB",
                authorurl: "http://tinymce.moxiecode.com",
                version: tinymce.majorVersion + "." + tinymce.minorVersion
            }
        }
    });
    tinymce.ThemeManager.add("simple", tinymce.themes.SimpleTheme)
})();

---

这是真的。由于您没有指定任何原始代码，文档还提到布局管理器必须设置为“SimpleLayout”，这是默认设置，但由于@Honza Pokorny未显示任何代码，因此请确保没有指定默认为SimpleLayout的布局管理器，或者您没有使用其他布局管理器。这种情况下，它不太工作。链接已断开，请fix@Alexei：TinyMCE wiki已移动到新位置。我已更新到正确位置的链接。您在此处发布之前是否尝试过此操作？它不在文档中，也不起作用。