2014年4月26日土曜日

NicEdit で幅が狭くなる対策

JavaScript の WYSIWYG エディタの NicEdit はサードパーティ製の日本語版も開発されており、MIT ライセンスで使用できるため便利です。

NicEdit ではスクリプトをロードした後に、ページ上の全ての <textarea> を WYSIWYG エディタに変換する関数を持っています。

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="path/nicEdit_ja/nicEdit.js"></script>
        <script>
            $(function() {
                nicEditors.allTextAreas();
            });
        </script>
        <style>
            textarea {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <textarea></textarea>
    </body>
</html>

この時、エディタの幅は元の <textarea> の幅と同じになるはずなのですが、
CSS で <textarea> の幅を 100% にしていても、
画面いっぱいに広がらず、狭い幅のエディタが生成されてしまう場合があります。
レンダリングの状態によって変わり、jQuery.ready() などを使っても、
解決できませんでした。

この場合は <textarea> の要素に style 属性として、
直接幅を定義することで回避できます。
nicEdit が <textarea> の style 属性を直接セットするため、
CSS で定義した幅が優先されないケースが有るため、
今のところは <textarea> の style 属性を直接指定しておくのが良いかと思います。 
<textarea style="width:100%"></textarea>

NicEdit については日本語版のページよりも公式の Wiki が詳しいです。

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)