JCE / TinyMCE - Continua tentando corrigir HTML válido e inválido

9

De todos os editores de Joomla que usamos, o JCE melhor se adequou aos nossos propósitos e clientes. Mas existem alguns problemas com o editor que podem causar problemas quando codificamos algo, então é alternado para wysiwyg e o editor tenta 'consertar' nosso html perfeitamente válido.

Antes de você fazer perguntas - sim, nós o configuramos para permitir que todos os elementos que a JCE gosta restrinja e não, NÃO está configurado para validar / limpar o html. As únicas restrições que temos são para colar o conteúdo no editor.

Anexo A:

<a href="#"></a>

Isso desaparecerá no alternador do editor e vice-versa. Substituído por:

<p>&nbsp;</p>

Anexo B:

<a id="#nameofanchor"></a>

Muda para:

<p>&nbsp;</p>

Anexo C:

<div><a id="#nameofanchor"></a></div>

Muda para:

<div>&nbsp;</div>

Anexo D:

<a id="hello" class="link">Hello</a>

Muda para:

<p><a id="hello" class="link"></a>Hello</p>

Anexo E:

<a href="#">
<div>
<h2>Our Work</h2>
</div>
</a>

Muda para:

<p><a href="#"></a></p>
<div>
<h2><a href="#">Our Work</a></h2>
</div>
<p>&nbsp;</p>

Agora, queremos usar id em vez de nome para nossa âncora, porque é válido no HTML5, enquanto tecnicamente o nome não é. Além disso, em que universo id é uma atribuição inválida a um link?

Além disso, agora que é totalmente legítimo agrupar uma div com links, por que o JCE também os tira?

Está faltando apenas uma configuração? Alguém tem alguma idéia de como eu posso usar o editor para que possamos codificar conforme necessário no editor, mas nossos clientes não podem destruí-lo simplesmente salvando no wysiwyg?

Edit: Eu testei isso no chrome, firefox e safari. Não pense que tem algo a ver com o navegador.

Editar: testei isso com as configurações do contêiner. Contêiner de parágrafo e parágrafo em Enter e div Contêiner e div em enter causam isso. Os outros dois, Sem contêiner e Parágrafo ao entrar, Sem contêiner e quebra de linha ao entrar, não o causam. O problema é - eu preciso da primeira configuração! Por mais que fosse ótimo oferecer aos clientes o benefício da dúvida, eles simplesmente não podem confiar em seguir as instruções e adicionar formatação de parágrafo ao texto.

Confirmado: isso também acontece com o TinyMCE.

Então - sabemos o que causa isso - a configuração do Parágrafo contêiner - agora como contorná-lo enquanto mantemos essa configuração ativa?

jce editor tinymce Faye
fonte
11
Ainda bem que não sou só eu.
Craig
Após nossas discussões anteriores e a conclusão de que isso é proveniente do recurso de agrupamento de elementos JCE, não tenho certeza do que isso é realmente uma preocupação. Se você está confiando no seu cliente para poder adicionar trechos de html como os acima, alternando o estado do editor, por que não confia neles que eles envolverão seu conteúdo com as tags <p> apropriadas?
FFrewin
Nossos clientes não adicionam html. Nós escrevemos html, eles usam o lado do editor - assim que o editor é alternado, ele destrói nosso html perfeitamente válido.
Faye
De qualquer forma, se você conceder acesso de edição de uma página cheia de html ao cliente, de uma forma ou de outra, há uma grande chance de que o cliente possa destruir seu html. Que tal usar o Gerenciador de Modelos do JCE ou outras tags "macro" que farão o trabalho sujo de adicionar a marcação necessária?
FFrewin
joomlacontenteditor.net/component/zoo/item/template-manager-4
FFrewin

Respostas:

7

Eu uso o Editor JCE em todos os nossos sites, mas também começamos a instalar o Sourcerer by NoNumbers. Isso fornece um botão fácil INSERIR CÓDIGO para o editor JCE, que o protege de ser modificado.

http://www.nonumber.nl/extensions/sourcerer

