代码之家  ›  专栏  ›  技术社区  ›  Jay Godse

yahoo.widget.editor-如何配置文本的字体大小

  •  0
  • Jay Godse  · 技术社区  · 15 年前

    我使用的是yui富文本编辑器(yahoo.widget.editor),除了一件事外,它运行得很好。我无法确定如何配置我在编辑器框中键入的文本的字体大小(input type=“textarea”)。我希望那篇文章是150%。我知道我需要一个CSS规则的形式:

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

    但我无法确定“某个与yui相关的选择器”的身份。

    我希望能得到任何帮助。

    谢谢,杰伊

    更多信息:

    我希望我的网络显示大字体,所以我使用了一个CSS样式的DIV,如下所示:

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

    所讨论的HTML页面片段是:

    <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>
    

    我将yui编辑器绑定到网页底部的javascript片段中,如下所示:

    <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编辑器文档),但它没有起作用。

    2 回复  |  直到 15 年前
        1
  •  1
  •   Eric Miraglia    15 年前

    松鸦,

    此组件的作者DAV Glass在Yui图书馆论坛上为其用户提供了巨大帮助: http://yuilibrary.com/forum/

    如果你在这里没有得到答案,一定要尝试在那里张贴。

    -埃里克

        2
  •  0
  •   Jay Godse    15 年前

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

    出于某种原因,我找到了css:configuration参数,它是正确的,但我做了其他错误的事情,导致它失败。正确的答案是,当我调用“new yahoo.widget.editor()”时,将下面的行放在我拥有CSS的地方:

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

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