YUI SimpleEditor pas bonne mise en page

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

Question

J'ai téléchargé la bibliothèque YUI pour le bel SimpleEditor. Une fois installé et créé un test simple. Il ne s'affichera pas à droite.

voici à quoi cela devrait ressembler. http://developer.yahoo.com/yui/examples/editor/simple_editor. html

et voici comment cela se présente avec mon exemple: http://ms.robertcabri.nl/testing.php

Voici le code de ma page de test: 

<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>
Était-ce utile?

La solution

Bien trouvé la réponse moi-même.

La documentation de YUI SimpleEditor est vraiment mauvaise. Le style principal doit être défini pour cet élément.

dans mon exemple, j'ai défini un wrapper autour de la zone de texte, puis le style reprend. 

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

Vous pouvez également placer cette classe sur un élément de formulaire ou sur le corps. Il doit s'agir d'un parent du noeud textarea que vous souhaitez remplacer par le simpleeditor

Autres conseils

Vous devez mettre le " yui-skin-sam " classe sur votre balise body, pour une chose.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top