y.okano blog: NicEdit

ラベル NicEdit の投稿を表示しています。すべての投稿を表示

2014年7月9日水曜日

NicEdit で見たままのデザインにする

MIT ライセンスで自由に使える NicEdit ですが、
他の WYSIWIG エディタと同様に初期状態だと、
見たままのデザインになっていません。
（最終的に出来上がりのページに適用される CSS が適用されていないため）

最終的に出来上がった HTML を公開するページで
読み込まれる CSS を NicEdit を使用するページに適用すると、
見たままのデザインになります。

CSS の優先順位で適用されない部分は、
.nicEdit-main など編集領域のセレクタをうまく使って適用されるようにする必要があります。

2014年7月4日金曜日

MITライセンスで使用できるWYSIWYGエディタ「CLEditor」

これまで NicEdit という MIT ライセンスの WYSIWYG エディタを使っていたのですが、
同じく MIT ライセンスの CLEditor も良さそうなので、こちらを使ってみています。
（似たような名前で CKEditor がありますがこちらは MIT ライセンスじゃないので注意）

http://premiumsoftware.net/CLEditor

TinyMCE は LGPL で、多分改変した際に公開義務がつくので
（ちょっとよくわかってない）
おとなしく MIT ライセンスのエディタを使っていきます。

2014年5月8日木曜日

NicEdit: テキストの変更をリアルタイムに監視する

JavaScript の WISYWIG エディタ NicEdit は MIT ライセンスで使用できます。
リアリタイムに編集状態を取得したい場合は keyup や click イベントを使用します。

<textarea> 要素を NicEdit で WYSIWYG エディタを生成した場合、
テキストを入力する領域が <textarea> の１つ上に生成され、
太字や斜字などのボタンが更にその１つ上に生成されます。
jQuery の prev() を使って、上記の２つの要素を取得してイベントを設定します。

$('#editor').prev().on('keyup', update);
$('#editor').prev().prev().on('mouseup', update);

これだけでは不十分です。
フォントサイズやフォントフォントファミリーを選択する場合は、
.nicEdit-pane というクラスの要素がその都度生成されます。
こちらは document にイベントを割り当てて、
途中で生成された要素であってもイベントを取得できるようにします。
パネルをクリックしてからエディタに反映されるまで若干時間が掛かるので、
100ms 程度待ってからデータを取得するようにしています。

ソースコードは GitHub へアップロードしてあります。
デモはこちらへアップロードしました。

2014年4月27日日曜日

NicEdit: 非表示状態での初期化は display:none ではなく visibility: hidden で

NicEdit で画面上の <textarea> をエディタに変換する際に、
画面上に非表示の状態で変換する場合、
width: 100% となっていても幅が広がらないケースがあります。

visibility: hidden; で非表示にしている場合は幅が広がった状態で初期化されますが、
display: none; で非表示にしている場合は幅が広がりません。
エディタは変換時の <textarea> の幅で固定表示となるため、
width: 100% とする場合は visibility: hidden; で隠しておく必要があります。

デモ
http://yokano.jp/demo/nic_edit_hidden/

コード
https://github.com/yokano/nic_edit_hidden

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 が詳しいです。

2014年4月16日水曜日

JavaScript: 日本語対応 WYSIWYG エディタ NicEdit

CMS を作るときに WYSIWYG エディタが必要になったので探してみたところ、
MIT ライセンスで使用できるエディタとして CLEditor と NicEdit が良さそうでした。

特に NicEdit は株式会社 CMONOS によって日本語化されたバージョンが配布されていました。

NicEdit 日本語版

日本語版ではインタフェースが日本語されている以外にも、いくつか追加機能が付いているようです。今回は NicEdit 日本語版を導入することにしました。

導入方法については明日書きます。