views:

75

answers:

2

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"&gt;&lt;/script&gt;

  <script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/element/element-min.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/container/container_core-min.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/editor/simpleeditor-min.js"&gt;&lt;/script&gt;
  <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>
+2  A: 

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

Robert Cabri
you can add the class to the form too
Eineki
A: 

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

Pointy
It needs to be on a parent element. So my example works.
Robert Cabri