个人中心
gpt4 book ai didi

css - 如何在 TinyMce 中设置字体大小

转载 作者：行者123 更新时间：2023-11-28 12:13:44 28 4
gpt4 key购买 nike

我知道已经有很多关于此的问答，但到目前为止我还没有找到对我有帮助的。

无论我用我的 css 文件做什么 - “content.min.css 等” - 似乎总是有一个带有“font-size: small;”的内联元素否决，即使我在“content.min.css”中使用“font-size: 15pt !important”。

这是生成的 tinymce 代码的 HTML:

<body id="tinymce" class="mce-content-body " contenteditable="true" onload="window.parent.tinymce.get('mce_1').fire('load');" spellcheck="false">
    <p>
        <span data-mce-style="font-size: small;"></span>
    </p>
    <p>
        <span data-mce-style="font-size: small;" style="font-size: small;"></span>
    </p>
</body>

我想摆脱 ´style="front-size: small;"环境。但是如何呢？

最佳答案

解决方法:

  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;

}

关于css - 如何在 TinyMce 中设置字体大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26053874/

28 4 0
文章推荐： javascript - 不透明度淡化仅在延迟时有效
文章推荐： javascript - 将字符串加载到数组的数组中
文章推荐： javascript - 并行调用一系列 Promise，但按顺序解决它们，而不等待其他 Promise 解决
文章推荐： Javascript找到所有 "\"并替换为 "/"
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com