Follow Us.RSS

2010年1月8日(金)NicEdit 日本語版

  • NicEdit は、Brian Kirchoff 氏が MIT ライセンスで公開している軽快な WYSIWYG HTML エディタです。MIT ライセンスに基づき、日本語版を作成しましたので、よろしければどうぞ。ファイル数が少ないので、いろいろなツールに組み込みやすいと思います。IEで動かなくなっていた不具合を修正しました。(2010/01/16)

  • (2016年11月28日(月) 午後8時23分43秒 更新)
  • このエントリーをはてなブックマークに追加TweetBuzzurlにブックマークBuzzurlにブックマーク

軽量・軽快な WYSIWYG HTML エディタ「NicEdit」

NicEdit」は、おととしから昨年初頭にかけて日本でも話題になった、軽量・軽快な WYSIWYG HTML エディタです。作者の Brian Kirchoff 氏により、MITライセンスで公開されています。Brian Kirchoff 氏に心より感謝いたします。

今回、MIT ライセンスに基づき、日本語版を作成しました。ただし、株式会社CMONOS と Brian Kirchoff 氏 の間に特別な提携関係などは一切なく、公式に認められた日本語版ではありません。

テキストエリアを NicEdit に置き換えた画面。必要なツールがコンパクトにまとまっており、動作も軽快でとても使いやすいエディタです。

» 今すぐダウンロード

NicEdit 日本語版について

この日本語版にはオリジナル版にない独自の拡張が含まれていますのでご注意ください。

  • フローティングウィンドウのデザインを変更しました。
  • 「iconsPath」オプションに特別な値「auto」を追加し、これをデフォルトとしました。nicEditorIcons.gif が nicEdit.js と同じ階層にあるとき、自動的に nicEditorIcons.gif のパスを取得します。
  • 改行をタグに変換する textarea での使用を想定した「convertToText(true/false)」オプションを追加し、「true」をデフォルトとしました。テキストエリアから NicEdit 編集エリアに変換する際、改行を <br /> タグに変換し、NicEdit 編集エリアからテキストエリアに変換する際、<br /> タグや <div> タグなどを改行に変換します。
  • パネルタイプを選択する「panelType」オプションを追加しました。スタイルを設定するボタンを除外する「nostyle」と画像ボタンを除外する「noimage」を設定できます。
  • 「取り消し」ボタンと「やり直し」ボタンを追加しました。
  • xhtml 変換機能で、タグの入れ子構造が崩れる不具合(「<strong><em>ボールド・イタリック</strong></em>」のようになる)を修正しました。
  • xhtml 変換機能で align="" 属性をスタイルに変換するようにしました。
  • ブロックメニューの見出しタグを h2 と h3 のみとしました。
  • NicEdit 編集エリアの内容をテキストエリアの内容と同期させる「updateInstance()」を追加しました。
  • NicEdit 編集エリアからフォーカスがはずれたときにも、NicEdit 編集エリアの内容をテキストエリアにコピーするようにしました。

2010年3月8日更新

  • panelType に「mini」と「nostylemini」を追加しました。
  • xhtml 変換機能で、前回変換したスタイルがそのまま style 属性に残ってしまい、同じスタイル指定が重複して記述される問題を修正しました。

2010年3月27日更新

  • IE でテキストエリア中の style 属性および class 属性を無視してしまう不具合を修正しました。
  • IE で終了タグを省略した空要素があるとき、XHTML 変換の際、ノードが崩れることがある不具合を修正しました。
  • IE で何度か書き込むと改行が増えてしまう不具合を修正しました。

2010年4月5日更新

  • フォント指定のうち「ゴシック」と「明朝」については、Windows および Mac で日本語にも適用されるようにしました。
  • IE5.5 で、XHTML 変換の際フォントサイズの変更が失われる不具合を修正しました。

2010年5月6日更新

  • IE で背景色を指定できない不具合を修正しました。(ささぽんさん情報提供ありがとうございます!)

