none
iframe ダブルスペースになってします RRS feed

 > 

  • 質問

  • Question
    サインインして投票
    0
    サインインして投票

    こんにちは

    私は現在、リッチテキストエディタを作成しています。

    そこで、IEとその他のブラウザーでの動作が違うため困っています。

    iframe内で改行しますと、IE以外では通常の改行、IEではダブルスペース改行になってしまいます。

    例）

    IE以外：(FireFox, Google Chrome)

    1行目
    2行目
    3行目

     

    IE: (IE 8)

    1行目

    2行目

    3行目

     

    上記のように、IEでは行と行の間に、空白の行が入ってしまうようです。

    行と行の間に空白の行が入らないようにするにはどうすればよろしいでしょうか？

    必要最小限のコードを以下へ貼り付けました。

    宜しくお願い致します

    <html>
<head>
<script type="text/javascript">
function init()
{	
	browser = window.navigator.userAgent;
	if(browser.indexOf("MSIE") > -1)
	{
		document.frames['rtext'].document.designMode="On";
	}else{
		document.getElementById('rtext').contentWindow.document.designMode = "on";	
	}
}
</script>
</head>
<body onload="init()">
<iframe id="rtext"></iframe>
</body>
</html>

    2010年10月25日 8:45
    |

回答

  • Question
    サインインして投票
    0
    サインインして投票

    ＞行と行の間に空白の行が入らないようにするにはどうすればよろしいでしょうか？

    IEは、pタグやformタグに上下marginが存在するため、
    以下のようにしてmarginをなくせば空白が入らなくなります。
    実際は、別リンクにする方がよさげです。
    （この掲示板も以前はmarginをなくす指定されていましたが、確か半年ほど前に変わりました）

    # 関係ありませんが、私もエディタコンポーネントの作成をしたことがありますが、メールアドレスっぽい文字列に勝手にリンクが張られるなどいくつか理想とする動作とならない場合がありましたので、別な手段を取ったことがあります。 

    <html>
<head>
<script type="text/javascript">
function init()
{	
	browser = window.navigator.userAgent;
	if(browser.indexOf("MSIE") > -1)
	{
		var doc = document.frames['rtext'].document;
		doc.designMode="On";
		var html = "<html><head><style>* { margin: 0px; }</style></head><body></body></html>";
		doc.open();
		doc.write(html);
		doc.close();
	}else{
		document.getElementById('rtext').contentWindow.document.designMode = "on";	
	}
}
</script>
</head>
<body onload="init()">
<iframe id="rtext"></iframe>
</body>
</html>
    • 回答としてマーク hiasa 2010年10月27日 0:20
    2010年10月26日 14:39
    |

すべての返信

  • Question
    サインインして投票
    0
    サインインして投票

    ＞行と行の間に空白の行が入らないようにするにはどうすればよろしいでしょうか？

    IEは、pタグやformタグに上下marginが存在するため、
    以下のようにしてmarginをなくせば空白が入らなくなります。
    実際は、別リンクにする方がよさげです。
    （この掲示板も以前はmarginをなくす指定されていましたが、確か半年ほど前に変わりました）

    # 関係ありませんが、私もエディタコンポーネントの作成をしたことがありますが、メールアドレスっぽい文字列に勝手にリンクが張られるなどいくつか理想とする動作とならない場合がありましたので、別な手段を取ったことがあります。 

    <html>
<head>
<script type="text/javascript">
function init()
{	
	browser = window.navigator.userAgent;
	if(browser.indexOf("MSIE") > -1)
	{
		var doc = document.frames['rtext'].document;
		doc.designMode="On";
		var html = "<html><head><style>* { margin: 0px; }</style></head><body></body></html>";
		doc.open();
		doc.write(html);
		doc.close();
	}else{
		document.getElementById('rtext').contentWindow.document.designMode = "on";	
	}
}
</script>
</head>
<body onload="init()">
<iframe id="rtext"></iframe>
</body>
</html>
    • 回答としてマーク hiasa 2010年10月27日 0:20
    2010年10月26日 14:39
    |
  • Question
    サインインして投票
    0
    サインインして投票

    （´・ω・｀）さん、

    ご回答有難う御座いました。

    教えていただいた方法を試したところ、空白が入らないことを確認しました。

    助かりました m(_ _)m

    > # 関係ありませんが、私もエディタコンポーネントの作成をしたことがありますが、メールアドレスっぽい文字列に勝手にリンクが張られるなどいくつか理想とする動作とならない場> 合がありましたので、別な手段を取ったことがあります。 

    もし差し支えありませんでしたら、どのような手段を取ったから参考までに教えていただけないでしょうか？

     

     

    2010年10月27日 0:20
    |
  • Question
    サインインして投票
    0
    サインインして投票

    ＞どのような手段を取ったか

    Full-JavaScript(execCommandなし)で、caretや範囲選択の自作です(なのでrangeを駆使したりしない)。
    ただ、実現したいサービスとの相性や状況にあった環境となっていないと難しいかと思われます(技術面や運用コスト含めて)。

    他にも、Flash/SilverLight/Canvasでもよいでしょうね。
    http://www.google.co.jp/search?q=canvas+TextEditor
    http://www.google.co.jp/search?q=Flash+TextEditor

    2010年10月28日 2:44
    |
  • Question
    サインインして投票
    0
    サインインして投票

    （´・ω・｀）さん、

     

    確かに、Flashなどの手もありますね。

    参考になりました。

    ありがとうございました


    2010年10月29日 5:18
    |