3

私は子を持つ contenteditable を持ってい<Div>ます。その中にいくつかのタグがあります<P><P><BR>

テキストを選択してjustifyCenterコマンドを実行すると、 FIREFOX では機能しません。これは jsfiddle です。

http://jsfiddle.net/mody5/LogyL670/

これはコードです：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<button onclick="document.execCommand('justifyCenter', false, null);">center</button>

<div contenteditable="true" style="border:1px solid gray;"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco <br><br>laboris nisi ut<br><br><br> aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>


</body>
</html>
4

1 に答える 1

1

この問題は、contenteditable div に含まれる html に関連しています。FF では、br タグを段落内にとどめることはできないようです。したがって、最初の行を段落終了タグで終了し、最後にあるこの終了タグを削除すると、すべて正常に機能します。

さらに、両端揃えやその他のコマンドは段落に対して機能します。

したがって、編集可能なコンテンツに含まれる段落に新しい行を追加する必要がある場合は、HTML - Newline char in DIV content editable? で報告されています。、次のような値を contenteditable div スタイルに追加する必要があります。

div: white-space: pre or white-space: pre-wrap

エディターを改善する方法について別のアイデアを提供するために、インターネットからコピーした別の例を追加しました (詳細については、execCommand: how to useを参照してください)。

function justify(mode) {
  document.getElementById('contentEdt').focus();
  document.execCommand(mode, false,false);
}


$(function() {
  $('.wysiwyg-controls a').on('click', function(e) {
    e.preventDefault();
    document.execCommand($(this).data('role'), false);
  });
})
* {
  box-sizing: border-box;
}

.wysiwyg-editor {
  display: block;
  width: 50%;
  margin: 3% auto 0;
  resize: both;
  overflow: auto;
  border: 1px solid #C2CACF;
}

.wysiwyg-controls {
  display: block;
  width: 100%;
  height: 35px;
  border: 1px solid #C2CACF;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  background: #fff;
}
.wysiwyg-controls a {
  display: inline-block;
  width: 35px;
  height: 35px;
  vertical-align: top;
  line-height: 38px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  color: #ADB5B9;
}
.wysiwyg-controls [data-role="bold"] {
  font-weight: bold;
}
.wysiwyg-controls [data-role="italic"] {
  font-style: italic;
}
.wysiwyg-controls [data-role="underline"] {
  text-decoration: underline;
}

[class^="menu"], [class^="menu"]:before, [class^="menu"]:after {
  position: relative;
  top: 48%;
  display: block;
  width: 65%;
  height: 2px;
  margin: 0 auto;
  background: #ADB5B9;
}
[class^="menu"]:before {
  content: '';
  top: -5px;
  width: 80%;
}
[class^="menu"]:after {
  content: '';
  top: 3px;
  width: 80%;
}

.menu-left:before, .menu-left:after {
  margin-right: 4px;
}

.menu-right:before, .menu-right:after {
  margin-left: 4px;
}

.wysiwyg-content {
  max-width: 100%;
  width: 100%;
  height: 100%;
  padding: 12px;
  resize: both;
  overflow: auto;
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  border: 1px solid #C2CACF;
  border-radius: 0 0 3px 3px;
  background: #F2F4F6;
  white-space: pre;
}
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>


<button onclick="justify('justifyCenter');">center</button>
<button onclick="justify('justifyLeft');">left</button>
<button onclick="justify('justifyRight');">right</button>

<div id="contentEdt" contenteditable style="border:1px solid gray;">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
        <br>
        <br><p>laboris nisi ut</p>
        <br>
        <br>
        <br><p>aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="wysiwyg-editor">
    <div class="wysiwyg-controls">
        <a href='#' data-role='bold'>B</a>
        <a href='#' data-role='italic'>I</a>
        <a href='#' data-role='underline'>U</a>
        <a href='#' data-role='justifyleft'><i class="menu-left"></i></a>
        <a href='#' data-role='justifycenter'><i class="menu-center"></i></a>
        <a href='#' data-role='justifyright'><i class="menu-right"></i></a>
    </div>
    <div class="wysiwyg-content" contenteditable>
        <p>Lorem ipsum dolor sit amet, 
          consectetur adipisicing 
          elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
            <br>
            <br><p>laboris nisi ut</p>
            <br>
            <br>
            <br><p>aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

于 2016-03-04T19:30:34.550 に答える