2010年5月26日更新

  • Firefox でリンク等を設定する際ボタンを押さずにリターンキーを入力すると、リターンキーが編集エリアに渡ってしまい、リンクテキストが消えてしまう不具合を修正しました。(Pontaさん情報提供ありがとうございます!)
  • Firefox で一行目のテキストを左右中央に揃えようとすると、エラーとなる不具合を修正しました。(Pontaさん情報提供ありがとうございます!/公式フォーラムに解決方法を投稿してくださった omarsmith 氏に感謝します。)

2010年5月31日更新

  • XHTML 変換機能を有効にすると、テキストとして入力した < や > がエスケープされない不具合を修正しました。
  • Firefox で初期値を setContent() で指定できない不具合を修正しました。(Pontaさん情報提供ありがとうございます!)

2010年6月2日更新

  • XHTML 変換機能を有効にすると、XHTML 変換時に画像タグが消えてしまう不具合を修正しました(lenoaさんご指摘ありがとうございます!)。
  • convertToText オプションを有効にしていると内容を持たない要素をすべて削除してしまう不具合を修正しました。

2010年6月11日更新

  • Safari5 でツールチップの幅が 0px になる不具合を修正しました。

2010年6月26日更新

  • オブジェクトリテラルのキーに予約語が使用されている問題を修正しました。(Nishigoさんご指摘ありがとうございます!)
  • フォントの指定に iPad に搭載されているヒラギノフォントを追加しました。

2010年7月7日更新

  • Firefox で太字とイタリックを重複して設定して XHTML 変換を行うと、パネルから設定を解除できなくなる不具合を修正しました。(Pontaさん情報提供ありがとうございます!)

2010年7月8日更新

  • 文字サイズを変更して XHTML 変換を行うと、それ以降の文字サイズ指定が重複して設定される不具合を修正しました。(Pontaさん情報提供ありがとうございます!)
  • InternetExplorer で XHTML 変換を行うと、nicEdit.js コードの一部が混入する場合がある不具合(2010/05/31版以降で発生)を修正しました。

2010年7月9日更新

  • 2010年7月8日版の修正のために、Firefox で文字列に対して設定した文字色および背景色が表示に反映されなくなっていた不具合を修正しました。(Pontaさん情報提供ありがとうございます!)

2010年7月14日更新

  • InternetExplorer で画像を挿入する際回り込みを指定しないとエラーダイアログが出る不具合を修正しました。(Pontaさん情報提供ありがとうございます!)
  • XHTML 変換後、画像の回り込みを再設定できなくなる不具合を修正しました。
  • Opera でリンクを開くウィンドウが設定できない不具合を修正しました。

2010年7月26日更新

  • XHTML 変換を有効にしている場合、InternetExplorer で文字列に文字色と背景色のみ設定されているとき装飾を解除できない不具合を修正しました。(Pontaさん情報提供ありがとうございます!)
  • XHTML 変換を有効にしているとき、文字列に背景色を設定するとインラインスタイル指定が壊れる不具合を修正しました。
  • convertToText を有効にしているとき、<p> タグが適切に設定されない場合がある不具合を修正しました。

2010年8月21日更新

  • XHTML 変換を有効にしている場合、InternetExplorer で文字列に装飾を施すと、タグに nicEdit.js コードの一部が書き出される場合がある不具合を修正しました。(角田さん情報提供ありがとうございます!)
  • XHTML 変換を有効にしている場合、InternetExplorer および Opera で文字色や下線を再編集できない不具合を修正しました。

2010年10月11日更新

  • XHTML 変換を有効にしている場合、<hr> が XHTML変換時に消されてしまう不具合を修正しました。(Ninja104さん情報提供ありがとうございます!)

