<<PREV

はい、吐き出されるHTMLはかなりブラウザに依存します。IEでは改行を<p>としますが、Firefox では <div> などとします。

さきほど弊社のテスト環境(WindowsXP+IE6-8)で確認してみたところ、スクリプトのもくろみ通り <p> が取り除かれていました。

([HTML]ボタンで表示されるソースコードは、<p> を取り除く前のコードですので、textarea に書き込まれる内容とは異なります。)

どのような文章でも改行があると <p> タグに変換されるのでしょうか。もし特定の文章や装飾でのみ <p> タグが残るようでしたら、その文章または装飾内容をお知らせください。問題を解決できるかもしれません。

あるいは、システム側で改行を <p> タグに変更している可能性はないでしょうか。たとえば、弊社 CMS CMONOS.JP の場合、改行の連続を <p> タグに変換します。

nicEdit.js 日本語版の convertToText オプションでは、<p> タグを二連続改行に変換しますので、このあたりが影響していないかご確認いただければと思います。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2010年10月30日(土) 午後8時48分34秒)
あたしちゃん-ショボン

ちー様ありがとうございます。

IE系のブラウザで

あいうえお

かきくけこ

としますと
エディタのhtmlをみますと
pあいうえお/pbr /pかきくけこ/p

これを更新するボタンがあってクリックしてhtmlを作るのですが作られたソースは

あいうえおbr /br /br /かきくけこbr /

となります。へんに改行があいてしまって…
その時にエディターに戻ると
pあいうえお/ppかきくけこ/p

となってしまうので…
システムは
pタグをbrタグに変換してデータを格納してしまう。

エディタとできたhtmlが違うという風になってしまうのです。

もり (2010年10月31日(日) 午前11時34分15秒)
あたしちゃん-ショボン

ありがとうございます

これはもともとは

改行を判断してBRタグを自動で入れるテキストエリア内でのエディターのしようです。

もり (2010年10月31日(日) 午前11時53分38秒)
タンジェリン-エヘッ

お使いのシステムと相性が悪いのかもしれませんね。ただ、HTML 編集コマンドは、HTML4 時代に作られたものなので、あんまりきれいな HTML を吐き出してくれません。最近のブラウザでも、互換性のために相変わらず変な HTML を吐き出します。

(ただ、HTML5 でも <br> の連続はやめてくださいってことになっているそうなので、<p> を入れる方が HTML 的には正しいのではないかと思います。)

現状では、JavaScript による HTML エディタは(nicEdit に限らずどのエディタも)「補助的な役割」と割り切っていただいた方が好いように思います。HTML5 確定とともに、ブラウザ自身が洗練された HTML5 編集機能を搭載するようになるのではないかと予想しているのですが。。。どうなるでしょうね(^^;。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2010年10月31日(日) 午後0時19分53秒)

FireFoxでは

あいうえお

かきくけこ
と書くと
あいうえおbr /br /かきくけこbr /

これを更新ボタンを押して
できたHTMLをみると
あいうえおbr /br /かきくけこbr /
と同じ結果が出力されて
ここでエディターに戻ると
br /pあいうえお/ppかきくけこ/pbr /
先頭にbrが入ってる???

自動で改行を入れるテキストエリア内でのしようは難しいのかなあ???

もり (2010年10月31日(日) 午後0時22分52秒)

ありがとうございます

システムを見直してみます。

本当にありがとうございます。

もり (2010年10月31日(日) 午後0時28分4秒)

IE7,8でYoutubeの動画タグを記述してポストすると<embed>タグが削除されてしまい再生できなくなります。
FFでは正常でしたがなにか対策等ありますでしょうか?

hashikun (2010年12月3日(金) 午後2時37分47秒)
タンジェリン-エヘッ

InternetExplorer では、<object>タグ内に<embed>タグが書かれている場合、<embed>タグがノードツリーから削除されてしまい、<embed>タグを強引に保持させると逆に<object>タグがノードツリーから削除されてしまうようです。。。うまい解決が思い浮かびませんでしたので少々強引なやり方でとりあえず対処しました。

<embed>タグを強引に保持し、テキストエリアにHTMLを戻す際、<embed>タグから<object>タグを復元するようにしました。ただし元のタグを完全に再現することはできません。

記事本文のダウンロードリンクは修正版となっています。よろしければ修正版をダウンロードしてお試しくださいm(_ _)m。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2010年12月3日(金) 午後5時41分38秒)

有難うございます。

はじめまして。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が悪いのかなんなのかすら分からない状況です。下手な説明で、長々と質問してしまいましたが、何か分かりましたらアドバイス宜しくお願いします。

