NicEdit は、Brian Kirchoff 氏が MIT ライセンスで公開している軽快な WYSIWYG HTML エディタです。MIT ライセンスに基づき、日本語版を作成しましたので、よろしければどうぞ。ファイル数が少ないので、いろいろなツールに組み込みやすいと思います。IEで動かなくなっていた不具合を修正しました。(2010/01/16)
「NicEdit」は、おととしから昨年初頭にかけて日本でも話題になった、軽量・軽快な WYSIWYG HTML エディタです。作者の Brian Kirchoff 氏により、MITライセンスで公開されています。Brian Kirchoff 氏に心より感謝いたします。
今回、MIT ライセンスに基づき、日本語版を作成しました。ただし、株式会社CMONOS と Brian Kirchoff 氏 の間に特別な提携関係などは一切なく、公式に認められた日本語版ではありません。
テキストエリアを NicEdit に置き換えた画面。必要なツールがコンパクトにまとまっており、動作も軽快でとても使いやすいエディタです。
この日本語版にはオリジナル版にない独自の拡張が含まれていますのでご注意ください。
IE11でフォントを変更して HTML ソース編集を行うと、フォント指定が壊れる不具合を修正しました。(ふじたさんご指摘ありがとうございます!)
軽量なWYSIWYGを探して、
Dlさせて頂きました。
取り急ぎお礼まで( ; ̄ω ̄)ゞ
NicEditは大変使いやすいので、日本語化+バグ改修は助かります。ありがとうございます。
私の手元でいくつか発生した不具合を報告します。IE8で発生する(Firefoxでは発生しません)不具合です。
上記コメント、HTMLが変換されませんでした・・・
「改行コードが<BR>に変換されてしまう」
「replace(/<p>/ig, '').replace(/<\/p>/ig, '')」
と書いてました。
以上、長々と失礼しました。
ご報告ありがとうございます。個人的にフォントサイズなどをあまりいじってほしくないのもあって、すっかり見逃していました。こちらでもIEでの挙動について少し調べてみます。
tockri さんのご指摘を参考にいろいろ調べてみました。IE で style 属性の値を取り出せないのは、こちらで紹介されているバグが影響しているようです。それから、tockri さんご指摘の不具合とは異なるかも知れないのですが、改行やノードが増えてしまう不具合についても、修正しました。たぶんこれで多少改善するのではないかと思います。参考になるご指摘ありがとうございましたm(_ _)m。
本家のForumでも話題になっていたのですが(そして修正されていないのですが)IEのexecCommandにはhiliteColorが無く、代わりにbackcolorをつかうようになっています。
"hiliteColor"
↓
bkLib.isMSIE?"backcolor":"hiliteColor"
クロスブラウザ対応はなかなか大変かと思いますが、メンテナンスがんばってください!
ささぽんさん、貴重な情報ありがとうございます! IEでは背景色が設定できないなあ、、、とは思っていたのですが、ちゃんと理由があったんですね...(^^;。連休明けぐらいまでには、教えていただいた修正を試してみようと思います。また何かお気づきの点がありましたら、ぜひぜひご指摘くださいm(_ _)m。
「リンクを追加」アイコンでURL, タイトル, ウィンドウという順にデフォルトでは入力していくと思いますが、Firefox(確認したのは3.6)ではTabボタンで切り替えて入力していき「リンクを追加」ボタンを押下すると選択文字が消えリンクも貼られないようです。
続けての投稿ですみません。
http://tech.ironhearts.com/blog/archives/161
こちらのblogで挙げられている通り、Firefox+nicEditで、div要素で囲まれたtextareaタグ内にnicEditを使うと右寄せ・左寄せ等のアイコンでエラーが出るそうです。
クロスブラウザ対応は本当に大変だと思いますが、よろしくお願いします。
Ponta さん、不具合のご報告ありがとうございます。
「リンクを追加」ボタンの不具合
Firefox では、リターンキーの入力で決定ボタンを押すと、キー入力イベントの解除に失敗し、リターンが編集エリアに渡ってしまうようです。そこで、必ずキー入力イベントを解除するようにしました。
div要素で囲んだTextareaでの不具合
こちらはご紹介の記事を通じて以前から知ってはいたのですが、解決方法がわからずそのままになっていました。今日もうんうんうなって調べたのですが、さっぱり回避方法がわからず...。ダメ元で本家フォーラムを覗いてみたところ、ちょっと前までなかった新しい書き込みが! まず本家をチェックするべきだと思いました。。。
長らく解決されずに放置されてきた問題をスパッと解決してくださったニューヨークのウェブサイト制作者 omarsmith 氏に心より感謝します。
ただ、どうもこれ、Firefox そのもののバグに起因する不具合のようで、解決方法を見てもなんだかスッキリしないかんじです。とりあえず回避はできたかと思います。
また何かありましたらお気軽にご指摘下さい。お待ちしております。
修正有難うございます!
ただ[nicInstance].setContent()で
Firefoxでは値を挿入することができなくなってしまいました。。。
こんばんは。ご指摘の不具合ですが、MacOS X + Firefox3.6 では再現できませんでした。
念のため確認させてください。
[nicEditor].instanceById('Textarea ID').setContent('値')
としたときに値をセットできない、という症状でしょうか?
こんにちわ。
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です。
何か間違えていますかね…?
間違ってはいないと思いますけど、nicEdit は初期値を setContent() で設定することをあまり想定していないようです(通常は編集対象要素を初期値とするからでしょう)。
ご指摘の不具合は、iframe 描画のために setTimeout() が間に入っていることが原因でした。つまり、インスタンス生成の一瞬後に iframe が作られるため、インスタンス生成と同時に setContent() しても iframe がまだ存在しないわけです。
(前回、当方で確認した方法は、パネル描画後ボタンを押すと内容を差し替えるというスクリプトでしたので、問題なく動作しました。)
そこで、iframe 描画前に setContent() された場合、その値を初期値として一時保存することで対処しました。
nicEditをYUI Compressorでソースコード最適化を図る際、オブジェクトリテラルのキーに予約語が使用されています。
float -> 'float'
上記のようにクォーテーションで囲めば解決します。
不具合ではないかもしれませんが、報告までに。。。
オリジナル版を改変したときに予約語をむき出しにしてしまったようです。。。ご指摘ありがとうございました。さっそく修正させていただきましたm(_ _)m。
お世話になります。
hrが反映されない様です(再配布分及びdemo
サイト含め)。
本家(オリジナル)はdemoサイトも含め機能しているので、お時間有りましたら調査して頂けませんでしょうか。
ご指摘ありがとうございます。XHTML変換時にできるだけ不必要なタグを消すようにしたのですが、<hr>も削除してしまっていたようです。さっそく修正いたしましたので、お手数ですがもう一度ダウンロードしてお試しいただけましたら幸いです。
まさかこんなに早く対応して頂けるとは。
素晴らしいの一言に尽きます!!!
軽量コンパクトな日本語ローカライズされたWISIWYGエディタを探していたので、大満足です。
今後もご活躍をお祈り申し上げます。
有難うございました。
こちらこそ有益なご指摘感謝しております。また何かありましたらぜひお知らせください。お待ちしておりますm(_ _)m。
こんにちはちょっと質問です。
demo01の場合のnicEditors.allTextareas()
この関数をよびだしてテキストエリアに適用する場合でエディタをnoimageにしたいのですが書き方がわかりません。
どうか教えてください。
nicEditors.allTextAreas({panelType : 'noimage'})
としてください(^^)
ありがとうございます。
改行をbr
タグに自動変換する textarea での使用なのですがエディターに文字を書き込みますと
pタグが入ってしまうのです。
pタグが入らなくする設定があるのでしょうか???
すみません
よろしくお願いします。
こんばんは。日本語版では、(弊社プロダクト CMONOS.JP に合わせ、)convertToText オプションを false にしない限り、<p>タグなどを除去するようにしました。
ただ、環境によってうまく動作していない可能性があります。ブラウザのバージョンや、nicEdit にどのようなオプションをつけて使用されているのかお知らせいただければ、対応できるかもしれません。
以上よろしくお願いいたします。
ちー様
ありがとうございます。
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にて保存して設置しました。
これでは駄目なのでしょうか?
素人ですみません。
教えてください。
よろしくお願いします。
デモでもなっていました。
うーん???
すみません
FireFoxなら大丈夫でした。
ブラウザによるのですねえ
そうなのかあ