YUI SimpleEditor布局不正确

StackOverflow https://stackoverflow.com/questions/1618188

题

我已经为优秀的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>
有帮助吗？

解决方案

我自己找到了答案。

YUI SimpleEditor文档非常糟糕。必须为此元素设置主要样式。

在我的例子中，我在textarea周围设置了一个包装器，然后造型就开始了。

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

您还可以将此类放在表单元素或正文上。它必须是要用simpleeditor

替换的textarea节点的父节点

其他提示

你需要把“yui-skin-sam”放在上面。一方面，你的身体标签上的课程。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top