Como fazer o tinymce colar em texto simples por padrão


103

Pesquisei no Google milhares de vezes. Ninguém oferece uma solução completa de como fazer o Tinymce colar em texto simples por padrão e remover qualquer formatação sem clicar no botão "colar como texto".

Alguma ideia de como implementar isso? ou como habilitar o botão "colar como texto" automaticamente?

Obrigado

Respostas:


59

EDIT: essa solução é para a versão 3.x, para a versão 4.x leia a resposta de @Paulo Neves

O problema é que o plugin Paste redefine automaticamente a colagem de texto simples em cada pasta. Então, tudo o que precisamos fazer - definir de volta. O código a seguir deve ajudar.

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

....
});

A definição de 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;
            });
        }
    }

Portanto, agora sempre ficará claro.


Eu acho que é por causa da ausência do plugin de colagem que criei um exemplo funcional - dê uma olhada 92.248.232.12/tinymce/examples/simple.html tinyMCE.init ({... oninit: "setPlainText", plugins: "paste" .. ..});
er-v

5
Ótima resposta, embora eu tenha descoberto que recebo erros de JS relacionados à definição de "ed". Isso foi simples de corrigir, apenas removendo a linha tinyMCE.get ("elm1") e colocando ed como o primeiro parâmetro do método setPlainText: por exemplo, "function setPlainText (ed) {...".
drmonkeyninja de

8
Em versões posteriores do tinymce, algumas opções foram adicionadas para cuidar disso. paste_text_sticky_default: truee paste_text_sticky: trueem sua configuração deve fazer o truque. (Estou usando o 3.5.0.1)
Greg

@ er-v alguma sugestão sobre como persistir a string de formato tinyMCE usando um formulário: stackoverflow.com/questions/17247900/…
codeObserver

13
Acabei de experimentar .init({ plugins: ["paste"], paste_as_text: true })e funciona perfeitamente com o TinyMCE 4.1, sem a necessidade de uma função adicional.
Rémi Breton

149

Para o tinyMCE 3X ou 4X as coisas mudaram um pouco. agora você pode fazer isso e funciona bem.

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

5
Sim, as outras abordagens não funcionaram, mas isso funciona.
Tim,

2
@Tim A abordagem mostrada na resposta a esta pergunta é específica do TinyMCE 3.x. Se você estiver usando o TinyMCE 4 ou maior, a abordagem nesta resposta servirá.
Leonardo Montenegro

Existe um plugin ou opção para praticamente qualquer coisa no TinyMCE ... não é à toa que é o melhor!
supersan

1
Obrigado pela solução, mas isso realmente significa que devo me lembrar de editar o arquivo de configuração sempre que os plug-ins forem atualizados?
Mike

84

Eu resolvi esse problema com este código

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

11
Pelo que vale a pena, acho que sua solução é melhor do que a resposta selecionada.
arikfr

@Dariusz Lyson, alguma sugestão sobre como persistir a string formatada pelo tinyMCE usando um formulário? : stackoverflow.com/questions/17247900/…
codeObserver

9
Recebo um erro de javascript, cuja onInitpropriedade de edé indefinida. Unable to get property 'add' of undefined or null reference
Tim,

35

Eu mesmo encontrei este e descobri que a partir do TinyMCE 3.4.2 você pode simplesmente:

paste_text_sticky: true,
paste_text_sticky_default: true

... o que foi bom.


2
1 para essas opções de configuração, não se esqueça de adicionar o plugin de colagem ao array de plugin!
Fredszaq de

3
O editor ainda está permitindo a colagem de texto diferente de texto simples quando uso essa abordagem.
Tim,

7

Acho que a maneira mais fácil seria esta:

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

1

Não é melhor usar:

var ed = tinyMCE.activeEditor;

ao invés de:

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

Concordo, consegui fazer meu script funcionar usando activeEditor em vez de get ('elm1'), também postei em minha resposta seu código + código aceito como resposta e está funcionando muito bem
GibboK

Este é um comentário direcionado à resposta de er-v . Isso não fornece uma resposta para a pergunta. Assim que tiver reputação suficiente, você poderá comentar em qualquer postagem .
Todos os trabalhadores são essenciais

1

Para sua informação, o TinyMCE melhorou isso implementando-o como uma opção padrão no plug-in de colagem. Mais informações: http://www.tinymce.com/wiki.php/Plugin:paste

No entanto, ainda não é perfeito. Então, aqui está um script que também desvia todo o 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', '');
            });

        },

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


1

Sem plug-in: Ouça para colar o evento, obtenha dados da área de transferência

Se você não pode usar ou não deseja usar um plug-in por qualquer motivo, você pode criar sua própria função de retorno de chamada "colar como texto simples" assim:

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

Nota: Isso foi criado para TinyMCE 3.5.x. A compatibilidade pode variar de acordo com a versão.


1
Excelente solução para 3.x - nenhuma das outras respostas funcionou no meu caso
Rolf Pedro Ernst

1

se você usar um arquivo .yml, adicione o plugin pasteepaste_as_text: true

default:
  plugins:
    - paste
  paste_as_text: true

-1

Não tenho certeza de que isso seja possível, pois "colar como texto simples" na verdade executa a limpeza do texto antes de adicioná-lo à janela. Se você apenas colar os dados na janela, nenhuma operação poderá ser realizada. (A menos que você tenha se conectado ao onChangeou algo assim), mas eles podem acabar consertando o código que já foi colado e, portanto, 'consertando-o duas vezes'.


-1

Eu fiz o seguinte:

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

E depois:

tinyMCE.init({
    // ...
    plugins: "paste",
    oninit: pastePlainText // Note, without "
    // ...
})
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.