YUI SimpleEditor 布局不正确答案

【问题标题】：YUI SimpleEditor not right layoutYUI SimpleEditor 布局不正确
【发布时间】：2009-10-24 14:53:36
【问题描述】：

我已经为漂亮的 SimpleEditor 下载了 YUI 库。当安装并创建一个简单的测试。它不会正确显示。

这就是它应该的样子。 http://developer.yahoo.com/yui/examples/editor/simple_editor.html

这就是我的示例的外观： http://ms.robertcabri.nl/testing.php

这是我的测试页面的代码：

<html>

    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="http://ms.robertcabri.nl/js/yui/assets/skins/sam/skin.css" />
        <link rel="stylesheet" type="text/css" href="http://ms.robertcabri.nl/js/yui/editor/assets/skins/sam/simpleeditor.css" />
        <link rel="stylesheet" type="text/css" href="http://ms.robertcabri.nl/js/yui/button/assets/skins/sam/button.css" />
        <script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/yahoo-dom-event/yahoo-dom-event.js"></script>

        <script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/element/element-min.js"></script>
        <script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/container/container_core-min.js"></script>
        <script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/editor/simpleeditor-min.js"></script>
        <script type="text/javascript">
            window.onload = function () {

                var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event;

                var editor = new  YAHOO.widget.SimpleEditor('blaat', {
                    dompath: true,
                    handleSubmit: false
                });

                editor.render();

            };
        </script>

    </head>
    <body>

        <form action="#" method="post" id="test">
            <fieldset>
                <legend>test</legend>
                <textarea name="blaat" id="blaat" cols="30" rows="5"></textarea>
            </fieldset>
        </form>
    </body>
</html>

【问题讨论】：

标签： javascript html yui rich-text-editor

【解决方案1】：

我自己找到了答案。

YUI SimpleEditor 文档真的很糟糕。必须为此元素设置 Main 样式。

在我的示例中，我在 textarea 周围设置了一个包装器，然后样式就开始了。

<div class="yui-skin-sam">
  <textarea></textarea>
</div>

您也可以将此类放在表单元素或正文上。它必须是您想用 simpleeditor 替换的 textarea 节点的父节点

【讨论】：

你也可以将类添加到表单中

【解决方案2】：

一方面，您需要将“yui-skin-sam”类放在身体标签上。

【讨论】：