Вставить богатый текст в редактируемый контент div и сохранить только полужирный и курсивный форматирование

Я хочу вставить некоторый богатый текст с разными шрифтами, размерами шрифтов, весами шрифтов и т.д. в редактируемый контент div и ТОЛЬКО держать смелость и курсив. Любая идея, как это сделать?

Следующий код превращает богатый текст в обычный текст при вставке в редактируемый контент div.

Я пробовал смотреть на переменную text в приведенном выше коде, но он, похоже, не отформатирован.

Ответы

Ответ 1

Здесь рабочая демонстрация: http://jsfiddle.net/SJR3H/7/

$(document).ready(function(){

        $('[contenteditable]').on('paste',function(e) {

            e.preventDefault();

            var text = (e.originalEvent || e).clipboardData.getData('text/html') || prompt('Paste something..');
            var $result = $('<div></div>').append($(text));

            $(this).html($result.html());

            // replace all styles except bold and italic
            $.each($(this).find("*"), function(idx, val) {

                var $item = $(val);
                if ($item.length > 0){
                   var saveStyle = {
                        'font-weight': $item.css('font-weight'),
                        'font-style': $item.css('font-style')
                    };
                    $item.removeAttr('style')
                         .removeClass()
                         .css(saveStyle); 
                }
            });

            // remove unnecesary tags (if paste from word)
            $(this).children('style').remove();
            $(this).children('meta').remove()
            $(this).children('link').remove();

        });

    });

Редактировать позже: http://jsfiddle.net/SJR3H/8/

я добавил следующие строки:

$item.replaceWith(function(){
       return $("<span />", {html: $(this).html()});
});

Он фактически заменяет теги html на span s. Там вы можете по выбору выбрать теги, которые были в исходном тексте (h1, p и т.д.), Стилизуя их по своему желанию.

Ответ 2

Начните с кода:

//on paste
var text = (e.originalEvent || e).clipboardData.getData('text/plain')


//html in clipboard are saved as Plain Unicode string , 

getData('text/plain') //return data as string,

//if MIME TYPE 'text/html' is used you will get data as html with style attributes

// insert text

document.execCommand('insertText', false, text);

//this will simply insert the text to contenteditable div.

//so there is no chance of knowing recieved text is bold / italics.

(1) мы должны получить данные как html, чтобы получить свойства стиля: fontWeight, fontStyle.

(2) уменьшить html для необходимого формата стиля,

(3) добавить к contenteditable div.

! important:

мы зависим от API буфера обмена, чтобы получить данные.

он не полностью поддерживается более новыми браузерами, пожалуйста, проверьте ссылки ниже:

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/paste

http://caniuse.com/clipboard

поэтому в браузере IE он работает не так, как ожидалось.

аргумент формата данных, который мы передаем в getData(), отличается в браузере IE:

http://msdn.microsoft.com/en-us/library/ie/ms536436(v=vs.85).aspx

поэтому мы получаем только обычную строку из метода getData() я проверил в IE 9.0.8112.16421 (не обновлено),

Мне не известно о версии IE 10, 11.

Я закодировал таким образом, если getData ( "Html" ) поддерживается в коде 10,11, требования будут выполнены.

Работает код: Как и @Cristi, получим все html-элементы.

итерации через них, вместо изменения атрибутов стиля мы используем теги.

теги для жирного шрифта и тег для курсива.

Итерации выполняются асинхронно, потому что вставка большого текстового содержимого может зависать браузера.

Я тестировал Chrome, Firefox.

pasteArea.addEventListener('paste', function(e) {

    // prevent pasting text by default after event
    e.preventDefault(); 

    var clipboardData = {},
    rDataText,
    rDataHTML;

    clipboardData = e.clipboardData;
    rDataHTML = clipboardData.getData('text/html');
    rDataPText = clipboardData.getData('text/plain');


    if (rDataHTML && rDataHTML.trim().length != 0) {

        //Function Call to Handle HTML

        return false; // prevent returning text in clipboard
    }

    if (rDataPText && rDataPText.trim().length != 0) {

        //Function Call to Handle Plain String

        return false; // prevent returning text in clipboard
    }

}, false);

