2009-10-24 2 views
1

Я загрузил библиотеку YUI для приятного SimpleEditor. При установке и создании простого теста. Он не будет отображаться правильно.YUI SimpleEditor не правильная компоновка

вот как это должно выглядеть. 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> 

ответ

2

Ну нашел ответ самих.

Документация YUI SimpleEditor очень плохая. Для этого элемента должен быть установлен Основной стиль.

В моем примере я установил обертку вокруг текстового поля, а затем стилизовался.

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

Вы также можете разместить этот класс на элементе формы или на корпусе. Он должен быть родителем узла textarea, который вы хотите заменить простым прокси-сервером.

+0

вы можете добавить класс в форму тоже – Eineki

0

Вам нужно поставить класс «yui-skin-sam» на свой тег тела, с одной стороны.

+0

Он должен быть на родительском элементе. Так мой пример работает. –