プチ (2010年12月19日(日) 午前1時41分29秒)
タンジェリン-エヘッ

こんばんは。勝手日本語版がお役に立っているなら、とてもうれしいです。

さてお問い合わせの件ですが、正直原因がよく分かりません。配布ファイルに付属しているデモでも同じようなことがおきますでしょうか。検証しやすいのはこちらの「デモ3 : NicEditor の追加と消去」です。

下の方のデモで、「テキストエリアにエディタを追加」して問題の書き込みをしてから「テキストエリアからエディタを消去」してください。このとき、PHPからデータを読み込んだときと同じ問題が発生していれば、エディタに問題がありそうです。そうでなければ、PHP 側の問題である可能性が高いです。

" を URL エンコードすると %22 となります。" の処理に問題があるのではないかという気がします。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2010年12月19日(日) 午前2時8分54秒)

素早い解答有難うございます。

素早いお返事有難うございます!!
デモ3ではそうならなっかので、これはPHP側っぽいですね。
「" を URL エンコードすると %22 となります。」
 なるほどです。ここが問題っぽいですね。ちょっと色々やってみます。解決できたらここで報告させてもらいます。 アドバイス有難うございました!!

プチ (2010年12月19日(日) 午後5時24分26秒)

報告

遅くなりました。
結果は、PHPの

if(get_magic_quotes_gpc) {
  $hoge = stripslashes($hoge);
  $hoge2 = stripslashes($hoge2);
}

の記述位置を間違えていただけでした...
失礼しました。

プチ (2010年12月22日(水) 午前4時22分16秒)
タンジェリン-エヘッ

ご報告ありがとうございます。開発がんばってください!(^^)

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2010年12月23日(木) 午前0時11分2秒)

改行について

ちー 様 お世話になります。

このエディタには最初、<br />タグが一つセットされてますが、その理由ってなんなのでしょうか?? 素人の質問ですいません...

それと、画像を挿入した時に画像より下に何も文字やタグがないと画像より下に文字が書けません?? 改行ができない?? 説明が下手くそで申し訳ないです。 画像の下側にカーソルをもっていけないのですが... 何か自分の設置の仕方、使い方が悪いのでしょうか???

先に文字を書いておき改行してその上に画像を挿入することは出来るのですが...

プチ (2011年1月12日(水) 午後8時37分56秒)

改行について 追記

上記の事に追記ですが、
下にカーソルをもっていけないのはIEです。FIREFOX、SAFARI、CHROMEでもっていけました。

プチ (2011年1月12日(水) 午後8時50分13秒)
タンジェリン-エヘッ

プチさんこんばんは。最初に<br />がセットされている理由は私にもよくわかりません(^^;。

元々の nicEdit.js が506行目と660行目でわざわざそうしていますので、これがないと不具合が出る環境があるのではないかと思い、そのままにしてあります。

もし<br />をセットしなくても問題ないならセットしない方がすっきりしますね。

IEで挿入した画像の後ろにカーソルが持って行けないとのことですが、矢印キーではどうでしょうか。

何か解決方法などわかりましたらぜひお知らせください。お待ちしております。こちらでも調べてみますね。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2011年1月12日(水) 午後9時32分23秒)

画像アップロード

日本語化されているWYSIWYGエディターを探していましたので、ダウンロードさせて頂きました。
本家のNicEditには、画像アップロードのボタンがありますが、日本語版をインストールしたところ、画像アップロードボタンが表示されませんでした。

これは仕様ですか?

MEK (2011年2月23日(水) 午後6時42分47秒)
タンジェリン-エヘッ

弊社で配布している日本語版では、弊社が開発しております CMONOS.JP と併用しにくいプラグインについては省略しております。ですから仕様といえば仕様になりますが、本家の画像アップロードプラグイン部分を日本語版にコピーすれば動作するのではないかと思います(恐れ入りますがプラグイン拡張についてはご自身でお調べください)。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2011年2月23日(水) 午後8時0分57秒)
ライム-ニコリン

target属性を付けたい

W3Cの勧告によりTarget属性の削除が求められているのですが、どうしてもiframeを使って表示させたいので、どうしてもリンクタグのTarget属性を使用したいのです。

この NicEdit 日本語版は軽くて使いたいのですがTEXTAREAに埋め込んでおくと正規化を勝手にやってしますのでどうにかしたいのです。

もし、おわかりの方がいらっしゃいましたら教えて下さい。

ほげほげほげー (2011年9月11日(日) 午後6時54分50秒)
タンジェリン-エヘッ

Re: target属性を付けたい

