programing

기본적으로 일반 텍스트로 작은 모양의 붙여넣기를 만드는 방법

jooyons 2023. 8. 23. 21:46
반응형

기본적으로 일반 텍스트로 작은 모양의 붙여넣기를 만드는 방법

수천 번 검색했지만 아무도 "텍스트로 붙여넣기" 단추를 클릭하지 않고 기본적으로 Tinymce를 일반 텍스트로 붙여넣고 서식을 제거하는 방법에 대한 완벽한 솔루션을 제공하지 않습니다.

그것을 어떻게 구현할 것인지에 대한 아이디어가 있습니까?또는 "텍스트로 표시" 단추를 자동으로 활성화하는 방법은 무엇입니까?

감사해요.

소형 MCE 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;
    });
  }
....
})

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

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

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 3.4.2를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

paste_text_sticky: true,
paste_text_sticky_default: true

...좋았어요.

가장 쉬운 방법은 다음과 같습니다.

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

다음을 사용하는 것이 더 좋지 않습니까?

var ed = tinyMCE.activeEditor;

다음 대신:

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

참고로 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

플러그인 사용 안 함: 이벤트 붙여넣기 듣기, 클립보드 데이터 가져오기

플러그인을 사용할 수 없거나 사용하지 않으려는 경우 다음과 같이 "일반 텍스트로 붙여넣기" 콜백 기능을 만들 수 있습니다.

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용으로 제작되었습니다. 호환성은 버전에 따라 다를 수 있습니다.

.yml 파일을 사용하는 경우 플러그인을 추가합니다.paste그리고.paste_as_text: true

default:
  plugins:
    - paste
  paste_as_text: true

일반 텍스트로 붙여넣기는 실제로 텍스트를 창에 추가하기 전에 텍스트에 대한 정리를 수행하기 때문에 이것이 가능한지 잘 모르겠습니다.데이터를 창에 붙여넣기만 하면 작업을 수행할 수 없습니다.onChange또는 무엇인가), 그러나 이미 붙여넣은 코드를 수정하여 '이중 수정'할 수도 있습니다.

다음과 같이 했습니다.

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 "
    // ...
})

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

반응형