Execcommand justifyCenter не работает в Firefox, когда тег P содержит BR внутри

У меня есть 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>

javascript firefox text-justify contenteditable execcommand
person medBouzid    schedule 04.03.2016    source источник
comment
Интересно. Это действительно работает, если вы выбираете весь текст, а затем нажимаете на центр, но, конечно, это не то, что вам нужно.   -  person Mr Lister    schedule 04.03.2016
comment
@MrLister также не работает, если вы выбираете часть текста   -  person medBouzid    schedule 04.03.2016
comment
enter создает новый p, shift+enter создает br, возможно, вы можете изменить это поведение с помощью document.execCommand("insertBrOnReturn", false, true)   -  person caub    schedule 04.08.2016

Ответы (1)


arrow_upward
1
arrow_downward

Проблема связана с html, содержащимся в contenteditable div: кажется, что в FF тег br не может оставаться внутри абзаца. Таким образом, завершение первой строки закрывающим тегом абзаца и удаление этого закрывающего тега в конце — все работает нормально.

Более того, выравнивание и другие команды работают с абзацами.

Итак, если вам нужно добавить новую строку в абзац, содержащийся в редактируемом содержимом, как указано в HTML — символ новой строки в редактируемом содержимом DIV? вам нужно добавить к стилю div contenteditable значение, например:

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>

person gaetanoM    schedule 04.03.2016
comment
ваше решение работает, но есть ли способ сохранить выделение выделенного текста вместо текста selectAll, а затем удалить выделение, я не хочу потерять выбор, сделанный пользователем после того, как он нажмет кнопку выравнивания. - person medBouzid; 06.03.2016
comment
удалив последнюю строку Removeallranges, команда selectAll будет выполнена, и весь текст будет выделен и центрирован, если я удалю команду selectAll, кнопка выравнивания перестанет работать !! - person medBouzid; 06.03.2016
comment
проблема связана с Firefox, и это было важно для меня :( Спасибо за помощь, если вы найдете свободное время позже, пожалуйста, не стесняйтесь обновить ответ, мне это действительно нужно :) Еще раз спасибо - person medBouzid; 06.03.2016