こんばんは。
nicEdit.js 日本語版の 1303行目あたりに、target属性のオプションがあります。

'target' : {type : 'select', txt : 'ウィンドウ', options : {'' : '同じウィンドウで開く', '_blank' : '新しいウィンドウで開く'},style : {width : '150px'}}

こちらに target の値と名前を追加すると好いのではないかと思います。

また、HTML を修正する機能については、呼び出しオプションで無効化することができます。

new nicEditor({xhtml : false, convertToText : false}).panelInstance('area2');

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

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2011年9月12日(月) 午前0時21分33秒)
ライム-ショボン

textareaの表示について

はじめまして。
最近WYSIWYGエディタというものを知り、こちらのサイトにたどり着きました。導入も非常に簡単で、いといろと使ってみようかなと思っています。ありがとうございました。
私はJavaScriptは全くの素人なのですが、どこかのサイトに以下のようなことが記述されていました。
「nicEditでは、textareaに出力しているようで(出力先をtextareaにセット)、それ自体は非表示にされ、編集・表示領域はdiv領域を独自に生成したものが存在しています。」
こちらの仕様が正しいとすると、独自生成されているdiv領域ではなく、もともと出力されているtextarea(タグがそのまま付加され、div領域に変換される前の状態)を表示させることは可能なのでしょうか?
装飾ボタンを押した際に、直接太字になるのではなく、タグが付加されるだけという動きをイメージしています。
お忙しいところ申し訳ありませんが、宜しくお願いします。

もも (2011年12月28日(水) 午後0時3分35秒)
タンジェリン-エヘッ

Re:textareaの表示について

こんにちは。はじめまして。

ご指摘のように多くの WYGIWYG HTML エディタは textarea を非表示として div を表示するわけですが、それは textarea の内容を書き換えて div にリアルタイムに反映させている、ということではありません。

むしろ逆で div の HTML を直接変更し(そのための関数が用意されています)、送信時に textarea に div の HTML を差し戻す、ということをしています。

そのためももさんが期待してらっしゃるような動作は実現できません。たとえ textarea をずっと表示させても、div の中身を差し戻すまで内容は変更されないからです。

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

<追伸>
イメージしてらっしゃるのは、このコメント欄書き込みフォームの「エディタ」チェックボックスをはずしたときに表れる「挿入・置換」メニューみたいなものでしょうか? こういうものの方が作るのは簡単ですので、どこかに似たようなツールは公開されていそうです。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2011年12月28日(水) 午後1時1分46秒)
ライム-ショボン

Re:textareaの表示について

ちーさん

お忙しいところご回答をいただき、ありがとうございました。
返信が遅くなり、申し訳ありませんでした。
動作が実現できないことがはっきりしてよかったです。

ちーさんがおっしゃっている通り、私がイメージしているのは、こちらコメント欄にあるような「挿入・置換」メニューのようなものです。
こちらではプルダウンで選択するようになっていますが、それをNicEditのようにボタンでできればと考えています。

もも (2012年1月6日(金) 午後10時11分9秒)

ボタンからエディタ内に挿入

はじめまして。大変便利に使用させてもらっています。

質問があるのですが、エディタ外のボタンからエディタ内の任意の箇所に文字列を挿入することは出来るのでしょうか?

デモ3の「DIV内容入れ替え」ではエディタ内の文字列を別の文字列に置き換えることは出来るのですが、画像挿入のように、任意の箇所に文字列を挿入するにはどうすれば良いのか悩んでいます。(setContentだと内容が書き換わります)

なにか挿入できる方法がある場合、教えて下さい。お忙しいところ申し訳ありませんが、よろしくお願いします。

kt (2012年1月29日(日) 午前6時23分54秒)
タンジェリン-エヘッ

おはようございます。

残念ながら、NicEdit 自身に任意の場所に文字列を挿入する機能はないように思います。新しい機能を持った編集ボタンを追加したいということでしょうか? NicEdit は割と読みやすい JavaScript ですので、がんばればプラグインを追加できるのではないかと思います(^^)。

あるいは日本語版に追加した updateInstance() を利用するとある程度ご希望に沿えるかもしれません。

var area1 = new nicEditor({fullPanel : true}).panelInstance('myArea1',{hasPanel : true});
...
area1.updateInstance(); // テキストエリアを同期
...テキストエリア内の任意の場所にテキストを挿入する処理...
area1.setContent(テキストエリアの中身); // テキストエリアの中身をセットしなおす

おおざっぱで申し訳ありませんが、↑こんなかんじのものを思いつきました。ただ、カーソルの位置に挿入したいということでしたら、この方法では対応できません。。。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2012年1月29日(日) 午前6時53分25秒)

