วิธีการวาง Tinymce ในข้อความธรรมดาโดยค่าเริ่มต้น


103

Googled มันหลายพันครั้งไม่มีใครให้คำแนะนำที่สมบูรณ์เกี่ยวกับวิธีการวาง Tinymce ในข้อความธรรมดาโดยค่าเริ่มต้นและตัดการจัดรูปแบบออกโดยไม่ต้องคลิกปุ่ม "วางเป็นข้อความ"

ความคิดใด ๆ เกี่ยวกับวิธีการนำไปใช้? หรือจะเปิดใช้งานปุ่ม "วางเป็นข้อความ" โดยอัตโนมัติได้อย่างไร

ขอบคุณ

คำตอบ:


59

แก้ไข:โซลูชันนี้ใช้สำหรับเวอร์ชัน 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: เช่น "function setPlainText (ed) {... "
drmonkeyninja

8
ใน Tinymce รุ่นหลัง ๆ มีการเพิ่มตัวเลือกบางอย่างเพื่อดูแลเรื่องนี้ paste_text_sticky_default: trueและpaste_text_sticky: trueในการกำหนดค่าของคุณควรทำเคล็ดลับ (ฉันใช้ 3.5.0.1)
Greg

@ er-v คำแนะนำใด ๆ เกี่ยวกับวิธีการคงสตริงที่จัดรูปแบบ tinyMCE โดยใช้แบบฟอร์ม: stackoverflow.com/questions/17247900/…
codeObserver

13
เพิ่งลองใช้.init({ plugins: ["paste"], paste_as_text: true })งานและใช้งานได้อย่างมีเสน่ห์กับ TinyMCE 4.1 โดยไม่ต้องใช้ฟังก์ชันเพิ่มเติม
Rémi Breton

149

สำหรับ tinyMCE 3X หรือ 4X มีการเปลี่ยนแปลงเล็กน้อย ตอนนี้คุณสามารถทำได้และมันก็ใช้ได้ดี

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

5
ใช่วิธีอื่นไม่ได้ผล แต่วิธีนี้ทำได้
ทิม

2
@Tim แนวทางที่แสดงในคำตอบของคำถามนี้คือ TinyMCE 3.x โดยเฉพาะ หากคุณใช้ TinyMCE 4 ขึ้นไปแนวทางในคำตอบนี้จะทำ
Leonardo Montenegro

มีปลั๊กอินหรือตัวเลือกสำหรับอะไรก็ได้ใน TinyMCE .. ไม่น่าแปลกใจเลยที่ดีที่สุด!
supersan

1
ขอบคุณสำหรับวิธีแก้ปัญหา แต่นี่หมายความว่าฉันต้องจำไว้ว่าต้องแก้ไขไฟล์กำหนดค่าทุกครั้งที่มีการอัปเดตปลั๊กอิน?
Mike

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
ฉันได้รับข้อผิดพลาดของจาวาสคริปต์ซึ่ง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
ตัวแก้ไขยังคงอนุญาตให้วางข้อความอื่นที่ไม่ใช่ข้อความธรรมดาได้เมื่อฉันใช้วิธีนี้
ทิม


1

ไม่ดีกว่าที่จะใช้:

var ed = tinyMCE.activeEditor;

แทน:

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

ฉันยอมรับฉันสามารถทำให้สคริปต์ของฉันทำงานโดยใช้ activeEditor แทน get ('elm1') ฉันยังโพสต์คำตอบของฉันรหัส + รหัสของคุณยอมรับว่าเป็นคำตอบและมันใช้งานได้ดี
GibboK

นี่เป็นความเห็นโดยตรงต่อเอ้อ-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 - ไม่มีคำตอบอื่นใดที่ใช้ได้ผลในกรณีของฉัน
Rolf Pedro Ernst

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 "
    // ...
})
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.