Что заставляет редакторов вставлять данные в textarea как html-подобные в расширенные редакторы wysiwyg?

Я хочу скопировать / вставить html с веб-сайтов и сохранить их в базе данных mysql. Для этого я проверил CKEditor, который позволяет мне вставлять html, даже текстовые документы, и генерирует для него html-код. Поскольку все, что я хочу, это «сгенерировать» вставленные данные как html, вместо использования полного редактора wysiwyg, такого как CKEditor, я хочу написать код (возможно, с помощью jquery) для преобразования вставленных данных в теги html и форматирование.

Что делают эти онлайн-редакторы для достижения этой функциональности? Как они конвертируют данные буфера обмена в HTML-код? Почему я получаю только текст, когда вставляю текст в формате html или div или кнопки в это текстовое поле здесь, а также изображения и div правильного размера в редакторах wysiwyg?

Доступны ли редакторы к данным буфера обмена и манипулируют ли ими? Сохраняет ли буфер обмена данные форматирования в организованном порядке, позволяя «CKEditor» или другим пользователям манипулировать ими?

Можно ли это сделать с помощью jQuery? Или нам нужен еще и серверный код?

Если вы можете пролить свет на эту тему, я был бы признателен. Я хочу знать метод только для того, чтобы написать для него соответствующий код.

Для справки: http://ckeditor.com/demo.


javascript html wysiwyg
person Logan    schedule 29.11.2012    source источник
comment
Я полагаю, вы могли бы вставить HTML в элемент с contenteditable="true" и получить из него внутренний HTML с помощью небольшого скрипта.   -  person Tim Medora    schedule 29.11.2012

Ответы (1)


arrow_upward
6
arrow_downward

Вот грубая демонстрация, которая работает в Chrome, IE9 и Safari: http://jsfiddle.net/SN6PQ/2/ < / а>

<div contenteditable="true" id="paste-target">Paste Here</div>​

$(function(){
    $("#paste-target").on("paste", function(){
        // delay, or else innerHTML won't be updated
        setTimeout(function(){

            // option 1 - for pasting text that looks like HTML (e.g. a code snippet)
            alert($("#paste-target").text());

            // option 2 - for pasting actual HTML (e.g. select a webpage and paste it)
            alert($("#paste-target").html());
        },100);
    });        
});​

Не уверен, что это то, что вам нужно, но он предупреждает HTML при вставке. Имейте в виду, что редактируемый элемент содержимого может изменить разметку при вставке.

person Tim Medora    schedule 29.11.2012
comment
Спасибо, это именно то, что я искал ... так что есть событие вставки для jquery ... самое интересное! - person Logan; 29.11.2012
comment
Рад, что это работает. Есть множество вопросов по вставке, если вы хотите уточнить мой пример, например stackoverflow.com/questions/686995/ - person Tim Medora; 29.11.2012
comment
Ах, я действительно видел этот пост, пока занимался исследованием, но не понял, что он также вставлен как html. Между прочим, я поискал совместимость для события вставки для javascript, и вот он: cutcopypaste - person Logan; 29.11.2012