3

我有<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 中所述 - DIV 内容可编辑中的换行符？，您需要向 contenteditable div 样式添加一个值，例如：

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

我添加了另一个示例，从互联网上复制，只是为了让您了解如何改进编辑器（有关详细信息，请参阅execCommand: 如何使用）：

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 回答