올바른 레이아웃이 아닌 Yui Simpleeditor

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

문제

나는 멋진 단순 에디터를 위해 Yui 라이브러리를 다운로드했습니다. 설치 및 간단한 테스트를 만들 때. 제대로 표시되지 않습니다.

이것이 어떻게 생겼는지입니다.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>
도움이 되었습니까?

해결책

답을 직접 찾았습니다.

Yui Simpleeditor 문서는 정말 나쁩니다. 이 요소에 대해 메인 스타일을 설정해야합니다.

내 예에서 나는 Textarea 주위에 래퍼를 설정 한 다음 스타일링이 픽업됩니다.

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

또한이 클래스를 양식 요소 나 신체에 배치 할 수도 있습니다. Simpleeditor로 교체하려는 Textarea 노드의 부모 여야합니다.

다른 팁

"Yui-Skin-Sam"클래스를 신체 태그에 넣어야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top