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」を入れる必要があります; bodyタグのクラス、1つの理由。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top