javascript - TinyMce 格式化问题

Question

我最近在我正在开发的应用程序中使用了 TinyMCE。一切正常，但工具栏显示在底部。我查看了文档。

TinyMCE Configuration

如果您使用的是高级模式而非简单，本文档展示了如何配置工具栏的位置。我已确认我使用的是正确的模式，我的默认布局是 SimpleLayout，但是当我使用他们指定使用的代码时，我没有看到更改。

 theme_advanced_toolbar_location : "top"

这是我的脚本的样子

 tinyMCE.init({
width : "500",
height : "100",

// General options
mode : "textareas",
theme : "advanced",
editor_selector : "mceSimple"

// Theme options
theme_advanced_buttons1 :"bold,italic,underline,strikethrough,forecolor,backcolor",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_layout_manager : "SimpleLayout"
theme_advanced_resizing : true,

});

我知道我不需要指定布局管理器，但我这样做只是为了表明我将其指定为 SimpleLayout

我是不是做错了什么，不允许它在 textarea 的顶部显示工具栏而不是底部？

Answer 1

我几个月前使用过 tinyMCE。我确实在让工具栏以正确的方式做出响应时遇到了一些麻烦。我做了一些工作并找到了一些答案，但我不记得这些答案的确切含义。希望我使用的这段代码对您有所帮助，效果很好:

tinyMCE.init({
content_css: "/connectation/css/tinyMCEcontent.css",
theme_advanced_font_sizes: "8pt,9pt,10pt,11pt,12pt,13pt,14pt,16pt,18pt,20pt",
font_size_style_values : "8pt,9pt,10pt,11pt,12pt,13pt,14pt,16pt,18pt,20pt",
mode : "textareas",
theme: "advanced",
theme_advanced_buttons1: "bold,italic,underline,|,fontselect,fontsizeselect",
theme_advanced_buttons2: "forecolor,backcolor,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,hr",
theme_advanced_buttons3: ""
});

除了指向我自己的 CSS 之外，我看不出有什么不同。以下是 css 文件的内容，以防有帮助:

    body, td, pre {
    font: 9pt Century Gothic, Verdana, Arial, Sans-Serif;
    color: #333333;
    }

    body {
    background-color: #FFFFFF;
    }

    .mceVisualAid {
    border: 1px dashed #BBBBBB;
    }

    /* MSIE specific */

    * html body {
    scrollbar-3dlight-color: #F0F0EE;
    scrollbar-arrow-color: #676662;
    scrollbar-base-color: #F0F0EE;
    scrollbar-darkshadow-color: #DDDDDD;
    scrollbar-face-color: #E0E0DD;
    scrollbar-highlight-color: #F0F0EE;
    scrollbar-shadow-color: #F0F0EE;
    scrollbar-track-color: #F5F5F5; 
    }