如何在TinyMce中设置字体大小

解决方案：

1. 在ko.bindingHandler中包含tinymce选项content_css：“ / my-local-path / mycontent.css”

2. 将文件“ /my-local-path/mycontent.css”添加到您的解决方案中

我发布我的bindingHandler只是为了以防其他人需要看一个例子。

ko.bindingHandlers.tinymce = {
init: function (element, valueAccessor, allBindingsAccessor,
                context, arg1, arg2) {
    var options = allBindingsAccessor().tinymceOptions || {};
    var modelValue = valueAccessor();
    var value = ko.utils.unwrapObservable(valueAccessor());

    var el = $(element);
    var id = el.attr('id');

    //options.theme = "advanced";
    //options.theme = "modern";
    options.content_css = "/DesktopModules/MyModule/css/mycontent.css";  // DNN7.1 with module name "MyModule" 

    options.menubar = false;
    options.plugins = [
        "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
        "table contextmenu directionality template textcolor paste fullpage textcolor"
    ];

    options.extended_valid_elements = "span[!class]";


    //tinymce buttons
    //http://www.tinymce.com/tryit/classic.php
    options.toolbar_items_size = 'small';
    options.toolbar =
    "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | forecolor backcolor | hr removeformat | subscript superscript  ";

    //options.inline = "true";

    //handle edits made in the editor. Updates after an undo point is reached.
    options.setup = function (editor) {
        editor.on('change', function (e) {
            if (ko.isWriteableObservable(modelValue)) {
                var content = editor.getContent({ format: 'raw' });
                modelValue(content);
            }
        });

    };

    el.html(value);

    $(element).tinymce(options);

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        var tinymceInstance = tinyMCE.get(id);
        if (tinymceInstance !== undefined) {
            // if instance already exist, then get rid of it... we don't want it
            tinymceInstance.remove();
        }
    });
},
update: function (element, valueAccessor, allBindingsAccessor, context) {

    var el = $(element);
    var value = ko.utils.unwrapObservable(valueAccessor());
    var id = el.attr('id');

    //handle programmatic updates to the observable
    // also makes sure it doesn't update it if it's the same. 
    // otherwise, it will reload the instance, causing the cursor to jump.
    if (id !== undefined) {
        //$(el).tinymce();

        var tinymceInstance = tinyMCE.get(id);
        if (!tinymceInstance)
            return;
        var content = tinymceInstance.getContent({ format: 'raw' });
        if (content !== value) {
            //tinymceInstance.setContent(value);
            valueAccessor(content);
            //$(el).html(value);
        }
    }
}};

“ mycontent.css”示例：

body#tinymce { 
    /* NB! Without specifying "#tinymce" this setting will effect other body´s */

    color: magenta;                 // Just to show the difference
    background-color: lightyellow;  // Just to show the difference
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:14px; 
    margin:18px;

}