Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Leandro Vieira Pinho

designMode fornecido pelo Mozila não funfa

Por , em Javascript

Recommended Posts

Leandro Vieira Pinho    0

Leandro Vieira Pinho
Postado

Peguei este código no site da Mozila:

 

function StartDesignMode() {  document.getElementById("editor_texto").contentWindow.document.designMode = "on";  try {    document.getElementById("editor_texto").contentWindow.document.execCommand("undo", false, null);  }  catch (e) {    alert("This demo is not supported on your level of Mozilla.");  }}
estou aplicando assim:

 

<body onload="StartDesignMode();">

 

para afetar esta textarea:

 

<textarea name="editor_texto" id="editor_texto" cols="70" rows="18"></textarea>

 

Mas não funfa, nem no FF nem no IE.

 

Alguma dica?

 

PS. Este é o erro informado pelo javascript Console do FF:

 

Error: document.getElementById("editor_texto").contentWindow has no properties

Source File: http://localhost/estudos/javascript/editor_html.htm

Line: 71

linha 71 = document.getElementById("editor_texto").contentWindow.document.designMode = "on";

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crystian    0

Crystian
Postado

pra ti pegar o valor é só utilizarparent.iframeName.contentDocument // FFparent.iframeName.document // IE(ca)Pra ti aplicar as tags é da mesma forma.... como se você tivesse trabalhando com um documento normal. Agora não me lembro bem ao certo, mas acho q dá pra trabalhar com o innerHTML pra pegar e atribuir os valores... Dá uma olhada nisso, se não conseguir posta ae...Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leandro Vieira Pinho    0

Leandro Vieira Pinho
Postado

(Rapadura é doce, mas, num é mole não.)

 

Bom consegue a aplicar o HTML somente no IE, assim:

 

