Tinymce modo de visualização muda após a inicialização

StackOverflow https://stackoverflow.com//questions/25054335

Pergunta

Meu editor é tinymce4+.Ele trabalha muito na maioria das peças.

Mas não importa o que eu faça, há algo que eu simplesmente não pode fazer. comutação de modo de edição instantaneamente.-

Eu tenho uma página que os usuários podem selecionar os dados e editar-lo e exibir o conteúdo.Os usuários clicam em um botão chamado " viewmode ", o outro flipside é o " modo de edição "

Eu consegui isso colocando dois DIVs em um mesmo recipiente, fazendo com que um deles invisível pela iniciar-olhar-configurações de usuários escolheu.Um DIV tem editor tinymce, a tag iframe, e outro tem apenas um monte de html valores que o editor está segurando.Mas o efeito colateral disso é que o conteúdo de estilo pode parecer diferente, dependendo de seus atributos de estilo.

Esta aplicação web que eu estou falando agora é um sistema existente que tenha o seu próprio CSSs.É tão complicada que uma vez que você começa a olhar para ele, você pode querer fugir.

Então, eu gostaria de evitar esse CSS discrepância fazendo editor dinamicamente comutável para ambas as maneiras.

O carregamento de vários tinymce objetos é a última coisa que eu preciso aqui.

Eu posso fazer o editor de desativar através da criação de um atributo - contenteditable = false - Mas, em seguida, a barra de ferramentas elementos se tornaram maus meninos aqui.porque eles continuam a trabalhar.Eu ocultar a barra de ferramentas para completar esta missão.

Mas você sabe, a minha cliente odiava e insistiu-me que o editor deve fornecer um botão de impressão na sua viewmode.Isso é frustrante.

Então, se você pudesse me dar uma idéia de como manipular os elementos da barra de ferramentas e, em seguida, eu acho que eu consigo resolver esse problema.

Se é muito difícil, anexando a impressão de ouvinte de evento para um elemento externo pode ser também a segunda melhor opção para mim.Porque a partir desse momento, eu apenas jogar a barra de ferramentas de distância e fazer um ícone imprimir na parte superior do editor e anexar o evento para ele.

Desculpe por escrever todo o texto simples.Mas como este não requer códigos, eu acho.Espero que algum tinymce guru parar e me ajudar.

Foi útil?

Solução

Finalmente, eu fiz o meu editor comutável.

O primeiro passo é esconder todos os elementos na barra de ferramentas de tinyMCE.

tinyMCE barras de ferramentas têm um específico de nome de classe para que eles são selecionáveis com jQuery o seletor de classe.Mas a seleção com o nome da classe só faz com que a obtenção de barras de ferramentas indesejadas, bem, então você tem que ter cuidado com isso.

FYI .eq() API pode ajudá-lo.

depois de se esconder de todos os elementos na barra de ferramentas, ( não ocultar a barra de ferramentas do caminho.) fazer isso.

tinymce.ui.Factory.create({
    type: 'button',
    cmd: 'mcePrint',
    icon: 'print',
    shortcut: 'Ctrl+P',
    class : 'temp'
}).renderTo(appendTarget);

Isso vai adicionar um elemento de botão para a barra de ferramentas.

Mas de certa forma não invocar o comando que eu definidos no cmd do valor.

Para montar este evento para o botão manualmente serão necessários.

tinymce.activeEditor.execCommand('mcePrint');

Até agora eu criei um custom-barra de ferramentas para exibir no modo editor.Agora é hora de congelar o edior do conteúdo real de campo.

É muito fácil depois de ficar iframe conteúdo jQuery objecto.

.contents() API deve ajudá-lo.

depois disso, você pode selecionar <BODY> elemento no seu lado, de forma que a última coisa que resta a fazer é dar "contenteditable=false' atributo e valor para a tag body.

Em seguida, o editor congela.

Indo de volta para o modo de edição também é muito fácil.Basta fazer o contrário.

Chamar esses eventos quando você clica sobre o seu próprio "switch" botão.Em seguida, você pode alternar o seu editor de vista de modo editar do modo ( e o oppsite forma bem ).

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top