Як зробити пасту 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", плагіни: "вставити" .. ..});
er-v

5
Чудова відповідь, хоча я виявив, що я отримую помилки JS, що стосуються визначення "ed". Це було легко виправити, просто видаливши рядок tinyMCE.get ("elm1") і поставивши ed як перший параметр методу setPlainText: наприклад "функція setPlainText (ed) {...".
drmonkeyninja

8
У пізніших версіях tinymce були додані деякі варіанти, щоб подбати про це. paste_text_sticky_default: trueі paste_text_sticky: trueу вашому конфігурації слід зробити трюк. (Я використовую 3.5.0.1)
Грег

@ Ер-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 є плагін або варіант для майже нічого .. недарма це найкраще!
Суперсан

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 для цих параметрів конфігурації, не забудьте додати плагін пасти до масиву плагінів!
Фредзак

3
Редактор все ще дозволяє вставляти текст, відмінний від простого тексту, коли я використовую цей підхід.
Тім

7

Я думаю, що найпростішим було б це:

tinymce.init({
   ...
   paste_as_text: true,
   plugins: "paste",
   ...
});

1

Чи не краще використовувати:

var ed = tinyMCE.activeEditor;

замість:

var ed = tinyMCE.get('elm1');

Я погоджуюся, мені вдалося змусити роботу над сценарієм за допомогою ActiveEditor замість get ('elm1'), я також опублікував у своїй відповіді ваш код + код, прийнятий як відповідь, і він працює чудово
GibboK

Це зауваження направлено на ER-V відповідь . Це не дає відповіді на запитання. Коли у вас буде достатня репутація, ви зможете коментувати будь-яку публікацію .
Усі працівники найважливіші

1

FYI, 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

-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 "
    // ...
})
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.