NicEdit 検証ファイル(setContentでの装飾時の不具合の可能性)

検証ファイルのアップロードありがとうございます。

ファイル内容と症状（Firefox において、<strong>と<em>が重複して指定されている場合、パネルから指定を解除できない）を確認しました。

修正可能かどうか調査したいと思います。明後日までにはお返事いたします。しばらくお待ちください。

検証ファイルのリンクについては、開発者ブログでのコメントを含め、このまま残すとご迷惑かと思いましたので削除させていただきました。ご了承くださいm(_ _)m。

〈追伸〉
ファイルをアップロードできなかったのは、MIME-TYPE 制限にひっかかってしまったのかもしれません。お手数おかけしましたm(_ _)m。

ちーです。

ご指摘の不具合は、XHTML変換を利用しているとき、Firefox でのみ発生するようです。そこで、Firefox の場合は読み込み時に古風なタグに書き換えるよう修正しました。

• <strong>→<b>
• <em>→<i>

読み込み時にこのように書き換えると問題なく動作するようです。

最新版をアップロードしましたのでよろしければダウンロードしてください。今回もご指摘ありがとうございましたm(_ _)m。

修正ありがとうございます。
早速ダウンロードし動作確認させていただきました。

またこちらもFirefoxでの検証結果なのですが、アップロードしましたファイルと同様の手順で、
あらかじめspanタグのstyle属性にfont-sizeを指定していますと、nicEditの文字サイズボタン変更が反映されないようです。
（正確にはあらかじめ記述されていたspanタグの中にspanタグが挿入されています。）

こちらはxhtml変換利用是非に関わらず再現するものと認識しています。
ご確認の程よろしくお願い致します。

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

ブラウザの HTML 編集コマンドは HTML4 時代に作られたものですので、XHTML に変換すると何かと不具合を引き起こすようです。

そこで、XHTML 変換を利用している場合、一度古いタグ(<b><i><font>など)に変換してから読み込むようにしました。

また、修正の過程で見つかった、IE で XHTML 変換を使用すると、nicEdit.js コードの一部が属性として混入する不具合についても修正しました。

今回も、不具合のご指摘ありがとうございました。今後ともどうぞよろしくお願いいたします。

弊社ではカスタムフィールドCMS「CMONOS.JP」を開発しております。

カレンダーや地図付きデータベースなど、さまざまに使うことができますので、機会がありましたら、御社の案件に採用することをぜひご検討下さい。受託開発なども承っております。

早速の修正ありがとうございます。

何度も大変恐縮なのですが、
先程の修正分で文字色の背景文字色の
装飾が外れてしまったようです。
（ソース上ではspanタグ内にcolor及びbackground-color属性はありますが、
リッチエディタ上では通常の文字色となってしまっているようです。）

こちら同様にsetContent()で該当の値を入れた場合で、Firefoxでは確認しました。

よろしくお願い致します。

弊社ではカスタムフィールドCMS「CMONOS.JP」を開発しております。

有難うございます。
まだnicEdit.jsのみしか拝見させていただいておりませんでしたので、
まとまった時間に触れさせていただきます。

続けての投稿で失礼します。

また、下記の手順で動作を行った場合にのみ
「文字背景色」が行全体に反映されてしまいます。

1. 対象を指定し、「番号リスト」もしくは「リスト」を装飾。

1. 同対象に「文字背景色」を指定。

また、2.動作のあとに新たに「番号リスト」or「リスト」を装飾すると文字背景色自体が外されてしまっているようです。

引き続きよろしくお願い致しますm(__)m

不具合のご報告ありがとうございます。どうやら時計の針を戻し過ぎたようです。。。

HTML 編集コマンドに限っては、<font> タグがお好みと見て、背景色指定と文字色指定についても、bgcolor 属性と color 属性に変換したのですが、最近の Firefox は色指定を16進数ではなく rgb(R,G,B) で指定するため、設定が反映されなくなっていました。

