Programing

기본적으로 tinymce 붙여 넣기를 일반 텍스트로 만드는 방법

lottogame 2020. 8. 19. 22:29
반응형

기본적으로 tinymce 붙여 넣기를 일반 텍스트로 만드는 방법


수천 번 구글링을했지만 아무도 Tinymce가 기본적으로 일반 텍스트로 붙여넣고 "텍스트로 붙여 넣기"버튼을 클릭하지 않고 서식을 제거하는 방법에 대한 완전한 솔루션을 제공하지 않습니다.

그것을 구현하는 방법에 대한 아이디어가 있습니까? 또는 "텍스트로 붙여 넣기"버튼을 자동으로 활성화하는 방법은 무엇입니까?

감사합니다


편집 : 이 솔루션은 버전 3.x 용이며 4.x 버전의 경우 @Paulo Neves의 답변을 읽으십시오.

문제는 붙여 넣기 플러그인이 모든 붙여 넣기에서 일반 텍스트 붙여 넣기를 자동으로 재설정한다는 것입니다. 따라서 우리가해야 할 일은 다시 설정하는 것입니다. 다음 코드가 도움이 될 것입니다.

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

이제는 항상 평범 할 것입니다.


tinyMCE 3X 또는 4X의 경우 상황이 약간 변경되었습니다. 이제 이것을 할 수 있고 잘 작동합니다.

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

이 코드로이 문제를 해결했습니다.

tinyMCE.init({
...
plugins : "paste",
paste_text_sticky : true,
setup : function(ed) {
    ed.onInit.add(function(ed) {
      ed.pasteAsPlainText = true;
    });
  }
....
})

Just ran into this one myself and discovered that as of TinyMCE 3.4.2 you can simply:

paste_text_sticky: true,
paste_text_sticky_default: true

...which was nice.


I think the easiest way would be this:

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

Isn't it better to use:

var ed = tinyMCE.activeEditor;

instead of:

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

FYI, TinyMCE has improved this by implementing it as a default option in the paste plugin. More info: http://www.tinymce.com/wiki.php/Plugin:paste

However, it's still not perfect. So here is a script that also trips off all 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', '');
            });

        },

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


Without plug-in: Listen to paste event, get clipboard data

If you cannot use or do not want to use a plug-in for whatever reason, you can create your own "paste as plain text" callback function like so:

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

Note: This was created for TinyMCE 3.5.x. Compatibility may vary by version.


I'm not sure this is possible, since "paste as plaintext" actually performs cleanup on the text before it adds it to the window. If you just paste data into the window, no operations can be done. (Unless you hooked into the onChange or something), but they you might end up fixing code that had already been pasted and thus, 'double fixing' it.


I did as follows:

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

And then:

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

참고URL : https://stackoverflow.com/questions/2695731/how-to-make-tinymce-paste-in-plain-text-by-default

반응형