Ir para conteúdo

POWERED BY:

Arquivado

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

Paulo Freitas Nobrega

Inserir texto dinâmicamente em textarea após o cursor

Recommended Posts

Seguinte pessoal estou desenvolvendo um editor web e gostaria de saber como posso estar inserindo de forma dinâmica elemento dentro da textarea depois do ponteiro, pois consigo inserir mas os mesmos vão sempre para o fim do texto. Encontrei um código na net mas se caso usar <enter> ele zua todo o texto:

 

Código da net, onde insere é um textarea:

<script>
var rng;
function posiciona(){ 
rng = document.body.createTextRange();
rng.moveToPoint(window.event.x, window.event.y);
}
function inserir(tag) {
if (rng) rng.text=""+tag+"";
document.form1.insere.focus();
}
</script>

Código que estou fazendo:

function addLink() {
var linked = $("#control2-input-link").val()
var titulo = $("#control2-input-titulo").val();	
var checks = "input[@name=editor-control2-target]";
var target;
	
$(checks).each(function(i) {
if($(this).is(":checked")) {
var checkValue = $(this).val();	
if(checkValue == 1) {
target = "target='_blank'";				
} else {
target = "";
}			
}
});	
	
var newLink = "<a href='" + linked + "' title='" + titulo + "' " + target + ">" + titulo + "</a>";
$("#editor").val($("#editor").val() + newLink);
}

já havia tentando com append mas o resultado era o mesmo:

$("#editor").append(newLink);

Alguém tem uma idéia como resolver por favor!!!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Paulo queria te ajudar com exemplos que você pudesse utilizar, mas jQuery não é a minha praia.

 

Trabalhar com textrange pode ser uma coisa muito dolorosa, já que IE e o Mozilla (e seus parceiros) implementaram padrões diferentes para fazer a mesma coisa.

 

Para o que você quer fazer, acho que deve seguir estas etapas:

 

1 - Obter o texto selecionado

2 - Substituir texto selecionado

3 - Mover cursor para o fim do texto que foi substituido.

 

Abaixo segue um exemplo:

http://www.cleigomes.net/powersource/Outpu...fl=agchaoca.ie3

Compartilhar este post


Link para o post
Compartilhar em outros sites

Para colocar tags eu havia feito uma função já, havia ficado:

 

function tags(tag) {
	var selectText = document.selection.createRange().text;

	if(selectText != "") {
		var expr = "<" + tag + ">";
	
		var formatTag = "<" + tag + ">" + selectText + "</" + tag + ">";
		document.selection.createRange().text = formatTag;			
	} else {
	}
}

Agora em relação a inserção de link's que está dificil, pois eu queria o seguinte:

 

1º O editor clica no link "inserir link";

2º Em seguida abre um painel onde contem os campos (title, link e um radio para escolha da target);

3º Depois de preencher os campos o editor clica em adicionar link e o link é inserido dentro da textarea após o cursor;

Eu já consegui fazer as duas primeiras parte e como disse quando o link é inserido na textarea ele vai para o final do texto. Já tentei fazer dessa forma, tp, o editor seleciona o texto que quer que vire um link e clica na opção adicionar link, dai o campo title ja aparece preenchico com o texto selecionado e ele preenche o campo link e escolhe a target. Só que quando mando substituir o texto selecionado pelo link não da certo. Aparentemente está parecendo que quando clico no adicionar link e abre o painel a seleção que havia na textarea desaparece e ai não é substituido o texto no final da ação... Não sei se fui muito claro...rsrs

 

O teste está em www.ilhasolteira.net/inet/admin-painel/layout.php

Compartilhar este post


Link para o post
Compartilhar em outros sites

Paulo,

Por favor, leia as regras dos forúm, em especial ao item 10.

 

Sobre sua questão, o problema é que quando o usuário clica no input text para informar o e-mail, a seleção naturalmente é retirada do campo de textarea.

 

Para resolver o seu problema, ao licar no botão que exibe a caixa de link, salve uma referencia ao textrange em uma variável e depois trabalhe com ela.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Como eu falei anteriormente, eu não costumo trabalhar com jQuery.

Mas você pode fazer assim:

 

No evento CLICK do botão que aciona a janela modal de propriedades de links, inclua a seguinte instrução:

 

window.atualRange = document.selection.createTextRange();

 

E na função que faz a substituição, substitua o document.selection.createTextRange por window.atualRange.

Entendeu?

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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