これら色指定については、style 属性で指定するように戻しましたので、問題は解消されたかと思います。

もう一件のご指摘ですが、上記不具合の解消にともない解決したのではないでしょうか。弊社環境ではおっしゃるような症状を再現することができませんでした。

【追伸】
「CMONOS.JP」について全くご覧いただけていないのは残念です。PayPal によるクレジットカード決済に対応したショッピングカート、縦書き機能、招待制イベントを作成できるカレンダー、RSSフィードをまとめて表示するツール、などなど、ちょっとした案件に便利なツールをいろいろと取りそろえております。ぜひ一度お試しください(^_^)。

修正ありがとうございます。
なるほど、Firefoxで16進数で指定をしていけないことは知りませんでした。

「文字背景色」が行全体に反映。。。ですが、
再現手順に誤りがありました。
失礼しましたm(__)m

1. 対象とする文字にまず文字背景色を指定。
2. 同対象に番号リストもしくはリストを指定。
3. 再度同対象に文字背景色を指定。

このような手順ですと行全体に背景色が装飾されてしまうようです。（行全体というのは番号リストの左部分等の空白部分も含めてです）

こちら本日御社のデモ環境でも再現致しました。https://cmonos.jp/nicEdit_ja/demos/demo03.html

どうぞよろしくお願いします。

【追伸】
様々な便利ツールを開発されていて優秀なスタッフ陣がいらっしゃる御社に憧れさえ持ってしまいますね(^^)/
今日にでも色々と触ってみたいと思います。

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

Firefox で16進数で指定してはいけないというわけではありませんので、ご注意下さい。

現在の Firefox では HTML編集時の色指定に rgb() を使うのですが、この指定方法が HTML4.01 には規定されていないために、背景色と色の style を bgcolor/color 属性に変換するとこれら属性が無視されてしまう、ということではないかと思います。

（検証したわけではありませんのでただの推測ですが...。）

さて、ご指摘の問題ですが、確かに Firefox ではそのようになりました。Firefox では選択されたテキストを過不足なく含む最も上流の親要素に対して装飾を行うため(?)、こうした挙動になるようです。

ただ、残念ではありますが、適用先要素をコントロールする方法がわかりませんでした。取り急ぎ運用上の工夫で対処していただければと思います。

（ちなみに、弊社で直接取り扱う案件については、読みやすさを保つため、お客様にあまり文字に色や背景色をつけないようお願いしております。）

もちろん、MITライセンスで配付されているスクリプトですので、必要であれば御社内で修正・改善することが可能です。

とはいえ、できましたら、今後解決策が見つかりましたとき、こちらのフォーラムやコメント欄などで、その解決策についてご教授いただければとても助かります。

おかげさまで弊社開発者ブログを通じて nicEdit.js 日本語版を利用されている方も少なからずいらっしゃるようですので、みなさんにとってもたいへん有益かと思います。

この点については、弊社も開発元に無断で改修している立場上、少々悩ましく思っているところです。

（語学力があればオリジナル版サイトに改善点についてコメントしたいところではあるのですが。。。オリジナル版はもうほとんど放置されているようですし、どう修正を還元すればいいものやら。。。）

また何かお気づきの点がありましたらご指摘いただけると幸いです。今後ともよろしくお願い申し上げます。

こんにちわ。

再々投稿で非常に恐縮ですが、IEでの画像挿入ボタンでの不具合を一点発見致しました。

画像挿入ボタンでの位置指定を「インライン」で指定すると、IEのみJavaScriptのランタイムエラーが発生するようです。
alignプロパティの引数が無効だとメッセージが出たのですが、nicImageButtonでのaddForm()なのは把握しているのですが、インラインのオブジェクトキーの「none」はIEでは無効なのでしょうか。。。

ご確認の程、よろしくお願い致します☆

ご指摘ありがとうございます。
'none' を '' に変更しました。これで問題ないようです。

