Cara membuat pasta tinymce dalam teks biasa secara default

103

Mencari di Google ribuan kali, Tidak ada yang memberikan solusi lengkap tentang bagaimana membuat Tinymce paste dalam teks biasa secara default dan menghapus format apapun tanpa mengklik tombol "paste sebagai teks".

Ada ide tentang bagaimana menerapkannya? atau bagaimana cara mengaktifkan tombol "tempel sebagai teks" secara otomatis?

Terima kasih

Ryan
sumber

Jawaban:

59

EDIT: solusi ini untuk versi 3.x, untuk versi 4.x baca jawaban dari @Paulo Neves

Masalahnya adalah plugin Tempel secara otomatis menyetel ulang tempelan teks biasa pada setiap tempel. Jadi yang perlu kita lakukan - mengaturnya kembali. Kode berikut akan membantu.

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

....
});

Definisi 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;
            });
        }
    }

Jadi sekarang akan selalu polos.

er-v
sumber
Saya pikir itu karena tidak ada plugin paste yang saya buat contoh yang berfungsi - lihat 92.248.232.12/tinymce/examples/simple.html tinyMCE.init ({... oninit: "setPlainText", plugins: "paste" .. ..});
er-v
5
Jawaban yang bagus, meskipun saya menemukan saya mendapatkan kesalahan JS yang berkaitan dengan definisi "ed". Ini mudah diperbaiki dengan hanya menghapus baris tinyMCE.get ("elm1") dan meletakkan ed sebagai parameter pertama dari metode setPlainText: misalnya "function setPlainText (ed) {...".
drmonkeyninja
8
Di versi tinymce yang lebih baru, beberapa opsi telah ditambahkan untuk menangani ini. paste_text_sticky_default: truedan paste_text_sticky: truedi konfigurasi Anda harus melakukan trik. (Saya menggunakan 3.5.0.1)
Greg
@ er-v ada saran tentang cara mempertahankan string berformat tinyMCE menggunakan formulir: stackoverflow.com/questions/17247900/…
codeObserver
13
Baru saja mencoba .init({ plugins: ["paste"], paste_as_text: true }), dan berfungsi seperti pesona dengan TinyMCE 4.1, tanpa memerlukan fungsi tambahan.
Rémi Breton
149

Untuk tinyMCE 3X atau 4X hal-hal telah sedikit berubah. sekarang Anda dapat melakukan ini dan berfungsi dengan baik.

tinymce.init({
    plugins: "paste",
    paste_as_text: true
});
Paulo Almeida
sumber
5
Ya, pendekatan lain tidak berhasil tetapi ini berhasil.
Tim
2
@Tim Pendekatan yang ditunjukkan dalam jawaban pertanyaan ini spesifik TinyMCE 3.x. Jika Anda menggunakan TinyMCE 4 atau lebih besar, pendekatan dalam jawaban ini sudah cukup.
Leonardo Montenegro
Ada plugin atau opsi untuk hampir semua hal di TinyMCE .. tidak heran ini adalah yang terbaik!
supersan
1
Terima kasih atas solusinya, tetapi ini sebenarnya berarti saya harus ingat untuk mengedit file konfigurasi setiap kali plugin diperbarui?
Mike
84

Saya telah memecahkan masalah ini dengan kode ini

tinyMCE.init({
...
plugins : "paste",
paste_text_sticky : true,
setup : function(ed) {
    ed.onInit.add(function(ed) {
      ed.pasteAsPlainText = true;
    });
  }
....
})
Dariusz Lyson
sumber
11
Untuk apa nilainya, saya pikir solusi Anda lebih baik daripada jawaban yang dipilih.
arikfr
@Dariusz Lyson, ada saran tentang cara mempertahankan string berformat tinyMCE menggunakan formulir? : stackoverflow.com/questions/17247900/…
codeObserver
9
Saya mendapatkan kesalahan javascript, yang onInitproperti dari edtidak ditentukan. Unable to get property 'add' of undefined or null reference
Tim
35

Baru saja menemukan yang ini sendiri dan menemukan bahwa pada TinyMCE 3.4.2 Anda dapat dengan mudah:

paste_text_sticky: true,
paste_text_sticky_default: true

... yang bagus.

stovroz
sumber
2
1 untuk opsi konfigurasi ini, jangan lupa untuk menambahkan plugin tempel ke array plugin!
Fredszaq
3
Editor masih mengizinkan menempelkan selain teks biasa ketika saya menggunakan pendekatan ini.
Tim
7

Saya pikir cara termudah adalah ini:

tinymce.init({
   ...
   paste_as_text: true,
   plugins: "paste",
   ...
});
saudara 28
sumber
1

Bukankah lebih baik menggunakan:

var ed = tinyMCE.activeEditor;

dari pada:

var ed = tinyMCE.get('elm1');
Asen Mitov
sumber
Saya setuju, saya dapat membuat skrip saya berfungsi menggunakan activeEditor alih-alih get ('elm1'), saya juga memposting dalam jawaban saya kode + kode Anda diterima sebagai jawaban dan berfungsi dengan baik
GibboK
Ini adalah komentar yang ditujukan untuk jawaban er-v . Ini tidak memberikan jawaban atas pertanyaan tersebut. Setelah memiliki reputasi yang memadai, Anda dapat mengomentari kiriman apa pun .
Semua Pekerja Penting
1

FYI, TinyMCE telah meningkatkan ini dengan menerapkannya sebagai opsi default di plugin tempel. Info lebih lanjut: http://www.tinymce.com/wiki.php/Plugin:paste

Namun, masih belum sempurna. Jadi berikut ini skrip yang juga menghapus semua 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', '');
            });

        },

Sumber: http://www.tinymce.com/forum/viewtopic.php?pid=60121#p60121

laarsk
sumber
1

Tanpa plugin: Dengarkan acara tempel, dapatkan data papan klip

Jika Anda tidak dapat menggunakan atau tidak ingin menggunakan plugin karena alasan apa pun, Anda dapat membuat fungsi callback "tempel sebagai teks biasa" sendiri seperti:

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);
        });
    }
});

Catatan: Ini dibuat untuk TinyMCE 3.5.x. Kompatibilitas dapat berbeda menurut versi.

gfullam.dll
sumber
1
Solusi luar biasa untuk 3.x - tidak ada balasan lain yang berfungsi dalam kasus saya
Rolf Pedro Ernst
1

jika Anda menggunakan file .yml, tambahkan plugin pastedanpaste_as_text: true

default:
  plugins:
    - paste
  paste_as_text: true
LifterCoder
sumber
-1

Saya tidak yakin ini mungkin, karena "tempel sebagai teks biasa" sebenarnya melakukan pembersihan pada teks sebelum menambahkannya ke jendela. Jika Anda hanya menempelkan data ke jendela, tidak ada operasi yang dapat dilakukan. (Kecuali jika Anda terhubung ke onChangeatau sesuatu), tetapi mereka mungkin akan memperbaiki kode yang telah ditempelkan dan dengan demikian, 'memperbaiki ganda'.

Mitch Dempsey
sumber
-1

Saya melakukan sebagai berikut:

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;
        });
    }
};

Lalu:

tinyMCE.init({
    // ...
    plugins: "paste",
    oninit: pastePlainText // Note, without "
    // ...
})
Helge
sumber