Jump to content
cra2sh

[RESOLVIDO] Inserir tags negrito, itálico e sublinhado compatível com Firefox

Recommended Posts

cra2sh

Boas a todos, alguém me dá uma dica de como colocar este código compatível com o Firefox, de momento apenas testei em IE9 e funciona.

<html>
<head>
<script type="text/javascript" language="javascript">
function addTag(tag)
{
var textrange = document.selection.createRange();
var string = textrange.text;

document.form1.field1.focus();

textrange.text = "<" + tag + ">" + string + "</" + tag + ">";
}
</script>
</head>
<body>

<form name="form1"method="post">
<textarea style="width:300px; height:300px;" name="field1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</textarea><br>
<input type="button" onclick="javascript:addTag('b');" value="Bold">
<input type="button" onclick="javascript:addTag('i');" value="Italic">
<input type="button" onclick="javascript:addTag('u');" value="Underline">
</form>

</body>
</html>

Share this post


Link to post
Share on other sites
brunoais

Tens aqui um código que usei para um GMscript.

Adapta para o teu problema.

var begin = textarea.value.substr(0, textarea.selectionStart);
var end = textarea.value.substr(textarea.selectionEnd);
var scrollPos = textarea.scrollTop;

textarea.value = begin + text + end;

if (textarea.setSelectionRange)
{
textarea.focus();
textarea.setSelectionRange(begin.length + text.length, begin.length + text.length);
}
textarea.scrollTop = scrollPos;


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Share this post


Link to post
Share on other sites
cra2sh

Tens aqui um código que usei para um GMscript.

Adapta para o teu problema.

var begin = textarea.value.substr(0, textarea.selectionStart);
var end = textarea.value.substr(textarea.selectionEnd);
var scrollPos = textarea.scrollTop;

textarea.value = begin + text + end;

if (textarea.setSelectionRange)
{
textarea.focus();
textarea.setSelectionRange(begin.length + text.length, begin.length + text.length);
}
textarea.scrollTop = scrollPos;

Sim o código funciona, mas não estou a conseguiu definir a var text como sendo a minha selecção, o código esta a seleccionar tudo excepto a selecção :S

Share this post


Link to post
Share on other sites
cra2sh

Aqui está a solução para quem precisar, testado no Internet Explorer 9, Mozilla Firefox 4 e Google Chrome 10 com sucesso ^^

<html>
<head>
<script type="text/javascript" language="javascript">
function addTag(tag)
{
var selection = '';
var textarea = document.getElementById('field1');

// Internet Explorer
if (textarea.selectionStart === undefined)
{
	var textrange = document.selection.createRange();
	var selection = textrange.text;

	if (selection == '')
	{
		alert ('Sem texto seleccionado.');
	}

	else
	{
		textarea.focus();
		textrange .text = '<' + tag + '>' + selection + '</' + tag + '>';
	}
}

else
{
	if (textarea.selectionStart != textarea.selectionEnd)
	{
		selection = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);

		var selection_start = textarea.value.substring(0, textarea.selectionStart);
		var selection_end = textarea.value.substring(textarea.selectionEnd);
	}

	if (selection == '')
	{
		alert ('Sem texto seleccionado.');
	}

	else
	{
		textarea.value = selection_start + '<' + tag + '>' + selection + '</' + tag + '>' + selection_end;
	}
}

}
</script>
</head>
<body>
<textarea style="width:300px;height:300px;" id="field1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</textarea>
<br />
<input type="button" onclick="addTag('b');" value="Bold">
<input type="button" onclick="addTag('i');" value="Italic">
<input type="button" onclick="addTag('u');" value="Underline">
</body>
</html>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.