JQuery - вставить событие, зачеркнуть насыщенный текст

Question

У меня есть поле contentEditable, где я хотел бы сделать следующее. Когда пользователь заполняет насыщенный текст в поле (слово microsoft или иначе), я хотел бы удалить весь богатый текст, но сохранить разрывы строк.

Мое мышление: если вы вставляете богатый текст в обычную <texarea>, он удаляет все форматирование и сохраняет разрывы (созданные явными новыми строками, а также элементы уровня блока). Я хотел бы как-то имитировать это. Другими словами, создайте временную текстовую область, перехватите событие вставки, примените ее к Textarea, получите результаты и вставьте их обратно в исходное поле Content Editable.

Однако, я не нашел способ имитировать это. Если я вставляю содержимое в текстовое поле через jquery, он, кажется, обновляет все форматирование форматированного текста, когда я пытаюсь его скопировать, обратно в исходные поля

Answer 1

Вы можете достичь чего-то подобного без необходимости textarea, просто обработка кода в редактируемом содержимом div каждый раз, когда происходит изменение его значения, и удаление всех тегов, кроме абзацев и разрывов строк.

Идея заключается в том, что каждый раз, когда изменяется содержание в DIV (слушать input события):

• Заменить во внутреннем HTML все </p> и <br> для не-HTML лексем (например: [p] и [br] соответственно).
• Удалить все HTML-теги (вы можете сделать это с .text())
• Заменить маркеры, которые вы использовали для их эквиваленты (и их отверстия!)
• Wrap все между <p> и </p>.

Вот простой демо:

$("#editable").on("input", function() { 
 

 
    $this = $(this); 
 

 
    // replace all br and closing p tags with special tokens 
 
    $this.html($this.html().replace(/\<\/p\>/g,"[p]").replace(/\<br\>/g,"[br]")); 
 

 
    // remove all the tags, and then replace the tokens for their original values 
 
    $this.html("<p>" + $this.text().replace(/\[p\]/g, "</p><p>").replace(/\[br\]/g,"<br>") + "</p>"); 
 

 
});

div#editable, div#demo { 
 
    border:1px solid gray; 
 
    padding:6px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div contenteditable="true" id="editable"></div> 
 

 
<h3>Demo</h3> 
 
<p>Copy this code and paste it on the editable div above:</p> 
 
<div id="demo"> 
 
    <p>This <b>is</b> <i>a</i> styled paragraph.</p> 
 
    <p>&nbsp;</p> 
 
    <p>The <span style="font-weight:bold">above paragraph</span> is empty.</p> 
 
    <p>And this is a new paragraph…<br>with a line break!</p> 
 
</div>

Вы также можете видеть, что работает на этом JSFiddle: http://jsfiddle.net/v5rae96w/

Я попытался это решение с MS Word и HTML, и это работает отлично. Но у него есть одна проблема: это только разрывы строк с p и br (что прекрасно работает с MS Word и другими текстовыми процессорами). Если пользователь копирует HTML, например div (или другие элементы блока, которые вызывают разрыв строки), он не будет работать так же хорошо. Если вам нужно сломать все элементы блока, для этого решения могут потребоваться некоторые изменения.

---

Чтобы исправить это, вы могли бы заменить все блочные теги с p (или div или элемент, который вы хотите), указав его на регулярное выражение:

$this.html().replace(/(\<\/p\>|\<\/h1\>|\<\/h2\>|\<\/div\>)/gi,"[p]") 

Как вы можете увидеть здесь:

$("#editable").on("input", function() { 
 
    
 
    $this = $(this); 
 

 
    // replace all closing block tags with special token 
 
    $this.html($this.html().replace(/(\<\/p\>|\<\/h1\>|\<\/h2\>|\<\/h3\>|\<\/h4\>|\<\/h5\>|\<\/h6\>|\<\/div\>)/gi,"[p]").replace(/\<br\>/gi,"[br]")); 
 
    
 
    // remove all the tags 
 
    $this.html("<p>" + $this.text().replace(/\[p\]/g,"</div><p>").replace(/\[br\]/g,"<br>") + "</p>"); 
 

 
});

div#editable, div#demo { 
 
    border:1px solid gray; 
 
    padding:6px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div contenteditable="true" id="editable"></div> 
 

 
<div> 
 
    <h3>Demo</h3> 
 
    <p>Copy this code and paste it on the editable div above:</p> 
 
    <div id="demo"> 
 
     <p>This <b>is</b> <i>a</i> styled paragraph.</p> 
 
     <p> </p> 
 
     <p>The <span style="font-weight:bold">above paragraph</span> is empty.</p> 
 
     <p>And this is a new paragraph…<br>with a line break!</p> 
 
    </div> 
 
</div>

Или на этом JSFiddle: http://jsfiddle.net/v5rae96w/1/