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

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  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