2010年12月3日更新

  • InternetExplorer で、<object>タグ内に<embed>タグが書かれている場合、<embed>タグがノードツリーから削除されてしまい、<embed>タグを強引に保持させると逆に<object>タグがノードツリーから削除されてしまう問題に対処しました。<embed>タグを強引に保持し、テキストエリアにHTMLを戻す際、<embed>タグから<object>タグを復元します。ただし元のタグを完全に再現することはできません。(hashikunさん情報提供ありがとうございます!)

2012年5月16日更新

  • タッチイベントに対応し、iPhone や iPad での動作を改善しました。(bluezさんご指摘ありがとうございます!)

2012年8月29日更新

  • XHTML 変換が有効となっているとき、子要素のない iframe を削除しないようにしました。(ふじたさんご指摘ありがとうございます!)

2012年8月30日更新

  • XHTML 変換が有効となっているとき、子要素のない iframe を短縮してしまう不具合を修正しました。(ふじたさんご指摘ありがとうございます!)

2013年3月12日更新

  • タッチイベント関連の不具合を修正しました。(shimさん、ふじたさんご協力ありがとうございます!)

2013年10月3日更新

  • 文字列を選択せずにリンクを追加したとき「javascript:nicTemp();」という文字列が追加される不具合を修正しました。「LINK」という文字列が追加されるように変更しました。(さいと~さんご指摘ありがとうございます!)

2013年10月4日更新

  • 文字列を選択せずにリンクを追加したときリンクのタイトルまたは URL を挿入するように変更しました。

2013年12月9日更新

  • Firefox でリンク作成時にタイトルに日本語を入力すると文字化けする場合がある不具合を修正しました。(ゆーいさんご指摘ありがとうございます!)

2014年1月23日更新

  • XHTML変換が有効の時、空の<td><th>が削除されてしまう不具合を修正しました。(ふじたさんご指摘ありがとうございます!)
  • convetToText が有効の時、ブロック要素の前後に改行が増える場合がある不具合を修正しました。

2014年3月18日更新

  • IE10以降でマウスイベントが正常に取得できない場合がある不具合を修正しました。

2014年5月16日更新

  • IE6-7で互換モードによりフローティングウィンドウがウィンドウ幅いっぱいに広がる不具合を修正しました。(ヘルプミーさんご指摘ありがとうございます!)

2014年5月19日更新

  • 動作する環境が少ないため「両端揃え」ボタンをデフォルトで表示するツールから外しました。(よっさんさんご指摘ありがとうございます!)

2014年7月3日更新

  • エディタにフォーカスしたとき、環境によってエラーが発生する不具合を修正しました。(さいとうさんご指摘、解決方法のご教示ありがとうございます!)

2014年12月12日更新

  • XHTML変換を利用しているとき、行揃えを指定すると、XHTML変換後、行揃えを再指定できなくなる不具合を修正しました。(すずきさんご指摘ありがとうございます!)

2016年1月26日更新

  • convertToText を有効にしているとき、書き込みに二重の改行がひとつもない場合、一つ目の改行が無視されてしまう不具合を修正しました。

2016年2月3日更新

  • convertToText を有効にしているとき改行の連続を保持する「keepBrTags」オプションを追加しました。

2016年11月18日更新

IE11でフォントを変更して HTML ソース編集を行うと、フォント指定が壊れる不具合を修正しました。(ふじたさんご指摘ありがとうございます!)

2016年11月28日更新

  • 値が省略された属性が削除される不具合を修正しました。(ふじたさんご指摘ありがとうございます!)

参考資料

コメント

konica

軽量なWYSIWYGを探して、
Dlさせて頂きました。
取り急ぎお礼まで( ; ̄ω ̄)ゞ

konicahttp://ameblo.jp/konica/ (2010年2月24日(水) 午後2時37分44秒)

報告

