Yahoo.widget.Editor - 如何配置文本的字体大小答案

【问题标题】：Yahoo.widget.Editor - How to configure font size of textYahoo.widget.Editor - 如何配置文本的字体大小
【发布时间】：2010-01-07 19:32:43
【问题描述】：

我正在使用 YUI 富文本编辑器 (YAHOO.widget.Editor)，它工作正常，除了一件事。我无法弄清楚如何配置我在编辑器框中键入的文本的字体大小（输入类型 =“textarea”）。我希望该文本为 150%。我知道我需要以下形式的 CSS 规则：

some-YUI-related-selector {
  font-size: 150%; 
}

但我无法弄清楚“some-YUI-related-selector”的身份。

如果能得到任何帮助，我将不胜感激。

谢谢，杰

更多信息：

我希望我的网站显示大字体，因此我为有问题的 div 使用了 CSS 样式，如下所示：

div.newsform {
  font-size:120%;
}

div.newsform input {   
  font-size:120%;
}
input#newsgoals {
  font-size:150%;
}

有问题的 HTML 页面 sn-p 是：

<div class="newsform">
  <p>Some text</p>
  <form>
    <input type="text" name="sname"  style="width:353px"/>
    <input type="textarea" id="newsgoals" name="newsgoals" ></input><br/>
    <input type="submit" value="Add" />
  </form>
</div>

我在网页底部的一个Javascript sn-p中绑定了YUI Editor，如下：

<script>
var myNewSEditor = new YAHOO.widget.Editor('newsgoals', {
    height: '300px',
    width: '440px',
    dompath: false,
    animate: true,
    css: YAHOO.widget.SimpleEditor.prototype._defaultCSS, // + 'html { font-size:130%; }',
// { css: YAHOO.widget.SimpleEditor.prototype._defaultCSS + 'ADD MYY CSS HERE' }
    toolbar: {
        titlebar: 'Write Your Goals Here',
        buttons: [
            { group: 'textstyle', // label: 'Font Style',
                buttons: [
                { type: 'push', label: 'Bold', value: 'bold' },
                { type: 'push', label: 'Italic', value: 'italic' },
                { type: 'push', label: 'Underline', value: 'underline' },
                { type: 'separator' },
                { type: 'select', label: 'Arial', value: 'fontname', disabled: true,
                    menu: [
                        { text: 'Arial', checked: true },
                        { text: 'Arial Black' },
                        { text: 'Comic Sans MS' },
                        { text: 'Courier New' },
                        { text: 'Lucida Console' },
                        { text: 'Tahoma' },
                        { text: 'Times New Roman' },
                        { text: 'Trebuchet MS' },
                        { text: 'Verdana' }
                    ]
                },
                { type: 'spin', label: '22', value: 'fontsize', range: [ 9, 75 ], disabled: true },
                { type: 'separator' },
                { type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },

                { type: 'push', label: 'HTML Link CTRL + SHIFT + L', value: 'createlink', disabled: true }
                ]
            }
        ]
    }
});
myNewSEditor.render();


</script>

div (class="newsform") 中的所有内容都将字体渲染为 120%，除了 YUI 编辑器，它继续渲染非常小。如果我在没有 YUI 编辑器的情况下使用网页，文本区域 (input#newsgoals) 会以 150% 正确呈现。

我可以在 YUI 编辑器的工具栏中配置颜色和字体大小，但不能在文本区域框中。

我什至尝试在工具栏中配置“css:”属性，然后将我的 CSS 规则添加到 _defaultCSS（根据 YUI 编辑器文档），但没有成功。

【问题讨论】：

标签： css yui

【解决方案1】：

杰，

此组件的作者 Dav Glass 在 YUI 库论坛上为他的用户提供了很大帮助：http://yuilibrary.com/forum/

如果您在这里没有得到答案，请务必尝试在那里发帖。

-埃里克

【讨论】：

【解决方案2】：

哇哦！谢谢埃里克·米拉格利亚。指向Dav Glass' forum 的指针将我带到了我需要去的地方。

由于某种原因，我发现 css: 配置参数是正确的，但是我做错了其他事情并导致它失败。正确的答案是将以下行放在我有 css 的地方：当我调用“new Yahoo.widget.Editor()”时：

css: YAHOO.widget.SimpleEditor.prototype._defaultCSS  + 'body { font-size:130%; background-color:red;color:white;}'

这足以让字体大小和编辑器背景更改为我想要的。

【讨论】：