YUI SimpleEditor не верный макет - PullRequest
1 голос
/ 24 октября 2009

Я скачал библиотеку 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 ]

2 голосов
/ 24 октября 2009

Хорошо нашел ответ сам.

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

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

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

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

0 голосов
/ 24 октября 2009

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

...