NicEditは大変使いやすいので、日本語化+バグ改修は助かります。ありがとうございます。
私の手元でいくつか発生した不具合を報告します。IE8で発生する(Firefoxでは発生しません)不具合です。

  1. 普通の使い方、NicEditで編集→formで送信→DBに格納→DBの値を取得→textareaに入れる→NicEdit起動、を繰り返すと、改行がどんどん増えていく
     これはIE8のcontentEditableの仕様というか、もうこんなのバグだと思うのですが、改行コードが
    に変換されてしまうため、保存する毎に改行の数が倍になっていきます。
    →私の手元では
    <p>タグを全部諦めて、replace(/
    <p>/ig, '').replace(/<\/p>/ig, '
    ') とやってます。
tockri (2010年3月26日(金) 午前11時2分41秒)

報告(2)

上記コメント、HTMLが変換されませんでした・・・
「改行コードが<BR>に変換されてしまう」
「replace(/<p>/ig, '').replace(/<\/p>/ig, '')」
と書いてました。

  1. XHTMLオプションをつけると文字装飾(色、フォント、サイズ、下線)が消える。IE8のデバッガで追ってみたところ、恐ろしいことに、ie8では<span style="font-size:x-large">の要素のstyle属性のattributeオブジェクトからnodeValueが取れないようです。(toXHTMLメソッド中)
    →私の手元ではXHTMLへの綺麗な変換を諦めて、cleanupメソッドをそっくり飛ばしてしまっています。

以上、長々と失礼しました。

tockri (2010年3月26日(金) 午前11時10分32秒)
タンジェリン-ニコリン

ご報告ありがとうございます

ご報告ありがとうございます。個人的にフォントサイズなどをあまりいじってほしくないのもあって、すっかり見逃していました。こちらでもIEでの挙動について少し調べてみます。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/ (2010年3月26日(金) 午後2時39分52秒)
タンジェリン-ニコリン

tockri さんのご指摘を参考にいろいろ調べてみました。IE で style 属性の値を取り出せないのは、こちらで紹介されているバグが影響しているようです。それから、tockri さんご指摘の不具合とは異なるかも知れないのですが、改行やノードが増えてしまう不具合についても、修正しました。たぶんこれで多少改善するのではないかと思います。参考になるご指摘ありがとうございましたm(_ _)m。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/ (2010年3月27日(土) 午前5時26分43秒)

IEでの背景色

本家のForumでも話題になっていたのですが(そして修正されていないのですが)IEのexecCommandにはhiliteColorが無く、代わりにbackcolorをつかうようになっています。

"hiliteColor"

bkLib.isMSIE?"backcolor":"hiliteColor"

クロスブラウザ対応はなかなか大変かと思いますが、メンテナンスがんばってください!

ささぽんメールソフトを開きます。 (2010年5月1日(土) 午前4時30分8秒)
タンジェリン-ニコリン

ささぽんさん、貴重な情報ありがとうございます! IEでは背景色が設定できないなあ、、、とは思っていたのですが、ちゃんと理由があったんですね...(^^;。連休明けぐらいまでには、教えていただいた修正を試してみようと思います。また何かお気づきの点がありましたら、ぜひぜひご指摘くださいm(_ _)m。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/ (2010年5月1日(土) 午前8時39分41秒)

「リンクを追加」ボタンの不具合

「リンクを追加」アイコンでURL, タイトル, ウィンドウという順にデフォルトでは入力していくと思いますが、Firefox(確認したのは3.6)ではTabボタンで切り替えて入力していき「リンクを追加」ボタンを押下すると選択文字が消えリンクも貼られないようです。

Ponta (2010年5月25日(火) 午前10時38分28秒)

div要素で囲んだTextareaでの不具合

続けての投稿ですみません。

http://tech.ironhearts.com/blog/archives/161
こちらのblogで挙げられている通り、Firefox+nicEditで、div要素で囲まれたtextareaタグ内にnicEditを使うと右寄せ・左寄せ等のアイコンでエラーが出るそうです。

クロスブラウザ対応は本当に大変だと思いますが、よろしくお願いします。

Ponta (2010年5月25日(火) 午後2時51分47秒)
タンジェリン-エヘッ

Ponta さん、不具合のご報告ありがとうございます。

「リンクを追加」ボタンの不具合

Firefox では、リターンキーの入力で決定ボタンを押すと、キー入力イベントの解除に失敗し、リターンが編集エリアに渡ってしまうようです。そこで、必ずキー入力イベントを解除するようにしました。

div要素で囲んだTextareaでの不具合

こちらはご紹介の記事を通じて以前から知ってはいたのですが、解決方法がわからずそのままになっていました。今日もうんうんうなって調べたのですが、さっぱり回避方法がわからず...。ダメ元で本家フォーラムを覗いてみたところ、ちょっと前までなかった新しい書き込みが! まず本家をチェックするべきだと思いました。。。

長らく解決されずに放置されてきた問題をスパッと解決してくださったニューヨークのウェブサイト制作者 omarsmith 氏に心より感謝します。

ただ、どうもこれ、Firefox そのもののバグに起因する不具合のようで、解決方法を見てもなんだかスッキリしないかんじです。とりあえず回避はできたかと思います。

また何かありましたらお気軽にご指摘下さい。お待ちしております。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/ (2010年5月26日(水) 午前0時38分39秒)

追記 : div要素で囲んだTextareaでの不具合

修正有難うございます!
ただ[nicInstance].setContent()で
Firefoxでは値を挿入することができなくなってしまいました。。。

div要素で囲んだTextareaでの不具合も解消しつつ、上記の問題を避ける方法ってありますでしょうか?

ponta (2010年5月28日(金) 午後5時41分33秒)
タンジェリン-エヘッ

こんばんは。ご指摘の不具合ですが、MacOS X + Firefox3.6 では再現できませんでした。

念のため確認させてください。

[nicEditor].instanceById('Textarea ID').setContent('値')

としたときに値をセットできない、という症状でしょうか?

CMONOS.JP 開発者 ちーhttps://cmonos.jp/ (2010年5月28日(金) 午後10時29分16秒)

こんにちわ。

bkLib.onDomLoaded(function() {
var myNicEditor = new nicEditor();
myNicEditor.setPanel('myNicPanel');
myNicEditor.addInstance('myInstance');

var value_data = 'セットしたい値';
myNicEditor.instanceById('myInstance').setContent(value_data);
});

上記のようにコードを記述しているのですが、
コンソール上では

this.frameContent is undefined

と出てしまっています。
WinXP + Firefox3.6です。

何か間違えていますかね…?

Ponta (2010年5月31日(月) 午後0時33分43秒)
タンジェリン-エヘッ

間違ってはいないと思いますけど、nicEdit は初期値を setContent() で設定することをあまり想定していないようです(通常は編集対象要素を初期値とするからでしょう)。

ご指摘の不具合は、iframe 描画のために setTimeout() が間に入っていることが原因でした。つまり、インスタンス生成の一瞬後に iframe が作られるため、インスタンス生成と同時に setContent() しても iframe がまだ存在しないわけです。

(前回、当方で確認した方法は、パネル描画後ボタンを押すと内容を差し替えるというスクリプトでしたので、問題なく動作しました。)

そこで、iframe 描画前に setContent() された場合、その値を初期値として一時保存することで対処しました。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/ (2010年5月31日(月) 午後4時2分40秒)

YUI Compressorでのエラー回避について

nicEditをYUI Compressorでソースコード最適化を図る際、オブジェクトリテラルのキーに予約語が使用されています。

float -> 'float'

上記のようにクォーテーションで囲めば解決します。

不具合ではないかもしれませんが、報告までに。。。

Nishigo (2010年6月25日(金) 午後8時32分2秒)
タンジェリン-エヘッ

ご指摘ありがとうございます

オリジナル版を改変したときに予約語をむき出しにしてしまったようです。。。ご指摘ありがとうございました。さっそく修正させていただきましたm(_ _)m。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/ (2010年6月26日(土) 午後1時57分34秒)

タグについて

お世話になります。

hrが反映されない様です(再配布分及びdemo
サイト含め)。
本家(オリジナル)はdemoサイトも含め機能しているので、お時間有りましたら調査して頂けませんでしょうか。

Ninja104http://rideon.atnifty.com (2010年10月10日(日) 午後7時16分26秒)
タンジェリン-ニコリン

ご指摘ありがとうございます。XHTML変換時にできるだけ不必要なタグを消すようにしたのですが、<hr>も削除してしまっていたようです。さっそく修正いたしましたので、お手数ですがもう一度ダウンロードしてお試しいただけましたら幸いです。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2010年10月11日(月) 午前4時6分6秒)

素晴らしい!

まさかこんなに早く対応して頂けるとは。
素晴らしいの一言に尽きます!!!
軽量コンパクトな日本語ローカライズされたWISIWYGエディタを探していたので、大満足です。
今後もご活躍をお祈り申し上げます。
有難うございました。

Ninja104http://rideon.atnifty.com (2010年10月11日(月) 午前11時16分15秒)

あっ、

WYSIWYGでした。すみません、、、

Ninja104http://rideon.atnifty.com (2010年10月11日(月) 午前11時18分14秒)
タンジェリン-エヘッ

こちらこそ有益なご指摘感謝しております。また何かありましたらぜひお知らせください。お待ちしておりますm(_ _)m。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2010年10月11日(月) 午後6時45分37秒)
ボンダイ-エヘッ

