Вставить содержимое в виде обычного текста в редакторе summernote
Мне нужно скопировать какой-нибудь контент в мой редактор summernote. Но когда я вставляю, он берет стиль страницы, откуда я ее скопировал. Мне нужно вставить его в виде обычного текста. Есть ли какое-либо решение?
Ответы
Ответ 1
Используйте onPaste
Обратный вызов
Используйте параметр onPaste
, чтобы определить обратный вызов, который будет разделять теги и вручную вставлять текст.
$editor.summernote({
onPaste: function (e) {
var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
e.preventDefault();
document.execCommand('insertText', false, bufferText);
}
});
Кредит: https://github.com/summernote/summernote/issues/303
Решить проблемы с Firefox:
У вас могут быть проблемы с Firefox. Если это так, оберните document.execCommand
в функцию таймера, чтобы задержать его выполнение крошечным битом:
setTimeout(function(){
document.execCommand( 'insertText', false, bufferText );
}, 10);
Обновление для v0.7.0 +
Позиция обратных вызовов в параметрах изменяется после v0.7.0
После v0.7.0 каждый обратный вызов должен быть обернут объектом обратных вызовов. (источник)
Это означает, что исходный код должен быть записан как
$editor.summernote({
callbacks: {
onPaste: function (e) {
var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
e.preventDefault();
document.execCommand('insertText', false, bufferText);
}
}
});
Благодарим Матье Кастеста за то, что вы указали это (так что если этот бит помог, поддержите его ответ!)
TL; DR: Здесь представлена функциональная демонстрация
Ответ 2
После v0.7.0 каждый обратный вызов должен быть обернут объектом обратных вызовов. http://summernote.org/deep-dive/#callbacks
Итак, если вы используете summernote от v0.7.0 или выше, ответ jcuenod теперь можно переписать как:
$('.summernote').summernote({
callbacks: {
onPaste: function (e) {
var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
e.preventDefault();
// Firefox fix
setTimeout(function () {
document.execCommand('insertText', false, bufferText);
}, 10);
}
}
});
Ответ 3
Обратный вызов onPaste прекрасно работает, но у меня были проблемы с разной обработкой переносов строк в разных браузерах. Поэтому я пришел к следующему решению, в котором используются html-строки:
$(".htmleditor").summernote({
callbacks: {
// callback for pasting text only (no formatting)
onPaste: function (e) {
var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
e.preventDefault();
bufferText = bufferText.replace(/\r?\n/g, '<br>');
document.execCommand('insertHtml', false, bufferText);
}
}
});
Ответ 4
Удалось сделать ужасную работу для IE11. Это, к сожалению, также попросит разрешение на вставку от пользователя. Если кто-то выяснит лучшее предложение, я все уши.
var trap = false;
$(document).ready(function () {
$('#summernote').summernote({
callbacks: {
onPaste: function (e) {
if (document.queryCommandSupported("insertText")) {
var text = $(e.currentTarget).html();
var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
setTimeout(function () {
document.execCommand('insertText', false, bufferText);
}, 10);
e.preventDefault();
} else { //IE
var text = window.clipboardData.getData("text")
if (trap) {
trap = false;
} else {
trap = true;
setTimeout(function () {
document.execCommand('paste', false, text);
}, 10);
e.preventDefault();
}
}
}
}
})
})
JSFiddle
Ответ 5
Ctrl + Shift + V является самым простым решением: D