wysihtml5: Копирование текста из текстового документа в редактор

Question

При копировании текста из слова в wysihtml5 editor текст перепутался (как с точки зрения форматирования, так и с точки зрения дополнительных добавленных символов). Есть ли легкое решение для этого? Правильное поведение, которое я ищу, было бы тем, как работает редактор Rich Text Text Overflow - текст, скопированный и вставленный из слова, выглядел идентичным документу слова.

Спасибо!

Update: Для решения проблем, наблюдаемых при форматировании вставленного текста слова, я добавил строку "p": {}, в используемом wysihtml5-0.30_rc2.js файла. Строка была добавлена ​​в объявление defaultOptions [parserRules] [теги] (see used resource).

Тем не менее, теперь я могу видеть в начале вставленного текста в «Определения шрифта» пункт:

<!-- /* Font Definitions */ @font-face {font-family:Arial; panose-1:2 11 6 4 2 2 2 2 2 4; mso-font-charset:0; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 0 0 0 1 0;} @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:1; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:0 0 0 0 0 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:0cm; line-height:115%; mso-pagination:widow-orphan; mso-hyphenate:none; font-size:11.0pt; font-family:Arial; mso-fareast-font-family:Arial; mso-bidi-font-family:Arial; color:black; mso-fareast-language:HI; mso-bidi-language:HI;} a:link, span.MsoHyperlink {mso-style-unhide:no; mso-style-parent:""; color:navy; mso-ansi-language:#00FF; mso-fareast-language:#00FF; mso-bidi-language:#00FF; text-decoration:underline; text-underline:single;} a:visited, span.MsoHyperlinkFollowed {mso-style-noshow:yes; mso-style-priority:99; color:purple; mso-themecolor:followedhyperlink; text-decoration:underline; text-underline:single;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; font-size:10.0pt; mso-ansi-font-size:10.0pt; mso-bidi-font-size:10.0pt;} @page WordSection1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 
90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.WordSection1 {page:WordSection1;} --> 

Это происходит только тогда, когда я использую Firefox, и не происходит в Chrome. Любые идеи о том, как избавиться от этой проблемы?

Answer 1

wysihtml5 содержит синтаксический анализатор, который анализирует весь текст, который вставляется в его текстовую область, и применяет правила фильтрации, определенные в конфигурационном объекте parserRules. Добавление "style": { "remove": 1 } к вашему parserRules должно сделать трюк.

Чтобы понять проблему Firefox, вы должны увидеть исходный HTML-код буфера обмена (исходящий из Word), который вставляется в текстовую область. Простое копирование текста Word и вставка его в текстовый редактор не помогут, потому что текстовый редактор запрашивает текстовый вариант содержимого буфера обмена.

Если вы находитесь на Mac, вы можете увидеть этот необработанный буфер обмена с помощью ClipboardViewer tool, который вам нужно скомпилировать с помощью XCode. Желаемый HTML-контент должен находиться в полях public.html или Apple HTML pasteboard type. Возможно, существуют другие инструменты, которые не нужно компилировать и/или работать в других операционных системах.

Теперь вы должны увидеть, что содержимое буфера обмена из Слова на самом деле выглядит как

<span> 
    <!-- 
     /* Font Definitions */ 
     ... 
     div.WordSection1 {page:WordSection1;} 
     ... 
    --> 
    </span> 

Так, удалив style тег (со всеми его содержанием) определение нежелательной шрифта исчезает.

Посмотрите на wysihtml5’s parserRule demo, чтобы просмотреть дополнительные параметры конфигурации.

Answer 2

Я решил это, переопределив wysihtml5.dom.getPastedHtml. Просто добавьте это после того, как вы загрузили wysihtml5:

wysihtml5.dom.getPastedHtml = function(event) { 
    var html; 
    if (event.clipboardData) { 
    html = event.clipboardData.getData('text/plain'); 
    } 
    return html; 
};