Вопрос по contenteditable, excel, textedit, ms-word, textarea – Вставить как обычный текст Contenteditable div & textarea (word / excel…)

5

Я хотел бы вставить текст в contenteditable div, но реагировать как текстовое поле.
Обратите внимание, что я хочу сохранить форматирование так, как я бы вставил его в текстовую область (от word, excel ...).
Так.
1) Вставить текст в contenteditable div
2) Я получаю текст из буфера обмена
3) Я перенес свое значение из буфера обмена в текстовое поле, (не знаю как?)
4) Получите ценность от моей текстовой области и поместите это в мой contenteditable div

Какие-либо предложения?

Увидетьstackoverflow.com/questions/2176861/…. Tim Down
В некоторых браузерах это просто невозможно.paste Событие слишком поздно, чтобы перенаправить фокус. Tim Down
Проблема не в получении данных, я уже использовал его метод для получения данных из буфера обмена. Но используя данные из моего буфера обмена, чтобы "вставить" это в мою текстовую область, вот моя проблема Ziggiej
Вы можете сделать это, только сосредоточив текстовую область и разрешая браузеру вставить ее во время события вставки. Tim Down
Действительно, спасибо вам за это, в настоящее время я могу заставить его работать с событиями клавиатуры, глядя глубже, чтобы найти также как решение при вставке на событиях щелчка Ziggiej

Ваш Ответ

3   ответа
17

по стечению обстоятельств, последние 4 месяца я работал над поддержкой буфера обмена и связанными с ней вещами :) К сожалению, я не смогу полностью описать вам, как обрабатывается вставка, потому что рассказы о импл слишком хитры для меня даже после написания импл сам: D

Однако вот некоторые советы, которые могут вам помочь:

Don't write wysiwyg editor - use one that exists. It's going to consume all your time and still your editor will be buggy. We and guys from other... two main editors (guess why only three exist) are working on this for years and we still have full bugs lists ;).

If you really need to write your own editor check out http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/clipboard/plugin.js - it's the old impl, before I rewrote it, but it works everywhere where it's possible. The code is horrible... but it may help you.

You won't be possible to handle all browsers by just one event paste. To handle all ways of pasting we're using both - beforepaste and paste.

There's number (huge number :D) of browsers' quirks that you'll need to handle. I can't to describe you them, because even after few weeks I don't remember all of them. However, small excerpt from our docs may be useful for you:

Paste command (used by non-native paste - e.g. from our toolbar)

* fire 'paste' on editable ('beforepaste' for IE)
* !canceled && execCommand 'paste'
* !success && fire 'pasteDialog' on editor

Paste from native context menu & menubar

(Fx & Webkits are handled in 'paste' default listner.
Opera cannot be handled at all because it doesn't fire any events
Special treatment is needed for IE, for which is this part of doc)
* listen 'onpaste'
* cancel native event
* fire 'beforePaste' on editor
* !canceled && getClipboardDataByPastebin
* execIECommand( 'paste' ) -> this fires another 'paste' event, so cancel it
* fire 'paste' on editor
* !canceled && fire 'afterPaste' on editor

The rest of the trick - On IEs we listen for both paste events, on the rest only for paste. We need to prevent some events on IE, because since we're listening for both sometimes this may cause doubled handling. This is the trickiest part I guess.

Note that I want to keep the formatting as I would paste it in my textarea (from word, excel...).

Which parts of formatting do you want to keep? Textarea will keep only basic ones - blocks formatting.

See http://dev.ckeditor.com/browser/CKEditor/trunk/_source/plugins/wysiwygarea/plugin.js#L120 up to line 123 - this is the last part of the task - inserting content into selection.

@Привет ! Есть ли вероятность, что вы не можете кликнуть по ссылке, отображаемой в iframe? Но они работают при использовании правого клика - & gt; открыть в новом окне. Это было бы прекрасно. Кстати, ваш продукт великолепен!
1

Но все же мне нужно исправление для "не" события клавиатуры, при вставке с помощью мыши ... Текущее решение для клавиатуры & quot; вставка & quot; События:

$(document).ready(function() {
    bind_paste_textarea();      
});


function bind_paste_textarea(){
    var activeOnPaste = null;
    $("#mypastediv").keydown(function(e){
        var code = e.which || e.keyCode;
        if((code == 86)){
            activeOnPaste = $(this);
            $("#mytextarea").val("").focus();
        }
    });
    $("#mytextarea").keyup(function(){
        if(activeOnPaste != null){
            $(activeOnPaste).focus();
            activeOnPaste = null;
        }
    });
}

<h2>DIV</h2>
<div id="mypastediv" contenteditable="true" style="width: 400px; height: 400px; border: 1px solid orange;">

</div>
<h2>TEXTAREA</h2>
<textarea id="mytextarea" style="width: 400px; height: 400px; border: 1px solid red;"></textarea>
0

Ранги библиотека сохранить и восстановить выбранные.

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

HTML

<div><div id="editor"contenteditable="true" type="text"></div><div>

Javascript

var inputArea = $element.find('#editor');
var debounceInterval = 200;

function highlightExcessCharacters() {
    // Bookmark selection so we can restore it later
    var sel = rangy.getSelection();
    var savedSel = sel.saveCharacterRanges(editor);

    // Strip HTML
    // Prevent images etc being pasted into textbox
    inputArea.text(inputArea[0].innerText);

    // Restore the selection
    sel.restoreCharacterRanges(editor, savedSel);
}

// Event to handle checking of text changes
var handleEditorChangeEvent = (function () {

    var timer;

    // Function to run after timer passed
    function debouncer() {
        if (timer) {
            timer = null;
        }
        highlightExcessCharacters();
    }

    return function () {
        if (timer) {
            $timeout.cancel(timer);
        }
        // Pass the text area we want monitored for exess characters into debouncer here
        timer = $timeout(debouncer, debounceInterval);
    };
})();

function listen(target, eventName, listener) {
    if (target.addEventListener) {
        target.addEventListener(eventName, listener, false);
    } else if (target.attachEvent) {
        target.attachEvent("on" + eventName, listener);
    }
}

// Start up library which allows saving of text selections
// This is useful for when you are doing anything that might destroy the original selection
rangy.init();
var editor = inputArea[0];

// Set up debounced event handlers
var editEvents = ["input", "keydown", "keypress", "keyup", "cut", "copy", "paste"];
for (var i = 0, eventName; eventName = editEvents[i++];) {
    listen(editor, eventName, handleEditorChangeEvent);
}

Похожие вопросы