...    if (document.selection) { // Detecta os browsers que suportam o selection.createRange() como o Internet Explorer        	var texto_selecionado = parent.editor_texto.document.selection.createRange().text; // Variável que armazena o texto selecionado	var novo_texto_selecionado = parent.editor_texto.document.selection.createRange();	novo_texto_selecionado.text = tag_open + texto_selecionado + tag_close;...

Um detalhe: o DesignMode do iframe está editável e ao invés de aparecer o texto em negrito por exemplo, aparece o html como na textarea menos, assim: <strong>leandro</strong>

 

No FF não consegui aplicar, tenho esse erro:

 

Error: richtext.value has no properties

linha 27

 

linha 27 = var texto_selecionado = richtext.value.substring(0, inicio_texto)+tag_open;

 

a variável richtext é esta: var richtext = document.getElementById('editor_texto').contentWindow

 

Outra detalhe, tentei também com: contentDocument.

 

?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leandro Vieira Pinho    0

Leandro Vieira Pinho
Postado

Beleza Crystian.

 

Aqui está:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Editor HTML</title><script type="text/javascript">function InsertTagHTML(tag_open,tag_close) { // Função para inserir tag HTML no texto selecionado          var richtext = document.getElementById('editor_texto').contentDocument; //document.forms[0].editor_texto; // Detecta o primeiro form na página e a textara (editor_texto) nela    var texto_original = richtext.value; // Variável que armazena o texto original    if (document.selection) { // Detecta os browsers que suportam o selection.createRange() como o Internet Explorer        	var texto_selecionado = parent.editor_texto.document.selection.createRange().text; // Variável que armazena o texto selecionado	var novo_texto_selecionado = parent.editor_texto.document.selection.createRange();	novo_texto_selecionado.text = tag_open + texto_selecionado + tag_close;        } else {// Fechando a verificação do document.selecion    // Detecta os browsers que NÃO suportam o selection.createRange() como o Firefox            // Variáveis que pegam o texto selecionado        // Pega o início do texto        var inicio_texto = richtext.selectionStart;        // Pega o termínio do texto        var termino_texto = richtext.selectionEnd;	// Configurando o texto selecionado e atribuindo a tag a ele        var texto_selecionado = richtext.value.substring(0, inicio_texto)+tag_open;        texto_selecionado += richtext.value.substring(inicio_texto, termino_texto)+tag_close;        texto_selecionado += richtext.value.substring(termino_texto);        document.forms[0].editor_texto.value = texto_selecionado; // Adiciona o texto selecionado.     } // Fechando do else do document.selecion}function InsereEditorHTML(nome,html,width,height,readOnly) {	document.write('<pre>');	document.writeln('<div id="editor_html">');	document.writeln('<a href="javascript:InsertTagHTML(\'<strong>\',\'</strong>\')">Strong</a>');	document.writeln('<iframe id="' + nome + '" name="' + nome + '" width="' + width + 'px" height="' + height + 'px"></iframe>');	document.writeln('</div>');	document.write('</pre>');	StartDesignMode(nome);}function StartDesignMode(nome) {  document.getElementById(nome).contentWindow.document.designMode = "on";  try {    document.getElementById(nome).contentWindow.document.execCommand("undo", false, null);  }  catch (e) {    alert("This demo is not supported on your level of Mozilla.");  }}function SubmitForm() {/* teste para pegar o valor */	if(document.all) {  var x = parent.editor_texto.document.body.innerHTML;	} else {  var x = parent.editor_texto.contentWindow.document.body.innerHTML;	}/*parent.iframeName.contentDocument // FFparent.iframeName.document // IE(ca)*/	alert("" + x + "");}</script></head><body><h1>Editor HTML</h1><form id="frm_editor" name="frm_editor" method="post" action="#" onsubmit="return SubmitForm(this);"><script type="text/javascript">	InsereEditorHTML('editor_texto','<p>Escreva asssim, dentro de tags</p>',700,300,false);</script><p>	<input type="submit" name="submit" value="Enviar" /></p></form>

Valeu cara.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crystian    0

Crystian
Postado

Leandro desculpa a demora...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Editor HTML</title><script type="text/javascript">function InsertTagHTML(tag_open,tag_close) { // Função para inserir tag HTML no texto selecionado      var richtext = "";  if (navigator.appName.indexOf("Netscape") != -1) richtext = document.getElementById('editor_texto').contentDocument;  else richtext = document.getElementById('editor_texto').document;  var texto_original = richtext.body.innerHTML;  if (document.selection) {        var texto_selecionado = richtext.selection.createRange().text; // Variável que armazena o texto selecionado        var novo_texto_selecionado = richtext.selection.createRange();        novo_texto_selecionado.text = tag_open + texto_selecionado + tag_close;  } else {      var obj = richtext.body.innerHTML;      alert(obj);      var inicio_texto = obj.selectionStart;      var termino_texto = obj.selectionEnd;      alert(inicio_texto+" - "+termino_texto);      var texto_selecionado = richtext.body.innerHTML.substring(0, inicio_texto)+tag_open;      texto_selecionado += richtext.body.innerHTML.substring(inicio_texto, termino_texto)+tag_close;      texto_selecionado += richtext.body.innerHTML.substring(termino_texto);      richtext.body.innerHTML = texto_selecionado; // Adiciona o texto selecionado.    }}function InsereEditorHTML(nome,html,width,height,readOnly) {document.write('<pre>');document.writeln('<div id="editor_html">');document.writeln('<a href="java script:InsertTagHTML(\'<strong>\',\'</strong>\')">Strong</a>');document.writeln('<iframe id="' + nome + '" name="' + nome + '" width="' + width + 'px" height="' + height + 'px"></iframe>');document.writeln('</div>');document.write('</pre>');StartDesignMode(nome);}function StartDesignMode(nome) { document.getElementById(nome).contentDocument.designMode = "on"; /*document.getElementById(nome).contentWindow.document.designMode = "on"; try {  document.getElementById(nome).contentWindow.document.execCommand("undo", false, null); }  catch (e) {  alert("This demo is not supported on your level of Mozilla."); }*/}function SubmitForm() {/* teste para pegar o valor */if(document.all) { var x = parent.editor_texto.document.body.innerHTML;} else { var x = parent.editor_texto.contentWindow.document.body.innerHTML;}/*parent.iframeName.contentDocument // FFparent.iframeName.document // IE(ca)*/alert("" + x + "");}</script></head><body><h1>Editor HTML</h1><form id="frm_editor" name="frm_editor" method="post" action="#" onsubmit="return SubmitForm(this);"><script type="text/javascript">InsereEditorHTML('editor_texto','<p>Escreva asssim, dentro de tags</p>',700,300,false);</script><p><input type="submit" name="submit" value="Enviar" /></p></form>

Seguinte, comecei a mexer no teu código e quiz fazer as coisas com pressa e isso não dá certo, pq eu tô meio sem tempo. Esta forma que fiz funciona pra você editar o iframe no mozilla, mas tah dando um problema com as propriedades selectionEnd e selectionStart, eu até deixei os alerts(). Dá uma olhada e vê o que tu consegue, realmente tô sem tempo, se não eu fazia pra ti...Qualquer coisa posta ae...Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito