質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1167閲覧

cleditorで行間を詰めたときに連続した改行ができない

sleepsheep

総合スコア310

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/10/18 06:52

jQueryプラグインのcleditorというWYSIWYGエディタを使用してアプリケーションを開発しています。

Internet Exploreで画面を表示しているのですが、Enterキーで改行すると行の間隔が広くなってしまいます。
![イメージ説明]
行間をもっと狭くしたいと思い、方法を探していました。

このエディタはiframeにHTMLのタグが配置されるのですが、開発者ツールで見たところ、それぞれの行が<p>タグで囲われていました。
イメージ説明
この<p>タグのmarginを調整すれば行間が狭くなると考え、iframe内部のstyleを指定するプロパティであるdocCSSFileに、以下のstyleを指定したCSSファイルを設定しました。

CSS

1p { margin: 0px; }

上記のようにすることで行間は詰めることができました。

次に、この状態からtoolbarから文字列の背景色を変更し、変更した文字列内でEnterで改行したとき、改行の入力が出来なくなってしまいます。1つの改行は入るのですが、2回以上連続して入力したときに改行が反映されません。

背景色を変更したときに、連続した改行を入力する方法をご教授いただけませんでしょうか。

太字や文字色を変更したときは連続改行ができているので、背景色を変更したときだけの現象のようです。
開発者ツールで確認したところ、改行により空の<p>タグが追加されていたので、iframe上の表示が出来ていないような気がします。
文字色を変更したときと背景色を変更したときとでは、styleを設定するfontタグの書き方が違っていましたが、この辺りが関係しているのでしょうか。
(背景色変更ではfontタグのstyle属性のbackground-colorを指定、文字色変更ではcolor属性が設定されていました。)
イメージ説明

ご存知の方がいらっしゃいましたらご教授ください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

以下のようにしてみてはいかがでしょうか?
index.html

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="jquery.cleditor.min.css"> 6 <title>タイトル</title> 7</head> 8<body> 9<textarea id="input" name="input"></textarea> 10<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 11<script src="jquery.cleditor.min.js"></script> 12<script src="prettify/prettify.js"></script> 13<script> 14 $("#input").cleditor({ 15 docCSSFile: "style.css" 16 }); 17</script> 18</body> 19</html>

style.css

CSS

1p { 2 margin: 0; 3} 4 5p::before { 6 content: "\200b"; 7}

投稿2017/10/18 08:01

編集2017/10/18 08:02
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sleepsheep

2017/10/19 01:46

ご回答くださいました方法で試してみました。 Enter入力分だけ複数の空行が表示されるようになりました。ありがとうございます。 CSSについて詳しくないので、回答いただいた内容について重ねて教えていだけますでしょうか。 (1) このstyleは「pタグの前に"\200b"という文字を表示する」という意味で合っていますか? (2) "\200b"について調べたところでは、ZERO WIDTH SPACEというみたいですが、これを入れることでなぜ空行が表示されるようになったのでしょうか? (3) 最初の状態で、背景色を変更したときだけ空行が表示されなかったのはなぜでしょうか?文字色と背景色はともにpタグ内のfontタグで指定されていたので、同じように動作すると思ったのですが。
s8_chu

2017/10/19 17:02

(1): 微妙に違います。正しくは、pタグの**最初の子要素として**ゼロ幅スペースを生成しています。 (3): 先に(3)について説明します。fontタグの中に内容が記述されていないため、pタグの高さがなくなってしまうからです。 (2): (3)で言ったとおり、内容がないために高さが無くなっていることが原因なので、ゼロ幅スペースによって高さができるようにしています。
sleepsheep

2017/10/22 02:47

pタグ内のすべての要素の前に"\200b"を追加するということですね。 ゼロ幅スペースは高さは他の文字と同じなので、それだけの高さが取られて表示されたということも理解しました。 同じ空のfontタグでも、文字色と背景色の指定で縦の間隔が異なって表示された理由は謎ですが、もう少し調べてみたいと思います。 ありがとうございます。
guest

0

そもそも、Enterでは改段落で、改行はShift+Enterではないですか?

(下記は、別のエディタの話でした。以降は無視してください。)

そして、この挙動を変える設定があるようです。

http://103px.blog.fc2.com/blog-entry-54.html

投稿2017/10/19 04:21

編集2017/10/19 04:23
x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sleepsheep

2017/10/19 05:21

ご回答いただいた通り、IEでもShift+Enterで<br>が入ります。 ですが、ユーザーにはEnterで改行とした方が使い勝手が良いと思い、<p>タグによる空行でも1行分の高さが表示されるようにしたかったのです。 ブラウザによってはEnterで<br>タグが入るので、それなら良かったのですが...。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問