2010年1月8日(金)NicEdit 日本語版
NicEdit は、Brian Kirchoff 氏が MIT ライセンスで公開している軽快な WYSIWYG HTML エディタです。MIT ライセンスに基づき、日本語版を作成しましたので、よろしければどうぞ。ファイル数が少ないので、いろいろなツールに組み込みやすいと思います。IEで動かなくなっていた不具合を修正しました。(2010/01/16)
- (2016年11月28日(月) 午後8時23分43秒 更新)
- Tweet
軽量・軽快な 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日更新
- 値が省略された属性が削除される不具合を修正しました。(ふじたさんご指摘ありがとうございます!)
コメント
トラックバック
更新情報
最近の記事
-
2015年1月13日(火)
-
2014年5月2日(金)
-
2014年5月2日(金)
-
2014年1月22日(水)
-
2014年1月21日(火)
-
2014年1月20日(月)
-
2013年9月4日(水)
-
2013年9月2日(月)
-
2013年6月20日(木)
-
2013年4月26日(金)
konica
軽量なWYSIWYGを探して、
Dlさせて頂きました。
取り急ぎお礼まで( ; ̄ω ̄)ゞ
報告
NicEditは大変使いやすいので、日本語化+バグ改修は助かります。ありがとうございます。
私の手元でいくつか発生した不具合を報告します。IE8で発生する(Firefoxでは発生しません)不具合です。
これはIE8のcontentEditableの仕様というか、もうこんなのバグだと思うのですが、改行コードが
に変換されてしまうため、保存する毎に改行の数が倍になっていきます。
→私の手元では
<p>タグを全部諦めて、replace(/
<p>/ig, '').replace(/<\/p>/ig, '
') とやってます。
報告(2)
上記コメント、HTMLが変換されませんでした・・・
「改行コードが<BR>に変換されてしまう」
「replace(/<p>/ig, '').replace(/<\/p>/ig, '')」
と書いてました。
→私の手元ではXHTMLへの綺麗な変換を諦めて、cleanupメソッドをそっくり飛ばしてしまっています。
以上、長々と失礼しました。
ご報告ありがとうございます
ご報告ありがとうございます。個人的にフォントサイズなどをあまりいじってほしくないのもあって、すっかり見逃していました。こちらでもIEでの挙動について少し調べてみます。
tockri さんのご指摘を参考にいろいろ調べてみました。IE で style 属性の値を取り出せないのは、こちらで紹介されているバグが影響しているようです。それから、tockri さんご指摘の不具合とは異なるかも知れないのですが、改行やノードが増えてしまう不具合についても、修正しました。たぶんこれで多少改善するのではないかと思います。参考になるご指摘ありがとうございましたm(_ _)m。
IEでの背景色
本家のForumでも話題になっていたのですが(そして修正されていないのですが)IEのexecCommandにはhiliteColorが無く、代わりにbackcolorをつかうようになっています。
"hiliteColor"
↓
bkLib.isMSIE?"backcolor":"hiliteColor"
クロスブラウザ対応はなかなか大変かと思いますが、メンテナンスがんばってください!
ささぽんさん、貴重な情報ありがとうございます! IEでは背景色が設定できないなあ、、、とは思っていたのですが、ちゃんと理由があったんですね...(^^;。連休明けぐらいまでには、教えていただいた修正を試してみようと思います。また何かお気づきの点がありましたら、ぜひぜひご指摘くださいm(_ _)m。
「リンクを追加」ボタンの不具合
「リンクを追加」アイコンでURL, タイトル, ウィンドウという順にデフォルトでは入力していくと思いますが、Firefox(確認したのは3.6)ではTabボタンで切り替えて入力していき「リンクを追加」ボタンを押下すると選択文字が消えリンクも貼られないようです。
div要素で囲んだTextareaでの不具合
続けての投稿ですみません。
http://tech.ironhearts.com/blog/archives/161
こちらのblogで挙げられている通り、Firefox+nicEditで、div要素で囲まれたtextareaタグ内にnicEditを使うと右寄せ・左寄せ等のアイコンでエラーが出るそうです。
クロスブラウザ対応は本当に大変だと思いますが、よろしくお願いします。
Ponta さん、不具合のご報告ありがとうございます。
Firefox では、リターンキーの入力で決定ボタンを押すと、キー入力イベントの解除に失敗し、リターンが編集エリアに渡ってしまうようです。そこで、必ずキー入力イベントを解除するようにしました。
こちらはご紹介の記事を通じて以前から知ってはいたのですが、解決方法がわからずそのままになっていました。今日もうんうんうなって調べたのですが、さっぱり回避方法がわからず...。ダメ元で本家フォーラムを覗いてみたところ、ちょっと前までなかった新しい書き込みが! まず本家をチェックするべきだと思いました。。。
長らく解決されずに放置されてきた問題をスパッと解決してくださったニューヨークのウェブサイト制作者 omarsmith 氏に心より感謝します。
ただ、どうもこれ、Firefox そのもののバグに起因する不具合のようで、解決方法を見てもなんだかスッキリしないかんじです。とりあえず回避はできたかと思います。
また何かありましたらお気軽にご指摘下さい。お待ちしております。
追記 : div要素で囲んだTextareaでの不具合
修正有難うございます!
div要素で囲んだTextareaでの不具合も解消しつつ、上記の問題を避ける方法ってありますでしょうか?ただ[nicInstance].setContent()で
Firefoxでは値を挿入することができなくなってしまいました。。。
こんばんは。ご指摘の不具合ですが、MacOS X + Firefox3.6 では再現できませんでした。
念のため確認させてください。
としたときに値をセットできない、という症状でしょうか?
こんにちわ。
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() された場合、その値を初期値として一時保存することで対処しました。
YUI Compressorでのエラー回避について
nicEditをYUI Compressorでソースコード最適化を図る際、オブジェクトリテラルのキーに予約語が使用されています。
float -> 'float'
上記のようにクォーテーションで囲めば解決します。
不具合ではないかもしれませんが、報告までに。。。
ご指摘ありがとうございます
オリジナル版を改変したときに予約語をむき出しにしてしまったようです。。。ご指摘ありがとうございました。さっそく修正させていただきましたm(_ _)m。
タグについて
お世話になります。
hrが反映されない様です(再配布分及びdemo
サイト含め)。
本家(オリジナル)はdemoサイトも含め機能しているので、お時間有りましたら調査して頂けませんでしょうか。
ご指摘ありがとうございます。XHTML変換時にできるだけ不必要なタグを消すようにしたのですが、<hr>も削除してしまっていたようです。さっそく修正いたしましたので、お手数ですがもう一度ダウンロードしてお試しいただけましたら幸いです。
素晴らしい!
まさかこんなに早く対応して頂けるとは。
素晴らしいの一言に尽きます!!!
軽量コンパクトな日本語ローカライズされたWISIWYGエディタを探していたので、大満足です。
今後もご活躍をお祈り申し上げます。
有難うございました。
あっ、
WYSIWYGでした。すみません、、、
こちらこそ有益なご指摘感謝しております。また何かありましたらぜひお知らせください。お待ちしておりますm(_ _)m。
demo01の場合
こんにちはちょっと質問です。
demo01の場合のnicEditors.allTextareas()
この関数をよびだしてテキストエリアに適用する場合でエディタをnoimageにしたいのですが書き方がわかりません。
どうか教えてください。
としてください(^^)
pタグが入る
ありがとうございます。
改行を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
すみません
FireFoxなら大丈夫でした。
ブラウザによるのですねえ
そうなのかあ
はい、吐き出されるHTMLはかなりブラウザに依存します。IEでは改行を<p>としますが、Firefox では <div> などとします。
さきほど弊社のテスト環境(WindowsXP+IE6-8)で確認してみたところ、スクリプトのもくろみ通り <p> が取り除かれていました。
([HTML]ボタンで表示されるソースコードは、<p> を取り除く前のコードですので、textarea に書き込まれる内容とは異なります。)
どのような文章でも改行があると <p> タグに変換されるのでしょうか。もし特定の文章や装飾でのみ <p> タグが残るようでしたら、その文章または装飾内容をお知らせください。問題を解決できるかもしれません。
あるいは、システム側で改行を <p> タグに変更している可能性はないでしょうか。たとえば、弊社 CMS CMONOS.JP の場合、改行の連続を <p> タグに変換します。
nicEdit.js 日本語版の convertToText オプションでは、<p> タグを二連続改行に変換しますので、このあたりが影響していないかご確認いただければと思います。
ちー様ありがとうございます。
IE系のブラウザで
あいうえお
かきくけこ
としますと
エディタのhtmlをみますと
pあいうえお/pbr /pかきくけこ/p
これを更新するボタンがあってクリックしてhtmlを作るのですが作られたソースは
あいうえおbr /br /br /かきくけこbr /
となります。へんに改行があいてしまって…
その時にエディターに戻ると
pあいうえお/ppかきくけこ/p
となってしまうので…
システムは
pタグをbrタグに変換してデータを格納してしまう。
エディタとできたhtmlが違うという風になってしまうのです。
ありがとうございます
これはもともとは
改行を判断してBRタグを自動で入れるテキストエリア内でのエディターのしようです。
お使いのシステムと相性が悪いのかもしれませんね。ただ、HTML 編集コマンドは、HTML4 時代に作られたものなので、あんまりきれいな HTML を吐き出してくれません。最近のブラウザでも、互換性のために相変わらず変な HTML を吐き出します。
(ただ、HTML5 でも <br> の連続はやめてくださいってことになっているそうなので、<p> を入れる方が HTML 的には正しいのではないかと思います。)
現状では、JavaScript による HTML エディタは(nicEdit に限らずどのエディタも)「補助的な役割」と割り切っていただいた方が好いように思います。HTML5 確定とともに、ブラウザ自身が洗練された HTML5 編集機能を搭載するようになるのではないかと予想しているのですが。。。どうなるでしょうね(^^;。
FireFoxでは
あいうえお
かきくけこ
と書くと
あいうえおbr /br /かきくけこbr /
これを更新ボタンを押して
できたHTMLをみると
あいうえおbr /br /かきくけこbr /
と同じ結果が出力されて
ここでエディターに戻ると
br /pあいうえお/ppかきくけこ/pbr /
先頭にbrが入ってる???
自動で改行を入れるテキストエリア内でのしようは難しいのかなあ???
ありがとうございます
システムを見直してみます。
本当にありがとうございます。
IE7,8でYoutubeの動画タグを記述してポストすると<embed>タグが削除されてしまい再生できなくなります。
FFでは正常でしたがなにか対策等ありますでしょうか?
InternetExplorer では、<object>タグ内に<embed>タグが書かれている場合、<embed>タグがノードツリーから削除されてしまい、<embed>タグを強引に保持させると逆に<object>タグがノードツリーから削除されてしまうようです。。。うまい解決が思い浮かびませんでしたので少々強引なやり方でとりあえず対処しました。
<embed>タグを強引に保持し、テキストエリアにHTMLを戻す際、<embed>タグから<object>タグを復元するようにしました。ただし元のタグを完全に再現することはできません。
記事本文のダウンロードリンクは修正版となっています。よろしければ修正版をダウンロードしてお試しくださいm(_ _)m。
有難うございます。
はじめまして。HTMLエディタを探していたら。
ここにたどり着きました。
凄く便利そうなのでつかわさせてもらってます。有難うございます。
自分はsucriptは全くの素人(PHPを現在勉強中)なので、これがバグか自分のプログラム作成ミスかも分からないのですが、
このエディタを使いまして、練習がてら簡単なWEB上のメモ帳を作っています。
タイトルと、記事だけのフォームで、記事のテキストエリアにこのエディタを付けています。
タイトル、記事両方に何か文字列があれば、データをPOST送信してデータベースに書き込むようにしているのですが、例えば、タイトルが空白で、データを登録しようとすると、if文の分岐処理で登録出来ないようにしているのですが、記事のテキストエリアにPOST されたテキストを修正出来るように、テキストを格納している変数を
<?php echo $txt ?>
としまして、テキストエリアに表示出来るようにしているのですが、postされて再度画面が読み込まれると、テキストエリアの内容がおかしくなっています。
具体的にどうなるかと言いますと。
リンクされた文字列が
<a href=http://www.hogehoge>hogehoge</a>
から、
<a href="http://www.自分のサイトのドメイン/%22http://www.hogehoge/%22">hogehoge</a>
と変化してしまい。リンク先に飛べなくなってしまいます。
自分の書いたPHPが悪いのかなんなのかすら分からない状況です。下手な説明で、長々と質問してしまいましたが、何か分かりましたらアドバイス宜しくお願いします。
こんばんは。勝手日本語版がお役に立っているなら、とてもうれしいです。
さてお問い合わせの件ですが、正直原因がよく分かりません。配布ファイルに付属しているデモでも同じようなことがおきますでしょうか。検証しやすいのはこちらの「デモ3 : NicEditor の追加と消去」です。
下の方のデモで、「テキストエリアにエディタを追加」して問題の書き込みをしてから「テキストエリアからエディタを消去」してください。このとき、PHPからデータを読み込んだときと同じ問題が発生していれば、エディタに問題がありそうです。そうでなければ、PHP 側の問題である可能性が高いです。
" を URL エンコードすると %22 となります。" の処理に問題があるのではないかという気がします。
素早い解答有難うございます。
素早いお返事有難うございます!!
デモ3ではそうならなっかので、これはPHP側っぽいですね。
「" を URL エンコードすると %22 となります。」
なるほどです。ここが問題っぽいですね。ちょっと色々やってみます。解決できたらここで報告させてもらいます。 アドバイス有難うございました!!
報告
遅くなりました。
結果は、PHPの
if(get_magic_quotes_gpc) {
$hoge = stripslashes($hoge);
$hoge2 = stripslashes($hoge2);
}
の記述位置を間違えていただけでした...
失礼しました。
ご報告ありがとうございます。開発がんばってください!(^^)
改行について
ちー 様 お世話になります。
このエディタには最初、<br />タグが一つセットされてますが、その理由ってなんなのでしょうか?? 素人の質問ですいません...
それと、画像を挿入した時に画像より下に何も文字やタグがないと画像より下に文字が書けません?? 改行ができない?? 説明が下手くそで申し訳ないです。 画像の下側にカーソルをもっていけないのですが... 何か自分の設置の仕方、使い方が悪いのでしょうか???
先に文字を書いておき改行してその上に画像を挿入することは出来るのですが...
改行について 追記
上記の事に追記ですが、
下にカーソルをもっていけないのはIEです。FIREFOX、SAFARI、CHROMEでもっていけました。
プチさんこんばんは。最初に<br />がセットされている理由は私にもよくわかりません(^^;。
元々の nicEdit.js が506行目と660行目でわざわざそうしていますので、これがないと不具合が出る環境があるのではないかと思い、そのままにしてあります。
もし<br />をセットしなくても問題ないならセットしない方がすっきりしますね。
IEで挿入した画像の後ろにカーソルが持って行けないとのことですが、矢印キーではどうでしょうか。
何か解決方法などわかりましたらぜひお知らせください。お待ちしております。こちらでも調べてみますね。
画像アップロード
日本語化されているWYSIWYGエディターを探していましたので、ダウンロードさせて頂きました。
本家のNicEditには、画像アップロードのボタンがありますが、日本語版をインストールしたところ、画像アップロードボタンが表示されませんでした。
これは仕様ですか?
弊社で配布している日本語版では、弊社が開発しております CMONOS.JP と併用しにくいプラグインについては省略しております。ですから仕様といえば仕様になりますが、本家の画像アップロードプラグイン部分を日本語版にコピーすれば動作するのではないかと思います(恐れ入りますがプラグイン拡張についてはご自身でお調べください)。
target属性を付けたい
W3Cの勧告によりTarget属性の削除が求められているのですが、どうしてもiframeを使って表示させたいので、どうしてもリンクタグのTarget属性を使用したいのです。
この NicEdit 日本語版は軽くて使いたいのですがTEXTAREAに埋め込んでおくと正規化を勝手にやってしますのでどうにかしたいのです。
もし、おわかりの方がいらっしゃいましたら教えて下さい。
Re: target属性を付けたい
こんばんは。
nicEdit.js 日本語版の 1303行目あたりに、target属性のオプションがあります。
こちらに target の値と名前を追加すると好いのではないかと思います。
また、HTML を修正する機能については、呼び出しオプションで無効化することができます。
以上参考になりましたら幸いですm(_ _)m。
textareaの表示について
はじめまして。
最近WYSIWYGエディタというものを知り、こちらのサイトにたどり着きました。導入も非常に簡単で、いといろと使ってみようかなと思っています。ありがとうございました。
私はJavaScriptは全くの素人なのですが、どこかのサイトに以下のようなことが記述されていました。
「nicEditでは、textareaに出力しているようで(出力先をtextareaにセット)、それ自体は非表示にされ、編集・表示領域はdiv領域を独自に生成したものが存在しています。」
こちらの仕様が正しいとすると、独自生成されているdiv領域ではなく、もともと出力されているtextarea(タグがそのまま付加され、div領域に変換される前の状態)を表示させることは可能なのでしょうか?
装飾ボタンを押した際に、直接太字になるのではなく、タグが付加されるだけという動きをイメージしています。
お忙しいところ申し訳ありませんが、宜しくお願いします。
Re:textareaの表示について
こんにちは。はじめまして。
ご指摘のように多くの WYGIWYG HTML エディタは textarea を非表示として div を表示するわけですが、それは textarea の内容を書き換えて div にリアルタイムに反映させている、ということではありません。
むしろ逆で div の HTML を直接変更し(そのための関数が用意されています)、送信時に textarea に div の HTML を差し戻す、ということをしています。
そのためももさんが期待してらっしゃるような動作は実現できません。たとえ textarea をずっと表示させても、div の中身を差し戻すまで内容は変更されないからです。
以上参考になりましたら幸いですm(_ _)m。
<追伸>
イメージしてらっしゃるのは、このコメント欄書き込みフォームの「エディタ」チェックボックスをはずしたときに表れる「挿入・置換」メニューみたいなものでしょうか? こういうものの方が作るのは簡単ですので、どこかに似たようなツールは公開されていそうです。
Re:textareaの表示について
ちーさん
お忙しいところご回答をいただき、ありがとうございました。
返信が遅くなり、申し訳ありませんでした。
動作が実現できないことがはっきりしてよかったです。
ちーさんがおっしゃっている通り、私がイメージしているのは、こちらコメント欄にあるような「挿入・置換」メニューのようなものです。
こちらではプルダウンで選択するようになっていますが、それをNicEditのようにボタンでできればと考えています。
ボタンからエディタ内に挿入
はじめまして。大変便利に使用させてもらっています。
質問があるのですが、エディタ外のボタンからエディタ内の任意の箇所に文字列を挿入することは出来るのでしょうか?
デモ3の「DIV内容入れ替え」ではエディタ内の文字列を別の文字列に置き換えることは出来るのですが、画像挿入のように、任意の箇所に文字列を挿入するにはどうすれば良いのか悩んでいます。(setContentだと内容が書き換わります)
なにか挿入できる方法がある場合、教えて下さい。お忙しいところ申し訳ありませんが、よろしくお願いします。
おはようございます。
残念ながら、NicEdit 自身に任意の場所に文字列を挿入する機能はないように思います。新しい機能を持った編集ボタンを追加したいということでしょうか? NicEdit は割と読みやすい JavaScript ですので、がんばればプラグインを追加できるのではないかと思います(^^)。
あるいは日本語版に追加した updateInstance() を利用するとある程度ご希望に沿えるかもしれません。
おおざっぱで申し訳ありませんが、↑こんなかんじのものを思いつきました。ただ、カーソルの位置に挿入したいということでしたら、この方法では対応できません。。。
はい。新しい編集ボタンを付けようと思ってました。
おっしゃるように、エディタ内のカーソル位置に挿入したいのですが、難しいようですね・・。
もう少し調べてみました。アドバイスありがとうございました。
iPadでボタンがオフにならない
NicEditの日本語版の開発有り難うございます。大変重宝しています。
ただ、iPadで使用した場合、例えばボールドのボタンをONにする事はできるのですが、OFFにトグルできません。
実際の入力は普通の文字になっているのですが、ボタンだけがON表示のままです。
改修可能ならば、改修して頂ければ助かります。
マウス操作をタッチイベント扱いにしてみました
こんばんは。マウスオーバーやマウスアウトなどのイベントをタッチ終了イベントとして扱うようにしてみました。
iPhoneで試してみたところ、ほぼ期待通りに動いているように思うのですがいかがでしょうか。ダウンロードファイルは修正版となっていますので、お手透きのときにでもお試しいただければと思います。
ご指摘ありがとうございますm(_ _)m。
早速有り難うございます。
おはようございます。
迅速なご対応を有り難うございます。iPadで検証させて頂きましたが、無事に動作しているのを確認させて頂きました。有り難うございます。
ところで、別件で申し訳ないのですが、NicEdit初心者の悩みを聞いてください。
NicEditをデータ入力画面に利用しています。データ入力後、確認画面に遷移して、内容に問題が無ければDB登録画面へ、修正したい場合はデータ入力画面へそれぞれ遷移します。
データ入力画面から確認画面へ遷移する時は
<script type="text/javascript">
bkLib.onDomLoaded(function() {
new nicEditor({panelType:'noimage'}).panelInstance('newsarea');
});
</script>
<script type="text/javascript">
function submitForm()
{
var val = nicEditors.findEditor("newsarea").getContent();
document.getElementsByName('news').item(0).value = val;
document.forms['newscontent'].submit();
}
</script>
<form name="newscontent" method="post" action="chk.php">
<div>
<textarea name="newsarea" id="newsarea" cols="50" rows="15"><?php echo( $_POST['news'] ); ?></textarea>
<input type="hidden" name="news" />
<input type="button" onclick="submitForm();" value="確認" />
</div>
</form>
と言うコードでPOSTしています。確認画面でPOSTされた内容を見ると、例えば文字色指定等をしていると、spanタグにstyle属性が付いていますが、これにバックスラッシュが付いています。
その為、確認画面ではstripslashesを使って不要なバックスラッシュを除去しているのですが、これで方法はあっていますか?
確認画面は
<script type="text/javascript">
functionBack()
{
document.forms['content'].action="index.php";
document.forms['content'].submit();
}
</script>
<form name="content" method="post" action="reg.php">
<div>
<?php echo( stripslashes( $_POST['news'] )); ?><br>
データベースには以下の状態で格納されます。
<input type="text" name="news_val" size="128" value='<?php echo( stripslashes( $_POST['news'] )); ?>' readonly>
<input type="hidden" name="news" size="128" value='<?php echo( stripslashes( $_POST['news'] )); ?>' readonly>
<input type="button" value="戻る" onclick="Back();" />
</div>
</form>
と言うコードを書いています。
これらのコードで、確認画面から入力画面へ修正の為遷移すると、入力内容に施した装飾が全てクリアされてしまいます。
どうすれば入力画面へ戻った時に装飾内容を保持できますでしょうか?
それと、またまた別件なのですが、入力→確認→入力→確認と繰り返すと、
<span style="\">
と言う謎のコードが入ります。これを除去する方法はありませんでしょうか?
質問ばかり且つ長文で失礼致しました。
どうぞ宜しくお願い致します。
うわ、化けてる(汗)
申し訳ありません。HTMLタグをそのまま書くとマズイと思いエンコードしたのですが、かえって酷い事になってしまってます。コードそのまま書いても大丈夫なのかしら?
上記で書きたかったコードは、入力画面は
<script type="text/javascript">
bkLib.onDomLoaded(function() {
new nicEditor({panelType:'noimage'}).panelInstance('newsarea');
});
</script>
<script type="text/javascript">
function submitForm()
{
var val = nicEditors.findEditor("newsarea").getContent();
document.getElementsByName('news').item(0).value = val;
document.forms['newscontent'].submit();
}
</script>
<form name="newscontent" method="post" action="chk.php">
<div>
<textarea name="newsarea" id="newsarea" cols="50" rows="15"><?php echo( $_POST['news'] ); ?></textarea>
<input type="hidden" name="news" />
<input type="button" onclick="submitForm();" value="確認" />
</div>
</form>
で、確認画面は
<script type="text/javascript">
functionBack()
{
document.forms['content'].action="index.php";
document.forms['content'].submit();
}
</script>
<form name="content" method="post" action="reg.php">
<div>
<?php echo( stripslashes( $_POST['news'] )); ?><br>
データベースには以下の状態で格納されます。
<input type="text" name="news_val" size="128" value='<?php echo( stripslashes( $_POST['news'] )); ?>' readonly>
<input type="hidden" name="news" size="128" value='<?php echo( stripslashes( $_POST['news'] )); ?>' readonly>
<input type="button" value="戻る" onclick="Back();" />
</div>
</form>
です。
大変失礼しました。
こんにちは。
はい、nicEdit では入力時にタグがエスケープされますね(^^;。(文字化け修正しました)
コードをざっと拝見しましたが、送信時の処理は特に必要ないです。nicEdit 自体が送信時に編集内容を textarea に差し戻すよう作られていますので、なくても動くのではないでしょうか。
それから、nicEdit 自体はバックスラッシュを追加したりしないです。そのあたりは php 側の処理の問題だと思います。なんらかのエスケープ処理が入っているんだろうと思います。装飾がクリアされる問題も php 側で style 属性を除去する等、あらかじめ規制がかかっている可能性があります。
https://cmonos.jp/nicEdit_ja/demos/demo03.html
こちらのデモでエディタを適用したり解除したりしても発生しない問題については、php 側で発生しています。
余分なタグについてはよくわかりません...(^^;。ただ、xhtml 変換を有効にしていると自動的に除去されます。上記デモでは xhtml 変換が有効となっていますのでそれでだいじょうぶなのかもしれません。
以上参考になりましたら幸いです。
追伸です。
それぞれの画面で HTML ソースを確認し、入力内容から style が除去されているかどうか確認されると、どの処理が問題なのか絞り込みやすいと思います。
お手数をおかけしました。
タグの件、お手数をおかけしました。
nicEditでは、送信時に編集内容をtextareaに差し戻すんですか。うーん、ちょっと実験してみますね。
また、nicEditではバックスラッシュを追加する処理をしていないと言う事はPHPで処理する時にエスケープしているんですね、きっと。
<span style="\">は謎ですね…これももう少し調べてみます。
XHTML変換って、どこで設定するんでしょう?初歩的な質問で申し訳ありません。
HTML5でソースを書いているので、XHTMLは好ましくないので、できればオフにしたいところです。
こんにちは。
XHTML 変換は日本語版ではデフォルトで有効になっています。ただ、これをオフにすると、HTML4 のタグになりますので <font> とか <b> とかを使ってしまいます(^^;。HTML5 はほぼ XHTML ですので、むしろ XHTML 変換を有効にされた方が好いと思います。
お久しぶりです。
ちー様、お久しぶりです。
ようやく、NicEditを使う開発が本格化しました。
以前、「nicEdit 自体が送信時に編集内容を textarea に差し戻すよう作られています」と仰っていましたが、これはgetContent()しないで、そのままSubmitしてしまって構わないと言う事なのでしょうか?
Mac OS X 10.7.4+Safari 5.1.7の環境ですと、NicEditを適用したtextareaをそのままsubmitすると、装飾はされていますが、受け取って表示する時に改行されていません。
nl2brを入れてみると改行されるので、改行コード自体は送られて来ているようなのですが…
そして表示画面から再編集の為に入力画面に戻る際ですが、表示画面で受け取っていたデータをそのままtextareaの値として構わないのでしょうか?
よく使い方がわかっておらず、基本的なところの質問で申し訳ありません。
こんばんは。
おひさしぶりです。
改行が除去される現象は、弊社で配布している日本語版特有のものです。
弊社で配布している日本語版は、弊社製カスタムフィールドCMS「CMONOS.JP」に組み込みやすいよう改変されていますのでご注意下さい。
nicEditor({panelType:'no image', convertToText:false}).panelInstance('newsarea');
上記のように、日本語版に追加された「convertToText」を無効化すると、改行部分が HTML のまま textarea に内容が差し戻されます。
「convertToText」オプションは、弊社で配布している日本語版に追加されたオプションで、デフォルトで有効になっています。このオプションが有効になっていると、<p> を改行の2回連続に、<br /> および <div> を改行に変換した後、textarea に内容を差し戻します。
これには3つ理由があります。
ひとつめは古い携帯など JavaScript が動作しない環境でも textarea から改行付きで入力できるようにするためです。
(このコメント入力欄のエディタチェックボックスを外すと、textarea のみで入力した場合と、エディタを利用した場合とで装飾等がない限り、textarea にも改行が反映され同じような表示になります。)
ふたつめは、ひとつめと関係しますが、弊社が保守に携わっているケースでは、WYSIWYG エディタがあると、文字が過剰に装飾されるなど、SEO的にもデザイン的にもあまりよい結果とならなかったため、弊社ではなるべくエディタを無効化して運用する方が好いと考えているからです。
みっつめは、各ブラウザでエディタによる改行が生成するタグにばらつきがあり、別のブラウザで再編集するなどしたとき、余分なタグが増える場合があるためです。
上記のような理由から、CMONOS.JP ではエディタから送信する際に改行関連タグを改行コードに変換し、サーバ側で好ましい改行タグに変換するようにしています。
以上参考になりましたら幸いです。
有り難うございます
ちー様
早々のご返信を有り難うございました。
改行が除去される件に付きましては了解致しました。
引き続きで恐縮ですが
の件についてもご回答頂ければ幸いです。
どうぞ宜しくお願い致します。
とりあえず試してみてください(^^;
textarea に入れるならタグをエスケープした方がよさそうに思いますが、試してみて問題ないなら、だいじょうぶなんじゃないでしょうか。
テキストエリアの自動伸張
お世話になっております。
iPadでの開発をしているのですが、TEXTAREAが行数に応じて自動的に伸びて行くのを抑制する事はできませんでしょうか?
また、iPadで書式を設定しようと選択範囲を作成すると、ボタンが機能しません。
先に文字色を指定して入力しても、文字色が変わらないのは仕様でしょうか?
宜しくお願い致します。
追記です
お世話になっております。
何度か試していると、ボタンが動作する場合もあり、原因を特定できずにおります。
また、範囲選択をして文字色を変えた時に、選択範囲の前に謎の空白が発生します。この空白は文字列ではないようで、削除する事ができません。
こちらもご確認ください。
iPadでの検証はできないので。。。
ご質問ありがとうございます。
編集エリアの伸張については、CSS で抑制することができます。
などとすればうまくいくのではないかと思います。
iPhone では機能するようです。nicEdit は日本語版でいろいろ改造してますので、もし本家版をお使いでしたら、日本語版の最新版をお試しください。
はい、仕様です。
こちらも iPhone では確認できませんでした。nicEdit は設置ページのCSSに影響を受けますので、font タグなどに margin が設定されていると、削除してもタグが残っていて謎の空白が生じることはあり得るように思います。再現できないので何とも言えませんが。。。
また iPad を触る機会がありましたら、調査してみようと思います。以上参考になりましたら幸いですm(_ _)m。
HTMLコード貼り付けでiframeコードが消えてしまう
はじめまして。nicEdit日本語版使わせていただいてます。一点ご質問がありまして、コメントさせていただきました。
グーグルマップの埋め込み用コード(iframeで生成される方)を貼り付けていて気づいたのですが、HTMLボタンを押して貼り付けてみると
、地図が埋め込まれるiframeがごっそり消えてしまいます。
本家の方のデモで同じ事を試してみると、消えずに地図が正しく埋め込まれますので、日本語版でのなんらかのオプションのデフォルト違い(XHTML変換辺り?)か、コードの改良などの影響かな?と思うのですが、その箇所をみつけることができずにおります。
できれば本家の通り、iframeによるグーグルマップの埋め込みを行えるようにしたいと思うのですが、修正の箇所やそのヒントだけでもお教え願えないでしょうか?
お忙しいとは思うのですが、お助けいただければとても助かります。
iframe を削除しないようにしました。
ご指摘ありがとうございます。
日本語版では、XHTML 変換時に、子要素(テキスト含む)のないタグを、ゴミとして削除します(WYSIWYGエディタを使うとどうしてもゴミタグが増えるので日本語版作成にあたり追加した機能です)。
そのため、子要素のない地図埋め込み iframe が削除されてしまうようです。
そこで iframe については、子要素がなくても保持するよう修正しました。現在修正版に差し替えられていますので、ダウンロードしなおしていただければと思います。
ありがとうございます!
早速のお返事&改良ありがとうございます!ダウンロードして確認いたしました。
グーグルマップの貼り付け時にコードが変わってしまう
こんにちは。何度もすみません。上でiframeの件でコメントさせていただいたものです。修正版をダウンロードして試していて、また一点気づいた点がありましたのでコメントさせていただきます。
修正後にgooglemapの埋め込み用コードを貼り付けるとiframeが消えてしまう症状は改善されたのですが、その下に表示される「大きな地図で見る」というアンカータグがiframeの中に取り込まれてしまって、元のタグを構造が変わってしまう症状があります。
グーグルマップの元のコードが
<iframe>
</iframe>
<br />
<small>
<a>
</a>
</small>
こういう感じなのに対して、nicEditに貼付け後は、
↓
<iframe>
<br />
<small>
<a>
</a>
</small>
</iframe>
こういう感じになって、「大きな地図で見る」のアンカーがiframe内に入ってしまう感じなのです。
うまく説明できなくてすみません…。
お手隙の際にアドバイスなどいただければとても助かります。よろしくお願いいたします。
修正しました。
ご指摘ありがとうございます。空要素として処理してしまっていたので、修正しました。再度ダウンロードしてお試しいただければと思いますm(_ _)m。
とても助かりました!
早速の修正ありがとうございます!速すぎてビックリしています。^^
グーグルマップの埋め込みバッチリできました。
とても助かりました。ありがとうございます。
ご返信ありがとうございます。
今回は1474-1475行めのオプションに iframe を追加するだけでしたので、割と簡単に対応できました。また何かお気づきになりましたらぜひご教示ください。お待ちしておりますm(_ _)m。
改行について
お世話になっております。
PC用と携帯用、ということで2つのエディタを設置し、登録を行なっているのですが、
IEでPC用に改行が連続で2つ以上入った文言を右クリックでコピーし、携帯用に右クリックで貼り付け、確認画面にいくとおかしな動作をします。
IE6=><p>nbsp;</p>が二個目の改行の部分に入っている
IE9=>改行自体が消えている
Shift+Enterで改行を行うと、この現象は起きません。
この現象を直す方法はないでしょうか?
よろしくお願いします。
Re:改行について
こんにちは。
IE では Enter で新しい段落 <p> となり、Shift+Enter で改行 <br> となるようです。
IE6 では連続の改行があると、空白をわざわざ入れて空白の段落を作り、IE9 では HTML の仕様により忠実な空要素を無視する形へ改善されたものと推測します。
いずれにしましても、コピーあるいはペーストしたときに発生する処理については JavaScript で制御できませんので、期待されている動作は実現が難しいように思います。
たとえば、「携帯とPCを同じ内容にする」チェックボックスにチェックを入れて送信すると、受け手のシステム側でコピーするようにするなど、別の工夫が必要かもしれません。
以上参考になりましたら幸いですm(_ _)m。
コメントが消えてしまわない方法はありますか?
こんにちは。以前も、質問させていただいた事があるふじたと申します。また、一点困っていることが出て来まして、お知恵をいただけないかとやってまいりました。
このコメント欄のツールバーの最後にも出てる「HTMLソース編集」ボタンを押して、ソースを編集する際に、HTMLのコメントを入力すると、それがまるまる消去されてしまうのですが、これを残す方法はありますでしょうか?
<!ーー コメント ーー>
↑こういうやつです。
仕方ないのかなぁ?とも思ったりしたのですが、本家の方のデモをためしてみると、コメントはそのまま残っているようなのです。
ソースを綺麗に整形するような改良を入れられて、改良としてコメントもさっぱり消してしまうようになっているのかなぁ?と想像してるのですが、コメントは残したい場面がありまして…。
ここをこうすれば…的なアドバイスやヒントをいただければ、とてもとても助かるのですが。
いつも厚かましいばかりで申し訳ないのですが、よろしくお願い致します。
Re:コメントが消えてしまわない方法はありますか?
コメントが消えるのは、弊社で配布している日本語版では、デフォルトでXHTML変換が有効となっているためと思われます。試していませんが、おそらく本家版でもXHTML変換を有効にするとコメントが消えてしまうことでしょう。
XHTML変換では、HTMLのノードツリーをたどって、HTMLを修正します。そのためノードツリーに含まれないコメントは無視されます。nicEdit では、XHTML変換を有効にしている限り、コメントを残すのは難しいと思います。
以上参考になりましたら幸いですm(_ _)m。
XHTML変換機能、把握しました
ちーさま返信ありがとうございます。
なるほど、教えていただいてわかったことですが、すごく基本的なことというか、当たり前のことでした…。
XHTML変換なしで、ちょっと試してみて、メリット・デメリット比較してみます。
助かりましたー!
ご返信ありがとうございます。XHTML変換では、各ブラウザ独自のCSSを消去するなど、なるべくシンプルできれいなHTMLを生成するよう工夫されています。特に大きなデメリットがない限り有効にされる方がおすすめです。また何かお気づきになることがありましたら、お気軽にご相談ください。お待ちしておりますm(_ _)m。
古いIEだと、コード貼り付け時にscript内が消えてしまう
こんにちは、何回も助けていただいているふじたと申します。また、ちょっとなんとかならないか、アドバイスをいただきたくやって参りました。
恐らくXHTML変換機能の関係だと思うのですが、HTMLソース編集で、scriptタグを貼り付けると、中身がごっそり削られてしまう症状があります。
IEの8,7でこの症状が発生しまして、IEの9やchromeなどでは発生しません。
(コードはツイッターの公式ウィジェットを貼り付けようとしております)
ブラウザの互換性の問題とかでどうしようもないような予感がしているのですが、なにか改善のアィディアなどございましたら、いただければとても助かります。
よろしくお願いいたします。
Re:古いIEだと、コード貼り付け時にscript内が消えてしまう
ご質問ありがとうございます。症状を確認しました。古いIEでは script タグ内のテキストがドキュメントツリーに登録されないのかもしれません。script タグだけ他のタグと異なる処理をしているわけではないので、ざっと調べた限りでは原因がよくわかりませんでした。
改善のアイディアとしては、たとえばこのコメント欄のように、nicEdit を利用しないで書き込めるようにする、というのはいかがでしょうか。このコメント欄では書き込み欄下のエディタチェックボックスをはずすと、エディタが消去されます。
IEとSafariで挙動が違い鱒。
ちー様、
お世話になります。
二行入力して、一行目を明朝体・色つきとした時に、次画面にPOSTされる内容がIEとSafariで異なっています。
Safariでは
<span style="font-family:Hiragino Mincho Pro, ヒラギノ明朝 Pro W3, HiraMinProN-W3, MS P明朝, MS PMincho, serif;color:#cc0000;">明朝体</span>通常<input type="hidden" name="nbody" value='<span style="font-family:Hiragino Mincho Pro, ヒラギノ明朝 Pro W3, HiraMinProN-W3, MS P明朝, MS PMincho, serif;color:#cc0000;">明朝体</span>
となっており、改行が反映されていません。
IEでは
<span style="color:#cc0000;font-family:'Hiragino Mincho Pro','ヒラギノ明朝 Pro W3','HiraMinProN-W3','MS P明朝','MS PMincho',serif;">明朝体です。赤文字です。</span><br />
<br />
改行して本文です。
となっています。こちらの場合、styleのfont-familyに一つずつ「'」が付く為に、input type="hidden"で値を保持する事ができません。(style="となっている為、value=の先にシングルクォーテーションを使っていましたが、設定する値の中にシングルクォーテーションが出現する為にvalueが正しく保持できません。
どう対処すれば宜しでしょうか?
Re:IEとSafariで挙動が違い鱒。
こんばんは。Safari で改行が消える問題については再現できませんでした。 Safari では <br> ではなく <div> で改行が表現されます。そのことが関係しているかもしれません。
フォントの指定については、どちらかというと IE の挙動が期待された挙動です。Safari ではフォントをシングルクォートが無視されるようです。いずれにしましても、<input type="hidden" value="入力内容" /> にエスケープされない HTML を格納するべきではありません。安全上非常に問題があります。value="" はダブルクォートとし、中に格納する HTML をエスケープ(<→<、>→>、"→")した方がよいでしょう。
以上参考になりましたら幸いですm(_ _)m。
Re:IEとSafariで挙動が違います
ちー様、有り難うございます。
仰る通り、valueにエスケープしないで値を格納すべきではありませんでしたね。
ただ、Safariでフォント指定ができないのが、ちょっと困っています。
Re:IEとSafariで挙動が違います
ご返信ありがとうございます。Safari のバージョンは何でしょうか? Safari6 では問題なくフォントを指定できているようなのですが…。
明朝体
↑このように。
フォントサイズを増やしたいのですが
フォントサイズを増やしたいのですが、どこを修正すればいいでしょう?
font → span に変更し、メニューは1249行目、実際のサイズは1466、1467行目を修正しました。
メニューは増えますが、サイズの方は6つ目までしか適用されません。
ちょっと行き詰まってしまいました。
ご教授いただけますとありがたいです。
宜しくお願いいたします。
Re:フォントサイズを増やしたいのですが
ご質問ありがとうございます。nicEdit のフォントサイズ指定は HTML4 の font タグを設定するコマンド(各ブラウザに用意されています)によって実現していますので、size=7 相当のサイズを追加することはできるかと思いますが(XHTML変換との兼ね合いで現状 size=7 省略されています)、それ以外のサイズを追加することは、nicEdit のフォントサイズ指定の既存の仕組みでは不可能です。
なお、XHTML 変換部分にあるフォントサイズの記述は、font タグからスタイル font-size を指定した span タグへ変換するためのものです。XHTML 変換が有効になっている場合、エディタ適用時に span から font へ、フォーム送信時に font から span へ変換されます。
以上参考になりましたら幸いです。
Re:フォントサイズを増やしたいのですが
そうですか...
何か方法を考えてみます。
ありがとうございました。
win7+chromeでボタンが押せないみたい
こんにちは、何度も助けていただいているふじたと申します。一点、不思議な現象がありましたので、お耳に入れておこうとまたやってまいりました。
今のところ再現するのは、win7+chrome最新安定版のみなのですが、
nicedit日本語版のデモが機能しません。
ボタンの類が押せない感じです。
2台の異なる環境で、同じ症状が発生しましたので、一応ご報告しておこうかと。
同じクロームでも、win vistaだと症状が現れないことから、ブラウザ側のなんらかの問題かな?とも思うのですが。
「B」などのボタンにマウスを合わせても、「強調」などのツールチップすら現れません。
本家のデモでは、同様の症状が出ませんでしたので、文字コードが関係してるのかな?とも。
なんとも、ぼんやりした報告で申し訳ないですが…。
Re:win7+chromeでボタンが押せないみたい
こんにちは。ご報告ありがとうございます。ちょうどフォーラムでも同様のご報告をいただいているところですのでそちらもご参照ください(スクリーンショット画像あり)。
https://cmonos.jp/cgi/forum/start.cgi?c=forum1&n=20130227180308&t=20130226200248&v=listthread
ただ、弊社テスト環境(Windows7最新アップデート適用済み+Chrome最新版)ではご指摘の現象が発生しません。以前から NicEdit 日本語版をご活用のことと思いますが、ご指摘の症状は以前からあったのでしょうか? それとも最近急に発生するようになったのでしょうか? もし最近発生するようになったということでしたら、NicEdit 日本語版はほとんど書き換えられておりませんので、ウィルス対策ソフトや Chrome の特定バージョンのみに発生する問題なのかもしれません。
いずれにしましても、たいへん申し訳ありませんが、弊社では症状を再現できないため、原因を特定できません。また何か問題解決のヒントとなるような情報がありましたらお知らせください。お待ちしております。問題解決には多くのやり取りが必要となる可能性がありますので、できましたら上記フォーラム記事の方にご参加ください。
ボタンが押せない件
ふじたです。お返事ありがとうございます。フォーラムの存在を知らなかったので失礼しました。とりあえず、同じ症状が出てる方がいらっしゃるとわかっただけでも良かったです。^^
はっきりわからないのですが、ここ最近出た症状で、特になにか変えたわけではないので、クロームかwinのアップデートの関係かなと思っています。
また、なにかわかったら、フォーラムの方に報告させていただきますね。
Re:ボタンが押せない件
ご返信ありがとうございます。ほぼ日を空けずに同様のお問い合わせをいただきましたので、ほんの最近のアップデートが影響している可能性がありますね。。。
弊社の Windows 環境は、テストのためにしか使用しておりませんので、ブラウザ以外ほとんど何もインストールされていませんから、無事で済んでいるのかもしれません。
上記問題は2013年3月12日に公開したバージョンで解決しました。解決へのご協力感謝いたしますm(_ _)m。
文字の色について
こんにちは~、ふじたです。また、ちょっと困った事がありまして、甘えに参りました。
IE9で、nicEditで文字色を赤などに変更すると、
<p><span style=”color:#ff0000;”>red</span></p>
のようなソースが出力されるのですが、
このソースをそのままテキストエリアの初期値として、新たに
nicEditでHTMLエディタを生成(表示)すると、
<p><span style=”color:rgb(255,0,0);”>red</span></p>
のように、カラーの表記がrbgに変わっちゃうんです。
これは、IEが勝手にやっちゃってるんでしょうか?
これを元のままにしておきたいのですが、なにかうまい方法はないでしょうか?
多分IEのせいで、nicEditは関係ないと思うのですが、なにかアドバイスいただければ助かります!
Re:文字の色について
こんにちは。ご質問ありがとうございます。
ご指摘の件はご推察の通りIEの仕様に起因するものだと思います。ただ、rgb で指定された色についても他のブラウザで編集できますので、それほど問題ないと考えています。
少し実験してみたところ、DOCTYPE 宣言を省くと IE8 までと同様 #rrggbb の形式が保持されるようです。DOCTYPE によって処理を変えているのかもしれません。XHTML 以降を宣言すると rgb になってしまうようです。4.01を宣言した場合は #rrggbb でした。悩ましいですね(^^;。
以上参考になりましたら幸いです。
文字色のrgb指定について
早速のアドバイスありがとうございます!なるほど、DOCTYPEが関係してましたかぁ。
確かにXHTMLを宣言してる環境で使ってました。むむむ。
私も問題なければ、表記の形式はどちらでもいいやと思っていたのですが、今回ちょっとあやしい動作をしてるっぽいのを発見しまして…。
その動作を再現して共有いただけるか不安ですが、今おかしいなと思ってる動作をご説明しますと、
さきほどのように、
<p><span style=”color:rgb(255,0,0);”>red</span></p>
というソースの状態の
redの部分を選択して、
色を変更する操作をすると、
<p><span style=”color:#66ff33;color:rgb(255,0,0);”>red</span></p>
のようになって、色が上書きされない現象に遭遇しております。
rgb形式じゃないソースの状態で同操作を行った場合は、正しく色が上書きされますので、rbg形式じゃなくせばこの困った状態を回避できるかな?
と思った次第なんです。
Re:文字色のrgb指定について
ご指摘の症状を確認しました。ただこちらはIE9のHTML編集コマンドと内部的なCSS表現に矛盾があるために引き起こされていますので、nicEdit 側で対処するのは難しいように思います。
DOCTYPE 指定以外に meta タグで互換モードを指定することによっても挙動を変えられるようです。
こちらを設定してIE9を再起動後アクセスすると #rrggbb になります。以上参考になりましたら幸いですm(_ _)m。
文字色のrgb指定について
こんにちは、ふじたです。善後策、お教えいただきましてありがとうございます。
なんとかDOCTYPEやエミュレートモードを変えることなく、修正する方法がないかっていうのも模索してみたのですが、文字色指定のコードを、IEのコマンドのforeColorに頼らず、自分でノードのプロパティをいじるようにすればなんとかなるのかな?くらいにしかわかりませんでした。
これ、backcolorでは同じ症状が出ないので、恐らくIEのバグですよねぇ?
ふぅ…。
いつもアドバイスありがとうございます。
リンク作成時のタイトルについて
使い勝手が良さそうなので試しているのですが、リンクを作成するさいにタイトルが「javascript:nicTemp();」となってしまいます。この入力枠も同様でした。環境はMacでのChromeです。解決する方法はございますでしょうか?
Re:リンク作成時のタイトルについて
ご質問ありがとうございます。Mac版Chrome 30.0.1599.66 で試してみましたが、ご指摘の不具合は再現できませんでした。
もし Chrome 機能拡張を入れているようでしたら、すべての機能拡張を無効にした上で、一度お試しください。またセキュリティソフトも一時停止させてください。
それでも上記症状が発生する場合は、MacOS X のバージョン、Chrome のバージョンについて教えていただけましたら、問題解決のヒントとなるかもしれません。
以上よろしくお願いいたしますm(_ _)m。
Re:リンク作成時のタイトルについて
早速のお返事ありがとうございます。拡張機能はすべてOFFにしています。もう少し詳細に手順を説明すると
1.文字列等は特に選択はしません。
2.リンクを追加ボタンを押下
3. URLとタイトルに"a"を追加
4.「リンクを追加」ボタンを押下
5.カーソル位置に「javascript:nicTemp();」が表示される。
となっています。
自宅に戻ったら、別環境でも確認したいと思います。
Re:リンク作成時のタイトルについて
ご指摘の症状を確認いたしました。本家でも発生するようです。本家スクリプトで「javascript:nicTemp();」が表示されるようになっている理由がわからないのですが、別に他の文字列にしても問題なさそうですので、文字列未選択の場合「LINK」という文字列が挿入されるよう修正しました。
Re:リンク作成時のタイトルについて
修正内容確認しました。
対応がすばらしく速くて、ほんとありがとうございます。
Re:リンク作成時のタイトルについて
ご報告ありがとうございます。
また何かお気づきのことがありましたら、ぜひご指摘ください。
お待ちしておりますm(_ _)m。
Firefox:リンク作成時のタイトルに「ー」を含むと文字化けします
IEはまったく問題ありませんけど、
Firefoxでリンクを作成する時、
タイトル欄に「ー」を含む文字
# 「...のホームページ」のように
を登録すると、
<a>リンクのhref属性以降が文字化けします。
エンコードがうまく動作していないのでしょうか。
Re:Firefox:リンク作成時のタイトルに「ー」を含むと文字化けします
ご指摘ありがとうございます。
WebKit系ブラウザでテキストを選択せずリンクを挿入しようとすると「javascript:nicTemp();」というテキストが挿入される問題を修正したのが、Firefox では悪影響しているようでした。
前回の修正で、上記文字列に替えてタイトルあるいは URL もしくは「LINK」というテキストを挿入するよう変更したのですが、タイトルに特定の文字が入っていると Firefox では文字化けするようです。
そこで Firefox では常に「LINK」というテキストを挿入するよう変更しました。いずれにせよ Firefox ではテキストを選択せずにリンクを設定しても、リンクが挿入されませんので、これで問題ないのではないかと思います。
現在のダウンロードファイルは修正版となっています。よろしければダウンロードしてお試しくださいm(_ _)m。
Re:Firefox:リンク作成時のタイトルに「ー」を含むと文字化けします
対応頂きまして、ありがとうございました。
Firefox 25.0.1 と
IE 10 で確認しました。
どちらも同じ動き(IEの動きと同じ)をしております。
# [タイトル]に「ホームページ」の文字を設定すると
# きちんと<a>タグのtitle属性に反映されており、
# [URL]はhref属性に設定されています。
ちなみに先ほどコメントに書き込まれた
「Firefox では常に「LINK」というテキストを挿入するよう変更しました」
は再現しませんでした。
# <a>タグのtitle属性にも「LINK」の文字は設定されていませんでした。
IE11でも動くのでしょうか
Windows8.1は
IE11がデフォルトらしいのですけど
nicEditは動くのでしょうか。
# これは本家に確認することなんでしょうけど。
Re:Firefox:リンク作成時のタイトルに「ー」を含むと文字化けします
ご報告ありがとうございます。「LINK」という文字列を挿入するのは内部的な処理となりますので、Firefoxでは使用上表示されることはありません。
Windows8.1+IE11 での動作は確認しておりませんが、今のところ不具合の報告はありませんので、動くのではないかと思います。不具合がありましたらぜひご指摘ください。今後ともよろしくお願い申し上げます。
「convertToText」オプションについて
new nicEditor({convertToText : false})
することで
convertToTextを無効にすることが可能ですけど、
539行から541行では
convertToText
のtrue/falseに関係なくコンテンツが未設定の時(getContent() == "")、
「<br />」を設定しています。
これは正しいのでしょうか。
Re:「convertToText」オプションについて
理由はわかりませんが、その部分は本家からそうなっています。ブラウザによって、改行されるタイミングにより<p>とする場合と<br>とする場合があるようですが、それを<br>に統一する工夫なのではないかと思います(といってもそれがどのブラウザのどのバージョンを考慮してのことなのか把握しているわけではありません…)。
削除しても動きますし、削除して問題を感じないようでしたら削除してよいのではないでしょうか。なんらかの問題が発生する可能性もあるので、配布版では本家版のままとしています。
Re:「convertToText」オプションについて
早速の回答、ありがとうございます。
何かしらの理由があって
このように設定されていると思いますので、
「ちー様の配布版」
をそのまま利用させて頂きます。
テーブルのセルの削除について
ちー様、こんにちは!以前にも何回も助けていただいているふじたと申します。
また、ちょっとお助けいただきたく、甘えにやってまいりました。
症状なのですが、以下のようなテーブルをHTMLソース編集などでnicEditの本文に入ってる状態としまして、
<table>
<tbody>
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
</tbody>
</table>
で、この中のセルの内容bbbをBackSpaceキーなどで消してしまい、その後、HTMLソース編集ボタンを押すと、そのTD自体が無くなってしまうんです。
こんな感じ
↓
<table>
<tbody>
<tr>
<td>aaa</td>
</tr>
</tbody>
</table>
多分、XTHML変換機能が、中身のないTDはおかしい?として、削除してしまうんじゃないかと想像してるんですが、trが複数あるテーブルの場合、つじつまがおかしくなってしまうんで、
↓のように、TDそのものは残るようにしたいんです。
<table>
<tbody>
<tr>
<td>aaa</td>
<td></td>
</tr>
</tbody>
</table>
もし、症状を確認いただけて、原因が私の思ってる感じであれば、tdを消さないnicEditの修正方法をアドバイスいただけないでしょうか?
以上、お時間のある時にちらっと見ていただければ、とてもとても助かります!
Re:テーブルのセルの削除について
ご指摘ありがとうございます。ご推察の通り、XHTML 変換時に空要素として削除していました。<td><th>については残った方がよいと思いましたので、先ほどダウンロードファイルをそのように修正したバージョンに差し替えました。またお時間のあるときにでもご確認いただけましたらと思います。参考になるご指摘重ねて感謝いたします。今後ともどうぞよろしくお願い申し上げますm(_ _)m。
テーブルのセルを削除しても問題なくなりました!
おはようございます、昨日書き込ませていただいたふじたです。早速修正していただいてありがとうございます。
バッチリ改良されていました!
Re:テーブルのセルを削除しても問題なくなりました!
ご報告ありがとうございます。また何かお気づきになりましたらぜひご教示ください。お待ちしておりますm(_ _)m。
IEでの画像挿入について
いつも便利に利用させていただいております。
ボタンを押して画像挿入みたいな事をしているのですが、Firefox、GoogleChromeでは以下のコードで動くものの、IE11では動作しません。これは単に私のコードが悪いのでしょうか?
IE11は対応されていないかと思いますが、もし原因がお分かりの場合はご指摘ください。
#Javascript
var area1;
bkLib.onDomLoaded(function() {
area1 = new nicEditor().panelInstance('area1');
});
function insert(file){
area1.instanceById('area1').nicCommand("insertImage",file);
}
#HTML挿入
上記が切れたので追記
#HTML
<button onclick="insert(画像のURL);">挿入</button>
Re:IEでの画像挿入について
ご質問ありがとうございます。原因はわかりませんが、URLが相対パスだとうまくいかないかもしれないですね。また解決されましたら、ぜひ原因や解決方法などご教示ください。他の方の参考になるかと思います。
絶対パスでも同じでした。原因が分からないのでどうしようもないですね。。もう少し勉強してみます。
Re:IEでの画像挿入について
こんにちは、何度もお世話になっているふじたです。
とても時間が経ってしまっているご質問で、もうあまり意味がないかもしれませんが、表題のIEでの画像挿入について、私のしる限りの情報を提供させていただきたいと思います。
なぜかは解りませんが、IEでは葵さんのご質問のようにinsertImageのコマンドが上手く動作しないようです。
私が試してみた善後策ですが、
<img src=URL>
と画像のタグを作ってしまって、その文字列を、nicCommand("riInsertContent"
で挿入するというものです。
IEか否かをuserAgentなどで判定して、処理を切り分ける必要がありますが…。
以上、どなたかのお役に立ちますれば。
Re:IEでの画像挿入について
情報感謝いたします。
今後ともどうぞよろしくお願い申し上げますm(_ _)m。
適用させるid指定について
1点ご質問させてください。
指定したidのtextareaに適用させる場合
.panelInstance('xxxxxxxxx')
にて設定すると思うのですが、
これをidではなくclassで指定する方法があれば教えて頂けますでしょうか。
textareaにclassを指定しても良いですし、divで囲んでdivにclasss指定する方法でも構いません。
お手数をおかけいたしますが、お手隙でご回答いただけますと幸いです。
よろしくお願いします。
Re:適用させるid指定について
こんばんは。
nicEdit にそうした機能はないように思いますが、.panelInstance('xxxxxxxxx') の 'xxxxxxxxx' の部分を ID の値ではなく、class 名から取得した要素のオブジェクトにすれば動作すると思います。具体的な JavaScript の記述についてはご自身でお調べくださいm(_ _)m。
適用させるid指定について
早速のご回答ありがとうございます。
いろいろと試してみます。
IE7でのリンク・HTML編集ウィンドウについて
度々の投稿申し訳ありません...
IE7でリンク追加ウィンドウ、HTML編集ウィンドウを開いた時の挙動についてご質問があります。
下記ページをIE7で開いた場合、そのままでしたら特に問題はないのですが
https://cmonos.jp/nicEdit_ja/demos/demo01.html
下記のようなDOCTYPE宣言をhtmlの1行目に記述した場合、ウィンドウが右端一杯まで広がってしまいます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DOCTYPE宣言を記述した場合でもIE7で正しく表示させる方法がありましたらご教授下さい。
オリジナル版のnicEdit.jsを使用しますと、DOCTYPE宣言を記述した場合でもIE7で正しく表示できました。
お手隙でご回答いただけましたら幸いです。
よろしくお願いします。
Re:IE7でのリンク・HTML編集ウィンドウについて
IE6-7のバグで表示が崩れるようです。修正版に差し替えましたのでよろしければダウンロードしなおしてください。ご指摘ありがとうございました。
Re:Re:IE7でのリンク・HTML編集ウィンドウについて
修正版確認いたしました。
いつも迅速なご対応ありがとうございます!
エディタの両端揃えボタンについて
質問があり、問い合わせさせていただきました。
どのようにすれば両端揃えが使えるのかを教えていただきたく思いますが可能でしょうか。
お手数ですが、お手隙の際にお教えいただけると幸いです。
確認したのはIE9になります。
FFは最新バージョンの29.0.1です。
以上、宜しくお願い致します
Re:エディタの両端揃えボタンについて
そういえば動きませんね。IEの独自実装のようですが、text-justify プロパティが指定されていないと、両端揃えにならないそうです。現在のところ動作する環境が少なく、あまり実用的ではないので、デフォルトの表示から外しました。現在配布中のファイルは変更済みのものとなっています。ご指摘ありがとうございました。
Re:エディタの両端揃えボタンについて
早々の回答ありがとうございます。
ただ、両端揃えを使おうと思っていたので、対応策は考えないといけないですね。
ありがとうございました。
JavaScriptエラーが発生する件
利用させてもらい一点報告です。
Chromeで動作させているのですが、エディタにフォーカスインした時点で、以下の部分にJavaScriptエラーが出ます。
getRngの
return (s.rangeCount > 0) ? s.getRangeAt(0) : s.createRange();
公開されているデモサイトでも確認したのですが、同様のエラーが出ていました。
本家(英語版)のnicEditのデモサイトでは出ていないので、英語版のnicEditのjsを参考に以下を修正し、JavaScriptエラーが解消されることを確認しました。
selected : function(e,t) {
if(!t) {t = this.selElm()}
の部分を
selected : function(e,t) {
if(!t && !(t = this.selElm)) {t = this.selElm()}
に修正(!(t = this.selElm)の条件を追加)
以上、参考になれば幸いです。
Re:JavaScriptエラーが発生する件
不具合のご指摘、解決方法のご教示、ありがとうございます。さっそく修正いたしました。現在配布中のファイルは修正済みのものとなっております。
フォントの固定
お世話になります。今回初めて利用させていただいております。
1点質問がございます。
wordなどから文章をコピーして、貼り付けると
自動的にfontが割り当てられているのですが、
これを元の文章のフォントに変換しないで、
固定化することは可能でしょうか?
Re:フォントの固定
ペースト時のショートカットを下記にしてください。
Windows の場合:「Ctrl」+「shift」+「v」
Mac の場合:「command」+「shift」+「option」+「V」
(ペーストしてスタイルを合わせる。)
エディタの側でペースト時につくスタイルをコントロールする事はできないと思います。
空DIV要素を残したい
こんにちは、いつも助けていただいているふじたです。
一つ、質問というか、教えていただきたい事があり、またやってまいりました。
HTMLソース編集で、以下のような空のDIVを貼り付けると、綺麗に消えてなくなります。
これは以前お聞きした、空の要素を削除する機能とかで、niceditが消してるんだと思うのですが、これを消えなくしたいのです。
<div id=”hogehoge”></div>
空の要素などを消したりスッキリしてくれる機能すべてを無効にしたくないので
できれば
DIV
に関してだけ、空でも残すようにしたいのですが、
それがソースのどのあたりなのか検討つかずにおります。
ヒントだけでもお教えいただけないでしょうか?
なんで、空DIVを残したいかというと、そのまま貼り付けて機能するプラグイン的なの(グーグルとかが提供してるような)で、空のDIVを用意しておいて、あとでそこにスクリプトでなんか書き込むみたいなのがよくあるようですので、それを活かしたいのです。
お忙しいとは思いますが、どうぞよろしくお願いいたします。
Re:空DIV要素を残したい
こんにちは。1953行目あたり、nicXHTML の2行目に noChild という配列がありますので、そこに'div'等を追加すると、空要素の場合も削除しなくなると思います(未検証)。
以上参考になりましたら幸いですm(_ _)m。
空DIV要素を残すのできました!
いつも素早い回答ありがとうございます!できました!
ここらへんだとは思っていたのですが、
もともと、「DIV」とある箇所を消すものと思い込んでおりました…。
助かりました!
iframeタグについて
先日ダウンロードして検証してみましたところiframeタグが除去されないようでした。
子要素がない場合iframeタグを除去しない仕様のようですが、XSS対策としてiframeタグの記述は完全に不許可にしたいと考えています。
対策方法ありましたらご教示いただけますでしょうか。
HTML編集モードで以下のように記述するとフレームで他サイトを表示できてしまいます。<iframe src="http://yahoo.co.jp"></iframe>
Reiframeタグについて
nicEdit には禁止タグを指定しやすい仕組みが存在しないようです。改造するしかないと思います。どこをどうすればよいかは、私にもすぐにはわからないです。
ところで、nicEdit で iframe を消去するのは、XSS対策にならないのではないでしょうか。送信内容を受け取るウェブアプリケーションの側で iframe を削除するなどの処理が必要になると思います。
ちなみに弊社プロダクトでは、受信ウェブアプリケーション側で危険なタグを全て取り除く仕様となっています。
IE9の不具合
Windows7 IE9にて文字サイズを「小さめ」の場合だけ<span style="font-size:medium;">が設定されません。その他のサイズOKです。
FireFoxでは正常に動作します。
Re:IE9の不具合
ご指摘ありがとうございます。フォントサイズの変更は、HTML4 の FONT タグで指定され、それを XHTML に変換するという処理になっています。
ご指摘を受けて、本来 FONT SIZE="3" (font-size: medium)が標準サイズとなるはずのところ、「小さめ」という表現となっていることに気づきました。そこで、日本語表記を変更し、小、小さめ、標準、大きめ、大、極大、としました。
これでしたら、medium が設定されないことにも問題を感じられないのではないでしょうか。IEは、単独で FONT SIZE="3" が設定されると、標準サイズだから設定する必要なしとして無視するようです。
現在配布ファイルは修正版となっています。よろしければダウンロードしてお試しください。
IE9の不具合Ⅱ
ご回答有難うございます。
nicEdit.jsを少し修正しました。
◆1330行あたり。
//オリジナルコード
var nicEditorFontSizeSelect = nicEditorSelect.extend({
sel : {1 : '極小', 2 : '小', 3 : '小さめ', 4 : '中', 5 : '大きめ', 6 : '大'},
init : function() {
this.setDisplay('サイズ...');
for(itm in this.sel) {
this.add(itm,'<font size="'+itm+'">'+this.sel[itm]+'</font>');
}
}
});
//修正コード
var nicEditorFontSizeSelect = nicEditorSelect.extend({
sel : {1 : '7pt', 2 : '8pt', 3 : '10.0pt通常', 4 : '9pt', 5 : '10pt', 6 : '11pt'},
init : function() {
this.setDisplay('サイズ...');
for(itm in this.sel) {
// this.add(itm,'<font size="'+itm+'">'+this.sel[itm]+'</font>'); //Org Code Ueda Update
if (itm == 1) {
this.add(itm,'<span style="font-size:7.0pt">'+this.sel[itm]+'</span>');
} else if (itm == 2) {
this.add(itm,'<span style="font-size:8.0pt">'+this.sel[itm]+'</span>');
} else if (itm == 3) {
this.add(itm,'<span style="font-size:14.5pt">'+this.sel[itm]+'</span>');
} else if (itm == 4) {
this.add(itm,'<span style="font-size:9.0pt">'+this.sel[itm]+'</span>');
} else if (itm == 5) {
this.add(itm,'<span style="font-size:10.0pt">'+this.sel[itm]+'</span>');
} else if (itm == 6) {
this.add(itm,'<span style="font-size:11.0pt">'+this.sel[itm]+'</span>');
} else {
this.add(itm,'<span style="font-size:14.0pt">'+this.sel[itm]+'</span>');
}
}
}
});
◆1555行あたり。
//オリジナルコード
sizes : {1 : 'x-small', 2 : 'small', 3 : 'medium', 4 : 'large', 5 : 'x-large', 6 : 'xx-large'},
legacySizes : {'x-small' : '1', 'small' : '2', 'medium' : '3', 'large' : '4', 'x-large' : '5', 'xx-large' : '6'},
//修正コード
sizes : {1 : '7pt', 2 : '8pt', 3 : '14.5pt', 4 : '9pt', 5 : '10pt', 6 : '11pt'},
legacySizes : {'7pt' : '1', '8pt' : '2', '14.5pt' : '3', '9pt' : '4', '10pt' : '5', '11pt' : '6'},
■フォントサイズを色々と変更して試してみました。
結果として、「サイズ」コンボで上から3番目の
項目のみだけが<span>が設定されないようです。
onClickやonChangeなどが発生していないような気します。そのために、処理が出来ていない?
全て、デバッグした訳ではありませんが.....
以上です。
Re:IE9の不具合Ⅱ
検証ありがとうございます。
nicEdit のフォントサイズ変更は、HTML4時代の古い仕組みを使っています。「3」というのは具体的には、「<FONT SIZE="3">」を設定するということです。エディタ上のHTMLは HTML4 で記述されています。nicEdit 日本語版では、それを最後に XHTML に変換します。
おそらく IE では「<FONT SIZE="3">」でフォントサイズ指定を解除する仕様になっているのではないかと思います。たとえば、サイズを変更した文字列の一部に、「<FONT SIZE="3">」にあたる「標準」サイズを指定すると、仕様としてそのように処理しているとしか思えない結果が得られます。
弊社ではフォントサイズ変更をあまり重視していない(直接のお客様にはできるだけフォントサイズ変更や色設定を使わないようお願いしています)こともあり、ご指摘の問題について、特に対応する予定はございません。必要に応じて改造してお使いいただけましたらと思いますm(_ _)m。
IEでのセンタリングについて
こんにちは。使わせていただきありがとうございます。
お願いなのですが、IE11で文章の右寄せ、中央寄せ、左寄せがうまくできません。例えば最初中央寄せにしたのを、やっぱりやめて左寄せにすると下記のようになります。<div style="text-align:left;text-align:center;">左寄せ</div>
本家を確認したら本家は正常に動作していました。比較して直そうとしてもよくわからず挫折しています。どうにか助けていただけないでしょうか。。
Re:IEでのセンタリングについて
ご指摘ありがとうございます。IEで行揃えを再編集できない不具合を確認しました。現在は修正されています。本家で発生しないのはXHTML変換がオフになっているためと思います。
ありがとうございます!
迅速な対応ありがとうございます!それと、すみませんがもう1つ質問があります。同じくIEで文章末に改行が入らないのは仕様でしょうか?
はい、仕様です。「convertToText」を無効にすると改行が残ると思いますが、レイアウトのための改行の連続は、HTMLの仕様上、推奨されていません。
ありがとうございます!
承知しました!いろいろとありがとうございました!
リンクを追加
初心者です。
NicEditをwin7、IE11の環境で使いますとリンクの追加が働きません。
Win7、Chrome(最新版)の環境下ではリンクの追加はできます。
IE11ではこのediter使えませんか?
Re:リンクを追加
ご質問ありがとうございます。弊社のテスト環境(Win7+IE11)では問題なくリンクの追加ができています。もし日本語ローカライズ版の最新版ではないバージョンをお使いでしたら最新版をダウンロードしてお試しください。また下記デモページでも動作しないかどうかお試しください。
https://cmonos.jp/nicEdit_ja/demos/demo03.html
Re:リンクを追加
回答ありがとうございます。
win7+IE11で2013/10/13付のファイルから2015/8/28付最新版に変えて試しました。またデモにアクセスしてやってみました。が共に残念ながらリンクの追加ができません。
因みにwin7+Chrome45では共にOKでした。
初心者にはこれ以上どうしたらいいのでしょうか?
Re:Re:リンクを追加
申し訳ありませんが、弊社のWin7+IE11環境では症状が再現されませんので、現在いただいている情報だけでは、弊社にできることはありません。
のいずれかをお試しください。
Re:リンクの追加
何度も回答ありがとうございます。
他のPCでも同様でした。セキュリティーソフトを外しても変わりません。またIEのセキュリティーレベルを下げても変わりませんでした。
下の様に直接URLを書き込むとリンク貼れます。
http://e-mono.info/cafe1/html/art/00002.html
タイトルは「HTMLソース編集」を開けて書き換えればできます。とりあえずツールでは無く手動ですればリンク貼れますのでこの辺が妥協点でしょうか。残念ですが・・・。
Re:Re:リンクの追加
弊社のWin7+IE11環境では問題なく動作しています。ユーザーエージェントを偽装する機能などを追加していないかご確認ください。別のPCでも同じユーザーが使っているPCの場合、同じ環境に整えられている場合があります。まったく別の方がお使いの環境でお試しください。
Re:リンクの追加
娘のPC(Vista+IE9)でdemo03してみましたが残念ながら駄目でした。一応あきらめます。どうもありがとうございました。
Re:Re:リンクの追加
残念ですが、弊社のテスト環境で再現できない症状については対応することが困難です。もし今後同様の症状が報告され、エラーコンソールに表示されるエラー情報など、もう少しくわしい情報がわかりましたら、すみやかに修正いたします。
Re:Re:リンクの追加
ふと気がついたのですが、「リンクを追加」するとき、何もテキストを選択していない状態で、カーソル位置にリンクを「挿入」しようとしてらっしゃるのはないでしょうか?
もしそうでしたら、たしかにIEでは「リンクを追加」が無視されます。「リンクを追加」は既存テキストにリンクを追加するものですので、これは仕様です。「リンクを追加」したい文字列を選択した状態で、「リンクを追加」ボタンをクリックすれば、選択した文字列に設定したリンクが追加されます。
以上お試しください。
解決しました。
最初からもう少し使用状況を詳しく説明していればすぐに解決していた様で「初心者」はこれですから・・・すみません。
ありがとうございました。
ご報告ありがとうございます。私の方にも使い方の先入観があって、問題をうまく把握できなかったことを反省しています。今後ともどうぞよろしくお願いいたします。
連続した改行について
いつもお世話になっております。
初心者です。
テキストエリアで、推奨されていませんが、レイアウトの為、文章内に連続した複数の改行を入れます。
チェックボックスをクリックし、NicEditを起動すると、改行が1行分に削られてしまいます。連続した複数の改行を削られないようにするには、どうしたら良いでしょうか?
updateInstance()を使用すれば、可能ですか?
(しかし、上記をどうすれば良いかは解りませんが)
どうかお教え頂ければ幸いです。
よろしくお願い致します。
Re:連続した改行について
convertToText オプションを false にするか、xhtml を false にすると、改行が削られないかもしれないと思います(未検証)。改行ごとに全角空白を入れるのが手っ取り早いかなとも思います。
Re:連続した改行について
早速の返信ありがとうございました。
改行ごとに空白を入れると複数の改行が削られなくなりました。しかし、他の方法も試してみたいので、お教え下さいませ。
convertToTextオプションをfalseにするには、nicEdit.js内の
/* START CONFIG */
convertToText : true→false,
/* END CONFIG */
に変更すればよいのですか?
xhtml を falseにするには、どこをどのように変更すればよいか?お教え頂ければ幸いです。
大変、お手数をお掛けいたしますが、どうぞよろしくお願い致します。
Re:連続した改行について
xhtml : false, をCONFIGに追記してください。
Re:連続した改行について
どうもありがとうございました。
早速、試してみます。
今後共、どうぞよろしくお願い致します。
個別改造について
NicEditの改造を有償で構いませんので、行って頂けませんでしょうか?
Re:個別改造について
サポートお申し込みをご検討ください。
https://cmonos.jp/cgi/support/start.cgi
xhtml : falseについて
いつもお世話になっております。
初心者です。
/* START CONFIG */
xhtml : false,
iconsPath : 'auto',
convertToText : true,
keepBrTags : true,
/* END CONFIG */
としても、xhtml設定が無効にならないように思います。
ご検証お願い致します。
Re:xhtml : falseについて
ご質問ありがとうございます。すみません。以前、nicEdit.js 内で直接初期設定を書き変えるようご案内しましたが、呼び出し時に設定を指定した方がよいです。
例)new nicEditor({,keepBrTags : true, xhtml: true}).panelInstance(ID);
以上参考になりましたら幸いです。
Re:xhtml : falseについて
お返事が遅くなって申し訳ありません。
無事、動作するようになりました。
本当にありがとうございました。
今後共どうぞよろしくお願い致します。
Edgeにて不具合
Windows10 Edgeブラウザにて、文字の色が変更できなくなる不具合が見られます。
nicEditは最新版(2016-01-26版)を使用しています
【手順】
※この時に文字色が黒く変更されない(赤い行が赤いまま)
という事象があります。
回避策などありますでしょうか。
Windows10のEdge,IE11のみで再現しています。
Re:Edgeにて不具合
不具合のご指摘ありがとうございます。一度「全ての装飾を解除」しても変更できないでしょうか。
Re:Edgeにて不具合
返信ありがとうございます。
全ての装飾を解除することで色の変更は行えました。
しかし他の装飾(フォントや背景色)も解除されてしまうので少し不便に感じます。
もし、別の方法、回避策がありましたら、お教え頂ければ幸いです。
お手数ですが、よろしくお願いします。
Re:Edgeにて不具合
ご返信ありがとうございます。IEでは条件により文字修飾が上書きされないことがあるようです。nicEdit ベースでどうすればこれを回避できるのかわからないというのが実情です。何か対処法おわかりになりましたらぜひご教示ください。必ず対応いたします。
エディターの最初の改行について
いつもお世話になっております。
初心者です。
設定
new nicEditor({convertToText : true, keepBrTags : true, xhtml: false, maxHeight : 400, panelType : panel_type}).panelInstance(this_id);
再出ですが、エディタには最初、<br>タグが入ってしまいますが、どこをコメントアウトすると先の<br>タグが入らないように出来るか?お教え下さいませ。
行番号で探しましたが、分りませんでした。お手数ですが、文でお示し頂けると幸いです。
どうぞよろしくお願い致します。
Re:エディターの最初の改行について
ご質問ありがとうございます。その後の改造で行番号が変わったようです。
543行目
709行目
上記が該当するのではないかと思いますが、確認はしておりません。ご了承ください。
早速のご回答、誠にありがとうございます。
設定で「xhtml: false」にしている都合からか?「<br />」ではなく、「<br>」が入ってしまいます。
先にお示し頂いた部分をコメントアウトしても、エディタを起動すると、先頭に「<br>」が入ります。
ソースを見ても、「br」と記述してある箇所は何箇所かございますが、どこをコメントアウトすれば、表示されないか分りません。
再度、ご教授頂ければ、幸いです。
何度も申し訳ございませんが、どうぞよろしくお願い致します。
Re:エディターの最初の改行について
申し訳ないのですが、前の返信でお示しした場所でないとすると、どこで改行を入れているのかわかりません…(´-`;。「/」が入らないのは、単にブラウザの処理によるものと思います。念のため textarea に最初から改行が入っていないかお確かめください。
ブラウザーのキャッシュを全て消去したところ、無事、出来ました。どうもすいませんでした。
今後共どうぞよろしくお願い致します。
NicEdit起動時のカーソル位置取得について
いつもお世話になっております。
初心者です。
さて、
親ウィンドウでNicEditを起動して、任意の部分をクリックしてカーソル(キャレット)を表示します。そこから、子ウィンドウを開きます。子ウィンドウからNicEditのカーソル(キャレット)の位置(先頭からの文字数若しくは先頭からの行数)を正確に取得したいのですが、可能でしょうか?
以下のコードで、文字数?行数?が取得できるのですが、正確なカーソル(キャレット)の位置(先頭からの文字数若しくは先頭からの行数)を取得できません(最初の行は取得できましたが、複数行になると、数字は返ってくるのですが、どこを指しているのか?解らない状態)。
function getCursor(){
var win = opener;
var editor = win.nicEditors.findEditor('テキストエリアのID');
var range = editor.getRng();
var pos = range.startOffset;
return pos;
}
他に方法はありますか?
また、ない場合はNicEditの改造をして頂きたいのですが、可能でしょうか?
お教え下さいませ。
どうぞよろしくお願い致します。
Re:NicEdit起動時のカーソル位置取得について
ご質問ありがとうございます。NicEdit エディタ内のカーソル位置は、テキストエリアからは取得できません。NicEdit はテキストエリアを編集可能なDIV要素に表示上置き換えています。ブラウザの開発メニューなどから、NicEdit エディタの要素を割り出し、その要素を指定すればカーソル位置を取得できるかもしれません。
以上参考になりましたら幸いです。
Re:NicEdit起動時のカーソル位置取得について
ご回答ありがとうございます。
子ウィンドウに記述したスクリプトより、NicEdit エディタ内のカーソル位置を取得したいのですが、NicEditにそれ用の関数をお造り頂く事は可能でしょうか?
可能でしたら、サポートの申込みを検討致します。
どうぞよろしくお願い致します。
Re:NicEdit起動時のカーソル位置取得について
たいへん申し訳ないのですが、弊社には荷が重いように思います。NicEditはMITライセンスですので、お取り引きのある開発会社様にご依頼いただけましたら幸いです。
Re:NicEdit起動時のカーソル位置取得について
御返答ありがとうございます。
残念です。
どうもありがとうございました。
プラグイン機能をボタン以外から実行する方法
こんにちは。過去に何度も助けていただいたことがある、ふじたと申します。お久しぶりです。
今回は(も?)日本語版に固有したことではないのですが、もしパッと答えがおわかりになればお助けいただければとても助かります。
デフォルトの状態で、ツールバーのボタンをクリックすると、その機能が実行されますよね?
例えば、「画像挿入」ボタンをクリックすると「URL」などを入力する黒いダイアログが開くというような。
これを、ボタンを押さずに、同様に実行させたい場合、どう書けばよいでしょうか?
具体的には、キーボードで「CTRL+G」みたいな操作をすると、画像挿入ボタンを押したのと同じ動作をさせたいのです。
キーが押されたというのは、キーダウンのイベントの中でキーコードを判別することで反応できそうなところまで試してみたのですが、この黒いダイアログを出す方法がさっぱりわからずで…。
もう、「こうじゃない?」とか、「雰囲気的にこんな感じ?」とかでも結構ですので、もしおわかりになることがあればお助けくださいませ。
お忙しいとは思いますがよろしくお願いいたします。
nicEdit にはもともとキーイベントに対応しています。オプションに 'key' を加えると、ボタンを押した時と同じ動作をします。
[1445行目あたり]
ただ、このままだとキーを押している間だけしか、パネルが表示されません。
[546行目]
取消線部分を削除すると、パネルは消えなくなりますが、太字ボタンなど他のボタンでも、キーを離した後ボタンのフォーカスがはずれなくなります。
何かしらオプションや関数を増やして対応すればいいのかなと思いますが、ここから先はご自身で解決していただけましたら。。。(^^;
こんにちは!早速お返事ありがとうございます。
こんな機能があったんですね!
なんかB押したら太字になるなぁとは思っていたんですが、それはブラウザが勝手にやってるのかと思ってました。
しかし、ここまでできるなら、押してる間だけってのが惜しすぎて…。(T_T)
これを大きな手掛かりとして、探求してみます。
いつも本当にありがとうございます!
IE11でのフォント指定について
こんにちは!
日本語版のフォント指定後にtoXHTML(HTMLソース編集後に閉じる)すると、フォント指定が綺麗に消えてしまうという症状が発生しています。
やり方は、日本語版のデモページをIE11で開きます。
https://cmonos.jp/nicEdit_ja/demos/demo01.html
テキストエリア2などの文を適当に選択して、フォント指定で明朝などにします。
その後、HTMLソース編集ボタンを押し、ソースをいじらずそのまま右下の「HTMLソース編集」ボタンを押して閉じます。
すると、明朝指定してたフォント指定が消えてしまいます。
この症状はクロームでは起こりません。
改善する方法が知りたいのですが、お助けねがえませんでしょうか?
Re:IE11でのフォント指定について
ご指摘ありがとうございます。不具合を確認しました。IE11では、処理の過程で属性の値に含まれるシングルクォート(')をダブルクォート(")に勝手に変換してしまうようです。そのため属性の値が壊れてしまうことがわかりました。現在配布しているファイルは修正版となっています。修正箇所は1791行目と1801-1806行目です。
お礼
上記のIEでだけフォント指定がソース表示後消えてしまう件について、バッチリ治っているを確認しました。
ありがとうございます!!
いつも本当に助かっています。お歳暮をお送りしたいくらい感謝しております。^^
Re:お礼
ご報告ありがとうございます。こちらこそ不具合をご指摘いただき助かっております。また何かお気づきになりましたら、ぜひご指摘ください。今後ともどうぞよろしくお願いいたしますm(_ _)m。
youtubeの埋め込みについて
こんにちは!
また一つ助けていただきたくてやってまいりました。これまでお聞きした事で自分で対応できないかやってみたのですが無理でした…。
以下のような、youtubeの埋め込みコード(youtubeで提示されるもの)を埋め込みたいのですが、ソースで編集後、
最後のallowfullscreenというパラメータが消えてしまいます。
※これをつけると、全画面許可というものらしいです。
<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxxxx" frameborder="0" allowfullscreen></iframe>
この
allowfullscreen
を削らなくしたいのですが、どうしたらよいでしょうか?
多分、あのtoXHTMLで綺麗にしてる過程で、不要とみなされて削られてるんじゃないかと思うのですが、これを残すやり方がわからずで…。
よろしくお願いいたします。
Re:youtubeの埋め込みについて
不具合のご指摘ありがとうございます。ご指摘の通り、値のない属性を無視するようになっていました。現在配布中のファイルではこの問題が修正されています。
iframeの値なしパラメータ、バッチリ消えなくなってました!
youtubeプレーヤーの埋め込みコードで、一部のパラメータが消えてしまう件、バッチリ解消されてるのを確認しました!ありがとうございます!
感謝です!!
画像のサイズ変更につきまして
大変便利で有効なNicEditのご提供、ありがとうございます。
すでに、上で質問されていたら申し訳ないのですが、画像を挿入した後、その画像のサイズなどを変更したい場合、FireFoxでのみその操作ができるのですが、他のブラウザだと画像をクリックしても、サイズ変更の4隅の四角が表示されないのです。画像の移動についても同じです。
何か対処方法などありましたら、よろしくお願い致します。
Re:画像のサイズ変更につきまして
画像サイズ変更は、ブラウザの機能に依存していますので、対応は難しいと思います。。。
Re:画像のサイズ変更につきまして
早速のご回答、ありがとうございます!!
利用者さんに説明つきやすいので、助かります。
今後ともよろしくお願いいたします。