はい。新しい編集ボタンを付けようと思ってました。

おっしゃるように、エディタ内のカーソル位置に挿入したいのですが、難しいようですね・・。

もう少し調べてみました。アドバイスありがとうございました。

kt (2012年1月30日(月) 午後2時56分42秒)
ボンダイ-ニコリン

iPadでボタンがオフにならない

NicEditの日本語版の開発有り難うございます。大変重宝しています。

ただ、iPadで使用した場合、例えばボールドのボタンをONにする事はできるのですが、OFFにトグルできません。

実際の入力は普通の文字になっているのですが、ボタンだけがON表示のままです。

改修可能ならば、改修して頂ければ助かります。

bluez (2012年5月16日(水) 午後4時53分49秒)
タンジェリン-エヘッ

マウス操作をタッチイベント扱いにしてみました

こんばんは。マウスオーバーやマウスアウトなどのイベントをタッチ終了イベントとして扱うようにしてみました。

iPhoneで試してみたところ、ほぼ期待通りに動いているように思うのですがいかがでしょうか。ダウンロードファイルは修正版となっていますので、お手透きのときにでもお試しいただければと思います。

ご指摘ありがとうございますm(_ _)m。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2012年5月16日(水) 午後9時54分41秒)
ボンダイ-ニコリン

早速有り難うございます。

おはようございます。

迅速なご対応を有り難うございます。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="\">

と言う謎のコードが入ります。これを除去する方法はありませんでしょうか?

質問ばかり且つ長文で失礼致しました。

どうぞ宜しくお願い致します。

bluez (2012年5月17日(木) 午前6時50分28秒)
ボンダイ-ニコリン

うわ、化けてる(汗)

申し訳ありません。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>

です。

大変失礼しました。

bluez (2012年5月17日(木) 午前6時54分16秒)
タンジェリン-エヘッ

こんにちは。

はい、nicEdit では入力時にタグがエスケープされますね(^^;。(文字化け修正しました)

コードをざっと拝見しましたが、送信時の処理は特に必要ないです。nicEdit 自体が送信時に編集内容を textarea に差し戻すよう作られていますので、なくても動くのではないでしょうか。

それから、nicEdit 自体はバックスラッシュを追加したりしないです。そのあたりは php 側の処理の問題だと思います。なんらかのエスケープ処理が入っているんだろうと思います。装飾がクリアされる問題も php 側で style 属性を除去する等、あらかじめ規制がかかっている可能性があります。

https://cmonos.jp/nicEdit_ja/demos/demo03.html
こちらのデモでエディタを適用したり解除したりしても発生しない問題については、php 側で発生しています。

余分なタグについてはよくわかりません...(^^;。ただ、xhtml 変換を有効にしていると自動的に除去されます。上記デモでは xhtml 変換が有効となっていますのでそれでだいじょうぶなのかもしれません。

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

CMONOS.JP 開発者 ちーhttps://cmonos.jp/blog/ (2012年5月17日(木) 午後4時2分34秒)
タンジェリン-エヘッ

追伸です。

それぞれの画面で HTML ソースを確認し、入力内容から style が除去されているかどうか確認されると、どの処理が問題なのか絞り込みやすいと思います。

CMONOS.JP 開発者 ちー (2012年5月17日(木) 午後5時13分50秒)
ボンダイ-ニコリン

お手数をおかけしました。

タグの件、お手数をおかけしました。

nicEditでは、送信時に編集内容をtextareaに差し戻すんですか。うーん、ちょっと実験してみますね。

また、nicEditではバックスラッシュを追加する処理をしていないと言う事はPHPで処理する時にエスケープしているんですね、きっと。

<span style="\">は謎ですね…これももう少し調べてみます。


XHTML変換って、どこで設定するんでしょう?初歩的な質問で申し訳ありません。


HTML5でソースを書いているので、XHTMLは好ましくないので、できればオフにしたいところです。

bluez (2012年5月20日(日) 午前5時45分57秒)
タンジェリン-エヘッ

こんにちは。

XHTML 変換は日本語版ではデフォルトで有効になっています。ただ、これをオフにすると、HTML4 のタグになりますので <font> とか <b> とかを使ってしまいます(^^;。HTML5 はほぼ XHTML ですので、むしろ XHTML 変換を有効にされた方が好いと思います。

CMONOS.JP 開発者 ちー (2012年5月20日(日) 午後3時32分9秒)
ボンダイ-ニコリン

お久しぶりです。

NEXT>>

PC 向けページに移動する