【问题标题】:Is there a way to set the default font and font-size in CKEditor?有没有办法在 CKEditor 中设置默认字体和字体大小?
【发布时间】:2012-10-30 15:26:24
【问题描述】:

我一直在寻找解决方案一段时间,我发现的唯一修复只影响文本在编辑器本身中的显示方式,而不影响生成的文本在发送/保存到其他地方时的外观。我说的是 CSS 修复和类似的东西。

我正在使用 CKEditor 通过我们的 Web 应用程序编写和发送电子邮件,虽然 css 修复更改了编辑器本身显示的字体,但收到的电子邮件仍显示在 TNR 或从电子邮件客户端继承的任何内容中。当然,除非我从插件中更改每个段落的字体和大小。

根据我在插件中设置字体和大小时所注意到的,CKEditor 使用新更改的样式(例如 @ 987654321@) 我想我可以用我想要的字体和大小样式将整个结果包装在一个 span 或 div 中,但这可能会干扰用户的模板和样式。

有没有办法从插件本身设置默认文本样式(如电子邮件收件人所见),或者我必须想出一个破解它。

【问题讨论】:

    标签: ckeditor


    【解决方案1】:

    这是我发现强制 ck 编辑器创建默认字体的唯一方法。 IE 即使没有选择字体,它也会将输入的文本包装在(默认)字体范围中,因此将输出格式化文本。如果您希望更改具有通用性,请将以下内容添加到 config.js。否则,也应该可以将其添加到一个实例中。虽然我没试过。

    config.font_defaultLabel = 'Arial';
    

    这将使下拉菜单默认为“Arial”。尽管即使这样也不能像我希望的那样工作。首先,编辑器必须被激活(不仅仅是加载)才能将下拉菜单设为默认值。然后与手动选择不同,该值不会在下拉框中突出显示。它只是显示。

    然后将其添加到您的默认配置选项下方:

    CKEDITOR.on( 'instanceReady', function( ev ) {
         ev.editor.setData('<span style="font-family:Arial, Verdana, sans-serif;">&shy;</span>');
    });
    

    这将使用您需要的跨度预先填充文本区域。但是,您必须在 span 标签中包含一些字符才能强制此“hack”工作。所以你会在你的输出中遇到你并不真正想要的东西。我在网上某处找到的原始版本使用:

    &shy;
    

    这似乎相对无害。

    我一直在寻找一种更好的方法(如果有人知道,我会很高兴)。大多数人只是说捕获输出并重新格式化它。这对我来说真的不是一个选择。也可以使用自定义插件来完成此操作。这对我来说也不太可行。

    希望这至少可以帮助某人节省一些时间。

    附:原件来自 CK editor 的支持板。这是链接:forum

    【讨论】:

    • 非常感谢,这实际上是唯一对我有用的解决方案。尝试配置 content.css 没有做任何事情,添加其他选项也没有!这实际上是有效的,对我来说唯一的方法!
    • 尺寸怎么样
    • 如此广泛采用的编辑器怎么没有默认字体大小选项,这超出了我的理解。感谢您提供这些技巧
    【解决方案2】:

    如果您想在编辑器之外更改文本的样式,那么您必须设置它的样式...在编辑器之外 :)。无法使用电子邮件样式表中的 AFAIK,所以剩下的就是用具有内联样式的 div 包装。

    要在 CKEditor 中获得相同的结果,您应该编辑 contents.css 并为 body 设置与 div 包装器相同的样式。

    下一步是从工具栏中删除格式组合,因为它是基于标记的。对于电子邮件,最好使用样式组合,因为您可以定义适用于每种样式的内联样式、标签和属性。检查styles.js

    【讨论】:

      【解决方案3】:

      将此添加到您的 config.js 文件中

       CKEDITOR.config.font_defaultLabel = 'Arial';
       CKEDITOR.config.fontSize_defaultLabel = '20'; 
      

      然后当你的CKEditor被触发时它会被改变。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2017-12-10
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-12-13
        • 1970-01-01
        • 1970-01-01
        • 2013-07-04
        相关资源
        最近更新 更多