YellowWebMonkey
fonte
OBRIGADO. Isso é perfeito, já temos um número não instalado em nossas coisas porque é fantástico, eu não sabia que tinha isso. Isto é perfeito.
Faye
11
Não deve haver necessidade de usar o Sourcerer para adicionar HTML.
BodgeIT
Aaaand ainda tenho que, ou JCE retira HTML perfeitamente válido.
Faye
2

Existem algumas configurações secretas para o JCE. Eu sei que a seguinte configuração deixa de &nbsp;ser adicionada a divs vazias, talvez usada para limpar flutuadores, o que causa problemas de altura da linha quando renderizados:

In the Editor Global Configuration, add:
remove_div_padding:1 
to Custom Configuration Variables.

Eu esperava que houvesse mais que possa controlar qualquer aspecto do editor.

BodgeIT
fonte
1

Eu acho que deve ser as configurações de tipografia em: Perfil -> Parâmetros do editor -> Tipografia . Tente definir o elemento Container e a tecla Enter como NoContainer & LineBreak em Enter para verificar se ainda há alguma alteração no seu html.

Lembre-se também de que a configuração de Validação HTML possui configurações para cada perfil do Editor e que o Joomla também fornece um filtro global na página de configuração global definida pelo grupo de usuários. Verifique se não há configurações para cada grupo de usuários.

FFrewin
fonte
Sim, eu estive em todos os perfis de editor, etc. Eu tenho tudo configurado corretamente, sem html. Alterar o contêiner pode resolvê-lo - mas causará outro problema, igualmente problemático. Se um cliente puder adicionar conteúdo de texto que não esteja envolvido em tags de parágrafo, a formatação do texto será diferente. Também não queremos isso. Vou testá-lo para ver se isso causa o mesmo problema com a âncora, mas, na medida em que as tags de parágrafo se adicionam, é uma espécie de par para o curso.
Faye
Sim, são as configurações do contêiner que fazem isso - mas, como eu disse, é um problema maior para nossos clientes não poderem colar e ter uma tag de parágrafo automática agrupar seu conteúdo.
Faye
Acho que isso está acontecendo porque seus exemplos de código contêm quebras de linha, que é uma espécie de "regra" para o JCE criar os parágrafos. Deve haver um critério para fazer isso. Seu cliente colará esses trechos de html no editor?
FFrewin
Nossos clientes não vão usar html, mas ainda codificamos com html por trás do que eles fazem. Criamos áreas para colar / digitar conteúdo direto. Além disso - se você quiser digitar html em uma linha, em vez de organizar como acima, tentei isso também. Eu recebo exatamente os mesmos resultados.
Faye
0

Esse comportamento não é exclusivo do JCE. O TinyMCE se comporta da mesma maneira. Esse comportamento pode não estar limitado ao TinyMCE, pode ser um comportamento do DOM do navegador.

A JCE realmente se preocupa em tentar manter algumas tags vazias, o método empregado é preencher um espaço.

https://github.com/widgetfactory/jce-editor/blob/master/editor/tiny_mce/plugins/cleanup/editor_plugin.js

Peter Wiseman
fonte
Não vou mentir, não tenho ideia do que isso significa. Você pode dividir um pouco mais? O que estou vendo nesse link? Como assim, almofada com espaço? Adicionar um espaço não separável aos exemplos de código acima não altera os resultados finais, eu testei isso completamente.
Faye
Troquei meu editor padrão para o TinMCE, o que vem pré-instalado com o Joomla, e testei o Anexo A. Ele também removeu as tags ao alternar entre as visualizações WYSIWYG e Source do editor. ou seja, esse comportamento não parece exclusivo do JCE. Por isso, estou pensando se isso não é exclusivo do TinyMCE e talvez o mesmo possa acontecer ao usar a capacidade dos navegadores para executar a edição no local. A referência de código JCE era a linha 129, em que um espaço sem quebra é usado entre as tags de início e fim. Isso funciona para mim no JCE e no TinyMCE. Estranho.
Peter Wiseman