Как сделать вставку tinymce в виде обычного текста по умолчанию

103

Погуглил тысячи раз. Никто не дает полного решения, как заставить Tinymce вставить обычный текст по умолчанию и удалить любое форматирование без нажатия кнопки «вставить как текст».

Любые идеи о том, как это реализовать? или как включить кнопку "вставить как текст" автоматически?

Спасибо

Райан
источник

Ответы:

59

EDIT: это решение для версии 3.x, для версии 4.x прочтите ответ от @Paulo Neves

Проблема в том, что плагин Paste автоматически сбрасывает вставку простого текста при каждой вставке. Так что все, что нам нужно сделать - вернуть его обратно. Следующий код должен помочь.

tinyMCE.init({
...
oninit : "setPlainText",
plugins : "paste"

....
});

Определение setPlainText

 function setPlainText() {
        var ed = tinyMCE.get('elm1');

        ed.pasteAsPlainText = true;  

        //adding handlers crossbrowser
        if (tinymce.isOpera || /Firefox\/2/.test(navigator.userAgent)) {
            ed.onKeyDown.add(function (ed, e) {
                if (((tinymce.isMac ? e.metaKey : e.ctrlKey) && e.keyCode == 86) || (e.shiftKey && e.keyCode == 45))
                    ed.pasteAsPlainText = true;
            });
        } else {            
            ed.onPaste.addToTop(function (ed, e) {
                ed.pasteAsPlainText = true;
            });
        }
    }

Так что теперь всегда будет ясно.

эр-в
источник
Я думаю, это из-за отсутствия плагина вставки, который я создал рабочий пример - посмотрите 92.248.232.12/tinymce/examples/simple.html tinyMCE.init ({... oninit: "setPlainText", plugins: "paste" .. ..});
er-v
5
Отличный ответ, хотя я обнаружил, что получаю JS-ошибки, связанные с определением слова «ed». Это было просто исправить, просто удалив строку tinyMCE.get ("elm1") и поместив ed в качестве первого параметра метода setPlainText: например, "function setPlainText (ed) {...".
drmonkeyninja
8
В более поздних версиях tinymce для этого были добавлены некоторые опции. paste_text_sticky_default: trueи paste_text_sticky: trueв вашем конфиге должно сработать. (Я использую 3.5.0.1)
Грег
@ er-v любые предложения о том, как сохранить строку в формате tinyMCE с помощью формы: stackoverflow.com/questions/17247900/…
codeObserver
13
Только что попробовал .init({ plugins: ["paste"], paste_as_text: true }), и с TinyMCE 4.1 он отлично работает, без дополнительных функций.
Реми Бретон
149

Для tinyMCE 3X или 4X все немного изменилось. теперь вы можете это сделать, и все работает нормально.

tinymce.init({
    plugins: "paste",
    paste_as_text: true
});
Пауло Алмейда
источник
5
Да, другие подходы не сработали, но это работает.
Тим
2
@Tim Подход, показанный в ответе на этот вопрос, специфичен для TinyMCE 3.x. Если вы используете TinyMCE 4 или выше, подход в этом ответе подойдет.
Леонардо Монтенегро
В TinyMCE есть плагин или опция для чего угодно ... неудивительно, что это лучший вариант!
supersan
1
Спасибо за решение, но на самом деле это означает, что мне нужно не забывать редактировать файл конфигурации каждый раз, когда плагины обновляются?
Майк
84

Я решил эту проблему с помощью этого кода

tinyMCE.init({
...
plugins : "paste",
paste_text_sticky : true,
setup : function(ed) {
    ed.onInit.add(function(ed) {
      ed.pasteAsPlainText = true;
    });
  }
....
})
Дариуш Лайсон
источник
11
Как бы то ни было, я думаю, что ваше решение лучше, чем выбранный ответ.
arikfr
@Dariusz Lyson, есть ли предложения о том, как сохранить строку в формате tinyMCE с помощью формы? : stackoverflow.com/questions/17247900/…
codeObserver
9
Я получаю ошибку javascript, onInitсвойство edкоторой не определено. Unable to get property 'add' of undefined or null reference
Тим
35

Просто столкнулся с этим сам и обнаружил, что начиная с TinyMCE 3.4.2 вы можете просто:

paste_text_sticky: true,
paste_text_sticky_default: true

... что было хорошо.

стовроз
источник
2
+1 для этих параметров конфигурации, не забудьте добавить плагин вставки в массив плагинов!
Fredszaq
3
Когда я использую этот подход, редактор все еще позволяет вставлять текст, отличный от обычного.
Тим
7

Думаю, проще всего было бы так:

tinymce.init({
   ...
   paste_as_text: true,
   plugins: "paste",
   ...
});
братья28
источник
1

