javascript - 在 TinyMCE 中设置默认字体大小失败

Question

我正在使用 TinyMCE，我想将默认字体大小设置为 12。

在这里，我为事件的 TinyMCE 编辑器分配了一个变量，但它不起作用...

HTML 内容:

<textarea id="text_message"></textarea>

JavaScript:

$("#text_message").tinymce({        
    // Location of TinyMCE script
    script_url: '/static/app/a/scripts/tinymce/jscripts/tiny_mce/tiny_mce.js'
});

var fontSize = 12;
tinyMCE.activeEditor.formatter.apply('fontSize', 
{
    value: fontSize
});

Answer 1

您应该等待几个不同的事件阶段:

1. 页面已准备就绪，处于某种状态。 (也可以使用tinyMCE.init()，视情况而定。)
2. 编辑器已初始化，您可以开始使用它了。

第一个可以使用以下任一方式完成:

$(document).ready()

或者:

$(window).load()

两者都处理与页面就绪相关的事件。 $.ready() 在 DOM 可用时触发，$.load() 在 window 的情况下在页面内容已加载时触发已加载(例如内联 img、script 和 link 源)。 .ready() 稍微先于另一个触发，但在许多情况下两者都可以工作。

^{注意，下面我有 jQuery(function($){...}); 这是 $(document).ready(); 的快捷方式； 并帮助管理与全局使用 $ 的其他框架的冲突。}

在第二阶段你需要添加一个initialization event handler您的编辑器创建请求，例如:

$.tinymce({ init_instance_callback: function(){ ... } });

完整:

$tiny.tinymce({
    // ... other stuff here, comma-delineated
    init_instance_callback: function(){
        ac = tinyMCE.activeEditor;

        ac.dom.setStyle(ac.getBody(), 'fontSize', fontSize);
    }
    // ... other stuff here, comma-delineated
});

您可以在此处设置font-size 的display 值(使用fontSize 的Javascript 属性，因为Javascript 不允许在标签中使用 -，例如 font-size)。这会等待您要添加的编辑器进行初始化并说“嘿，我现在在这里”。一旦收到通风口触发通知，就可以将编辑器 body(ac.getBody() 返回的内容)设置为 font-size: 18px。

这意味着一旦您选择保存编辑器内容，将不会返回font-size；在大多数情况下(除非您选择 plugins : "fullpage" initialization option )，它位于编辑器“body”(字面意思是 iframe 的 body 元素)中的上方。所以这是一个“默认值”，但不会在内容本身内明确设置。

如果您的 Chrome 或 Firefox 安装了 Firebug 附加组件，请查看此 fiddle 上的控制台:

http://jsfiddle.net/userdude/9PuUx/1/

这是工作代码演示和一个 fiddle 演示的链接(我使用 18px 来轻松查看更改):

jQuery(function a($){
    var $tiny = $("#text_message"),
        fontSize = '18px',
        ac;

    $tiny.tinymce({
        mode : "textareas",
        theme : "advanced",
        theme_advanced_buttons1 : "fontsizeselect,bold,underline,italic",
        init_instance_callback: function(){
            ac = tinyMCE.activeEditor;

            ac.dom.setStyle(ac.getBody(), 'fontSize', fontSize);
        }
    });
});​

http://jsfiddle.net/userdude/9PuUx/

tinyMCE 文档和 API 可能有点困惑和缺乏，而且我也不是使用它的专家，所以我知道可能有四五种其他方法来解释正在发生的事情以及如何做到这一点。你的旅费可能会改变。如果您对我这样做的方式有疑问，或者它似乎没有达到您想要或期望的效果，请发表评论让我知道。