demo01の場合

こんにちはちょっと質問です。

demo01の場合のnicEditors.allTextareas()
この関数をよびだしてテキストエリアに適用する場合でエディタをnoimageにしたいのですが書き方がわかりません。

どうか教えてください。

もり (2010年10月27日(水) 午前9時28分10秒)
タンジェリン-エヘッ
nicEditors.allTextAreas({panelType : 'noimage'})

としてください(^^)

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2010年10月27日(水) 午後2時42分17秒)
グレープ-ショボン

pタグが入る

ありがとうございます。
改行をbr
タグに自動変換する textarea での使用なのですがエディターに文字を書き込みますと
pタグが入ってしまうのです。

pタグが入らなくする設定があるのでしょうか???

すみません
よろしくお願いします。

もり (2010年10月30日(土) 午前1時2分46秒)
タンジェリン-エヘッ

こんばんは。日本語版では、(弊社プロダクト CMONOS.JP に合わせ、)convertToText オプションを false にしない限り、<p>タグなどを除去するようにしました。

ただ、環境によってうまく動作していない可能性があります。ブラウザのバージョンや、nicEdit にどのようなオプションをつけて使用されているのかお知らせいただければ、対応できるかもしれません。

以上よろしくお願いいたします。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2010年10月30日(土) 午前1時30分5秒)
グラファイト-ショボン

ありがとうございます

ちー様
ありがとうございます。
demo01の設定で
<script type="text/javascript" src="../nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
</script>
これを書いているだけであります。
環境はデモはちゃんと動いているので関係ないと思いますがXPでsleipnir2.9.6 IEでも確認しています。

やったことは設置したサイトがShift-jisのサイトなのでスクリプトをTeraPadでShift-jisにて保存して設置しました。
これでは駄目なのでしょうか?
素人ですみません。
教えてください。
よろしくお願いします。

もり (2010年10月30日(土) 午後5時47分37秒)

デモ

デモでもなっていました。

うーん???

もり (2010年10月30日(土) 午後6時48分30秒)

FireFox

すみません

FireFoxなら大丈夫でした。

ブラウザによるのですねえ

そうなのかあ

もり (2010年10月30日(土) 午後7時13分44秒)
タンジェリン-エヘッ
NEXT>>

PC 向けページに移動する