Не лучше ли использовать:

var ed = tinyMCE.activeEditor;

вместо того:

var ed = tinyMCE.get('elm1');
Асен Митов
источник
Я согласен, мне удалось заставить свой скрипт работать с помощью activeEditor вместо get ('elm1'), я также опубликовал в своем ответе ваш код + код, принятый в качестве ответа, и он отлично работает
GibboK
Это комментарий, направленный на ответ er-v . Это не дает ответа на вопрос. Когда у вас будет достаточная репутация, вы сможете комментировать любой пост .
Все рабочие важны
1

К вашему сведению, TinyMCE улучшил это, реализовав его как параметр по умолчанию в плагине вставки. Дополнительная информация: http://www.tinymce.com/wiki.php/Plugin:paste

Однако это все еще не идеально. Итак, вот сценарий, который также отключает весь HTML:

// Paste
        paste_auto_cleanup_on_paste : true,
        paste_remove_spans: true,
        paste_remove_styles: true,
        paste_retain_style_properties: false,

        paste_preprocess : function(pl, o) 
        {    // Replace <div> with <p>
            o.content = o.content.replace(/<div>/gi, "<p>");    
            o.content = o.content.replace(/<\/div>/gi, "</p>");
            o.content = o.content.replace(/<\r\n/gi, "\n");
            o.content = o.content.replace(/<\n\n/gi, "\n");
            o.content = o.content.replace(/<\n\n/gi, "\n");

            // Replace empty styles
            o.content = o.content.replace(/<style><\/style>/gi, "");    

            o.wordContent = true;            
        },

        paste_postprocess : function(pl, o) 
        {    //console.log(o.node.innerHTML);
            var ed = pl.editor, dom = ed.dom;

            // Remove all tags which are not <p> or <br>
            tinymce.each(dom.select('*', o.node), function(el) 
            {    if (el.tagName.toLowerCase() != "p" && el.tagName.toLowerCase() != "br") 
                {    dom.remove(el, 1); // 1 = KeepChildren
                    console.log(el.tagName);
                }
                dom.setAttrib(el, 'style', '');
            });

        },

Источник: http://www.tinymce.com/forum/viewtopic.php?pid=60121#p60121

Лаарск
источник
1

Без плагина: прослушивание события вставки, получение данных из буфера обмена

Если вы не можете или не хотите использовать подключаемый модуль по какой-либо причине, вы можете создать свою собственную функцию обратного вызова «вставить как обычный текст» следующим образом:

tinyMCE.init({

    // ...,

    setup: function (editor) {

        // Listen for paste event, add "Paste as plain text" callback
        editor.onPaste.add(function (editor, e) {

            // Prevent default paste behavior
            e.preventDefault();

            // Check for clipboard data in various places for cross-browser compatibility.
            // Get that data as text.
            var content = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');

            // Let TinyMCE do the heavy lifting for inserting that content into the editor.
            editor.execCommand('mceInsertContent', false, content);
        });
    }
});

Примечание: это было создано для TinyMCE 3.5.x. Совместимость зависит от версии.

гфуллам
источник
1
Отличное решение для 3.x - ни один из других ответов не работал в моем случае
Рольф Педро Эрнст
1

если вы используете файл .yml, добавьте плагин pasteиpaste_as_text: true

default:
  plugins:
    - paste
  paste_as_text: true
LifterCoder
источник
-1

Я не уверен, что это возможно, поскольку «вставить как открытый текст» на самом деле выполняет очистку текста перед добавлением его в окно. Если вы просто вставляете данные в окно, никакие операции выполнять нельзя. (Если вы не подключились onChangeили что-то в этом роде), но они могут в конечном итоге исправить код, который уже был вставлен, и, таким образом, «дважды исправить» его.

Митч Демпси
источник
-1

Я сделал следующее:

var pastePlainText = function() {
    // No need to pass in an ID, instead fetch the first tinyMCE instance
    var ed = tinyMCE.get(0); 
    ed.pasteAsPlainText = true;  

    //adding handlers crossbrowser
    if (tinymce.isOpera || /Firefox\/2/.test(navigator.userAgent)) {
        ed.onKeyDown.add(function (ed, e) {
            if (((tinymce.isMac ? e.metaKey : e.ctrlKey) && e.keyCode == 86) || (e.shiftKey && e.keyCode == 45))
                ed.pasteAsPlainText = true;
        });
    } else {            
        ed.onPaste.addToTop(function (ed, e) {
            ed.pasteAsPlainText = true;
        });
    }
};

А потом:

tinyMCE.init({
    // ...
    plugins: "paste",
    oninit: pastePlainText // Note, without "
    // ...
})
Helge
источник