// Handle Plain Text
function PlainTextHandler(pText) {
    // Remove Line breaks
    // append to contenteditable div - using range.insertNode()
    // document.execCommand();  had issue in ie9 so i didn't used it 
}

// Handle HTML
function formatHtml(elem, complete) {
        var flag_italic = false;
        var flag_weight = false;
        var fontStyle;
        var fontWeight;

        if (elem.nodeType == 1) { // only pass html elements

            // get style in css 
            var CSSStyle = window.getComputedStyle(elem);
            fontStyle = CSSStyle.fontStyle;
            fontWeight = CSSStyle.fontWeight;

            // get style defined by inline
            var InlineStyle = elem.style;
            inlineFontStyle = InlineStyle['font-style'];
            inlineFontWeight = InlineStyle['font-weight'];
            if (inlineFontStyle && inlineFontStyle.trim() != '') fontStyle = inlineFontStyle;
            if (inlineFontWeight && inlineFontWeight.trim() != '') fontWeight = inlineFontWeight;

            // get style defined in MSword
            var msStyle = elem.getAttribute('style');
            if (/mso-bidi/.test(msStyle)) {
                var MSStyleObj = {};
                var styleStrArr = msStyle.split(";");
                for (i = 0; i < styleStrArr.length; i++) {
                    var temp = styleStrArr[i].split(":");
                    MSStyleObj[temp[0]] = temp[1];
                }
                fontStyle = MSStyleObj['mso-bidi-font-style'];
                fontWeight = MSStyleObj['mso-bidi-font-weight'];
            }

            if (fontStyle && fontStyle == 'italic') flag_italic = true; // flag true if italic

            if (fontWeight && (fontWeight == 'bold' || 600 <= (+fontWeight))) flag_weight = true;  // flag true if bold - 600 is semi bold

            // bold & italic are not applied via style
            // these styles are applied by appending contents in new tags string & bold
            if (flag_italic && flag_weight) {
                var strong = document.createElement('strong');
                var italic = document.createElement('i');
                strong.appendChild(italic);
                newtag = strong;
            } else {
                if (flag_italic) {
                    newtag = document.createElement('i');
                } else if (flag_weight) {
                    newtag = document.createElement('strong');
                } else {
                    // remove un wanted attributes & element
                    var tagName = elem.tagName;
                    // strong are not skipped because, by creating new unwanted attributes will be removed
                    if (tagName == 'STRONG' || tagName == 'B') {
                        newtag = document.createElement('strong');
                    } else if (tagName == 'I') {
                        newtag = document.createElement('i');
                    } else {
                        newtag = document.createElement('span');
                    }
                }
            }

            // content appended
            var elemHTML = elem.innerHTML;
            if (flag_italic && flag_weight) {
                newtag.childNodes[0].innerHTML = elemHTML;
            } else {
                newtag.innerHTML = elemHTML;
            }

            // curr element is replaced by new
            elem.parentNode.insertBefore(newtag, elem);
            elem.parentNode.removeChild(elem);
        }
        complete() // completed one iteration
    }

Скрипка: http://jsfiddle.net/aslancods/d9cfF/7/

Ответ 3

Я использовал это на своем веб-сайте в течение длительного времени

$(document).on('paste','#tesc', function() {
                 setTimeout(function() {
                        asd = strip_tags( $('#tesc').html(), '<b><b/><i></i>');

                        $('#tesc').html( asd );
                },100);

        });

function strip_tags (input, allowed) {
    /* http://kevin.vanzonneveld.net*/

    if ( input == undefined ) { return ''; }

    allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
    var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
        commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
    return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
        return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
    });
}