YUI SimpleEditor not right layout

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

Question

I've downloaded the YUI library for the nice SimpleEditor. When installed and created a simple test. It will not display right.

this is how it should look like. http://developer.yahoo.com/yui/examples/editor/simple_editor.html

and this is how it looks with my example: http://ms.robertcabri.nl/testing.php

Here is the code of my testing page:

<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>
Was it helpful?

Solution

Well found the answer myself.

YUI SimpleEditor documentation is really bad. The Main styling has to be set for this element.

in my example i've set a wrapper around the textarea and then the styling picks up.

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

You also could place this class on a form element or on the body. It has to be a parent of the textarea node you want to replace with the simpleeditor

OTHER TIPS

You need to put the "yui-skin-sam" class on your body tag, for one thing.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top