Como faço para o blogger inserir tags <p> em vez de <br> ao usar o editor de rich text?


10

Não gosto de como quando estou usando o editor de rich text no Blogger e pressiono Enterpara inserir um em <br >vez de um <p>. Existe alguma maneira de mudar o comportamento? Ou pelo menos existe alguma maneira de inserir um <p>sem alternar para a guia HTML?

A propósito, estou usando o Blogger em rascunho . Eu tentei tanto o editor antigo quanto o novo; e usar em Press "Enter" for line breaksvez de Use <br /> tagsnão ajuda.

Eu também tentei desativar Convert Line breaks, que é descrito como:

Se Sim estiver selecionado, as devoluções individuais inseridas no Editor de postagem serão substituídas por <br />tags únicas no seu blog e as duas devoluções físicas serão substituídas por duas tags ( <br /><br />).


Uma solução feio, mas se você quiser se livrar de quebras de linha duplas você pode esconder o segundo <br/>com uma regra CSS como br+br {display: none}​em Tema > Editar HTML onde você vai encontrar um monte de estilos sob<head><b:skin><![CDATA[...
ccpizza

Respostas:


10

Esse comportamento não é configurável. O editor atual, o editor de rascunho e o editor "antigo" usam uma combinação de tags BR e DIV quando devem usar tags P.

É uma decisão incompreensível e totalmente errada. Ele explica muitos problemas com a renderização inconsistente de parágrafos no Blogger. Talvez ele funcione no IE, mas não funciona de maneira consistente em navegadores de kits da web, como Chrome e Safari.

Eu acho que o editor mais novo insere duas tags BR consecutivas, mas o mais antigo inseriu um único DIV e um único BR.

O Windows Live Writer da Microsoft faz as coisas corretamente, conforme mencionado acima. O MarsEdit para OS X é menos consistente, acho que se ele começar com uma postagem autorada pelo Blogger, ficará confuso.

Eu sinto sua dor.


Mas o Live Writer pode editar uma postagem existente? Já que muitas pessoas, inclusive eu, gostam de postar o artigo, ler e polir.
Gqqnbig

4

Acabei de descobrir que, se você publicar sua postagem no blog contendo tags p imediatamente, em vez de mudar para a guia HTML primeiro, as tags p permanecerão.

Exemplo:

<p>
Here is a body text<br />
that is wrapped in p-tags<br />
</p>
  1. Vá para a visualização HTML.
  2. Insira o código acima.
  3. Clique no botão Publicar.

Se você tentar ver o código na guia HTML, as tags p serão substituídas pelas tags div.



0

Bem, não há como configurá-lo com o Blogger.

Mas o que percebi é que isso pode ser feito com o jQuery.

Para fazer isso, você precisará ir para a área do modelo e clicar em "editar HTML". Faça uma pesquisa por /body. Logo acima disso, insira <script src="http://code.jquery.com/jquery-1.10.1.min.js">Em seguida insira <script></script>. O que você tem agora deve ser o seguinte:

some code
<script src='http://code.jquery.com/jquery-1.10.1.min.js'/>
<script>

This is where the jQuery calls will go.

</script>
&lt/body&gt;
some more code

As chamadas jQuery apropriadas podem ser encontradas nesta página, na qual elas fornecem um exemplo pedindo quase exatamente o que você deseja fazer. Este exemplo foi copiado abaixo (em http://api.jquery.com/contents/ )

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <br><br>
  Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat.
  <br><br>
  Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur.
</div>

Podemos empregar o .contents()método para ajudar a converter esse blob de texto em três parágrafos bem formados:

$( ".container" )
  .contents()
    .filter(function() {
      return this.nodeType === 3;
    })
      .wrap( "<p></p>" )
      .end()
    .filter( "br" )
    .remove();

Concedido, você precisará fazer algumas pequenas alterações acima para fazê-lo funcionar. Mas isso deixarei para você descobrir. :-)

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.