YUI SimpleEditor nicht richtig Layout

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

Frage

Ich habe die YUI-Bibliothek für den netten SimpleEditor heruntergeladen. Bei der Installation und einen einfachen Test erstellt. Es wird nicht richtig angezeigt werden.

Dies ist, wie es aussehen soll. http://developer.yahoo.com/yui/examples/editor/simple_editor. html

und das ist, wie es mit meinem Beispiel sieht: http://ms.robertcabri.nl/testing.php

Hier ist der Code meiner Testseite: 

<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>
War es hilfreich?

Lösung

Nun, die Antwort selbst gefunden.

YUI SimpleEditor Dokumentation ist wirklich schlecht. Das Haupt Styling hat für dieses Element gesetzt werden.

in meinem Beispiel i das Textfeld festgelegt haben und eine Hülle um und dann das Styling nimmt. 

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

Sie können auch diese Klasse platzieren auf einem Formularelement oder auf dem Körper. Es hat ein Elternteil von dem Textknoten sein, das Sie mit dem simpleeditor ersetzen möchten

Andere Tipps

Sie müssen die "yui-Haut-sam" Klasse auf Ihrem Körper-Tag setzen, für eine Sache.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top