また、修正過程で見つかった、XHTML 変換を行うと回り込みを再設定できない不具合を修正しました。Opera でメニューを使って設定する項目が設定できない不具合も修正されています。

さきほど修正版をアップロードしました。

さっそくの修正ありがとうございます！

自分にもう少し知識があれば
修正済みのファイルをコミットすることができるのですが。。
修正差分を拝見させていただきまた勉強させていただきますm(__)m

NicEdit の XHTML 変換はもともとテスト版という位置づけのようですし、予想以上にいろいろ不具合が残っているようですね。

弊社の力だけでは動作確認が不十分ですので、不具合をご指摘いただけるだけでも、たいへん助かっております。

ただ、弊社も NicEdit について知りつくしているわけではありません。ちょっとした修正でも、原因の特定と解決方法の発見には、ある程度時間がかかります。

特に不具合がブラウザのバグや挙動の違いに起因する場合は、少しずつコードを追いながら試行錯誤を繰り返さざるを得ないのが実際のところです。

そのため解決までに時間がかかる場合もあるかと思いますが、ご理解いただけましたら幸いです。

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

お世話になります。
何度もいつも恐縮です！

setContentメソッドであらかじめstyle属性を与えていると、「全ての装飾を解除ボタン」押下時、IEのみ装飾が解除されないようです。

例.
nicEditors.findEditor('myInstance1').setContent('<span style="color:rgb(0,51,0);font-size : 30px;">testtestets</span>');

どうぞよろしくお願いします :-)

ご指摘ありがとうございます。こちらでも現象を確認いたしました。

ただ、たとえばあらかじめ次のように入力されている場合は問題なく装飾を解除できるようです。

<span style="color:#336699;font-size: large;">test</span>

ご指摘の記述で装飾が解除できないのは IE のコマンドが、比較的新しい色指定方法 rgb() に対応していないことと、font-size の指定が nicEdit で行われていないことによるものです。

しかし、このケースでは記入者が HTML とスタイルシートを十分に理解していて、記入者には nicEdit によらず直接 HTML を入力できる能力があることが期待できます。（前回そのように HTML 編集モードで?記入できたわけですから）

ということは特に問題ないのではないでしょうか。

また、IE の HTML 編集コマンドの仕様が原因ですので、修正は少々難しいように思います。

ご期待に沿えず残念ですが、以上参考になりましたら幸いです。

ご返信有難うございます。

背景としてDBに保存されているデータの再編集として、以前はFirefoxで保存したが今回はIEでの編集をすることを想定としての質問でした。
そうなると、setContent()もしくはinnerHTMLでスタイルをブラウザ別に置換していくしかないかもしれませんね。。。

Pontaさん、こんにちは。

さきほどもう少しテストしてみました。

<span style="color:rgb(100,0,0);font-size: large;">test</span>

とした場合でも IE で装飾を解除できるようです。rgb() は関係ありませんでした。。。

HTML編集コマンドでは、なぜか未だに、フォントサイズの変更を <font size="1-7"> で設定します。このあたりの仕様が IE の挙動と関係しているのかも知れません。

nicEdit の XHTML 変換では、size="1-6" が font-size: x-small〜xx-large に変換されます。

そのため、30px に設定されることはありません。ですから、nicEdit を利用して装飾が設定されている限り、装飾の解除に問題が発生するケースはまれなのではないかと思います。

以上参考になりましたら幸いです。

すいませんもうひとつ質問ができてしまいました！！
おっしゃる通りの記述で装飾が解除できることを確認したのですが、style属性にfont-sizeが含まれていないとbackground-colorやcolorのみでは解除することができていないようです。
こちらfont-sizeを含める以外の方法で何か回避策はありますでしょうか？？

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

IE では文字列の装飾を font タグで行うことが前提とされているのかもしれません。読み込み時に span タグを font タグに変更するようにしたところ、装飾を解除できました。

修正版をアップロードしましたのでよろしければダウンロードしてください。