Member Avatar for crazy.works

hello,

i have a small hard question , i really wish to find the answer soon here because iam look for that answer
for 3 days and i got no success ,

well , iam not a professional in the php programming but iam trying to be good as i can on it

so about the question , just iam trying to complete my second script programming , i want to make adding topics system
, i want to let the visitor be able to add any mount of pictures inside his topic between any words line he want
like the topics result on the vBulletin adding topics system

just like that form :-

words , words , words , words , words
words , words , words , words , words
picture
words , words , words , words , words
picture
words , words , words , words , words
words , words , words , words , words
picture
words , words , words , words , words


but i want to let the visitor be able to put any mount of words and pictures inside his topic , i think u got what i mean now

i wish to got the explain to make it from the professional programmers or just if any one have small topics system working like iam asking for
it will be great if he can share it for teach us and to let us know the way to make it and to being better .

thanks every body

  • 2 Contributors
  • 6 Replies
  • 124 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by crazy.works
Member Avatar for R0bb0b

are you talking about something like a wysiwyg editor?

Member Avatar for crazy.works

yes i want to know how can i put it in my script

Member Avatar for R0bb0b

I ran into this function somewhere on the internet, I forget where, and kind of modified it use a textarea element ID

//Insert tag into text area or box
function wrapTag(text1, text2, elementID)
{
	textarea = document.getElementById(elementID);
	if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
	{
		var caretPos = textarea.caretPos, temp_length = caretPos.text.length;

		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;

		if (temp_length == 0)
		{
			caretPos.moveStart("character", -text2.length);
			caretPos.moveEnd("character", -text2.length);
			caretPos.select();
		}
		else
			textarea.focus(caretPos);
	}
	// Mozilla text range wrap.
	else if (typeof(textarea.selectionStart) != "undefined")
	{
		var begin = textarea.value.substr(0, textarea.selectionStart);
		var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
		var end = textarea.value.substr(textarea.selectionEnd);
		var newCursorPos = textarea.selectionStart;
		var scrollPos = textarea.scrollTop;

		textarea.value = begin + text1 + selection + text2 + end;

		if (textarea.setSelectionRange)
		{
			if (selection.length == 0)
				textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
			else
				textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
			textarea.focus();
		}
		textarea.scrollTop = scrollPos;
	}
	// Just put them on the end, then.
	else
	{
		textarea.value += text1 + text2;
		textarea.focus(textarea.value.length - 1);
	}
}

send the beginning tag, ending tag, and the id that you want to modify

Member Avatar for crazy.works

thanks for the code but i tried to put textarea with the code but i didnt succeed because iam beginner in writing JavaScript

so please can u send the code again with textarea on it to understand what have i do

thanks again

Member Avatar for R0bb0b

Here is a very basic functionality. My opinion, if you intend to really do anything with this you have quite a learning curve ahead of you and probably should dive in head first.

<!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=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
//Insert tag into text area or box
function wrapTag(text1, text2, elementID)
{
	textarea = document.getElementById(elementID);
	if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
	{
		var caretPos = textarea.caretPos, temp_length = caretPos.text.length;

		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;

		if (temp_length == 0)
		{
			caretPos.moveStart("character", -text2.length);
			caretPos.moveEnd("character", -text2.length);
			caretPos.select();
		}
		else
			textarea.focus(caretPos);
	}
	// Mozilla text range wrap.
	else if (typeof(textarea.selectionStart) != "undefined")
	{
		var begin = textarea.value.substr(0, textarea.selectionStart);
		var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
		var end = textarea.value.substr(textarea.selectionEnd);
		var newCursorPos = textarea.selectionStart;
		var scrollPos = textarea.scrollTop;

		textarea.value = begin + text1 + selection + text2 + end;

		if (textarea.setSelectionRange)
		{
			if (selection.length == 0)
				textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
			else
				textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
			textarea.focus();
		}
		textarea.scrollTop = scrollPos;
	}
	// Just put them on the end, then.
	else
	{
		textarea.value += text1 + text2;
		textarea.focus(textarea.value.length - 1);
	}
}

function wrapLink(elementID)
{
	var lnkStart = '<a href="';
	var lnkText = prompt('Enter a url', 'http://');
	var lnkMid = '">';
	var lnkEnd = '</a>';
	
	if(lnkText != "http://" && lnkText != "")
	{
		wrapTag(lnkStart + lnkText + lnkMid, lnkEnd, elementID);
	}
}
</script>
</head>

<body>
<input type="button" name="btnBold" value="Bold" onclick="wrapTag('<b>', '</b>', 'txtTest');" />
<input type="button" name="btnBold" value="Hyperlink" onclick="wrapLink('txtTest');" />
<textarea name="txtTest" id="txtTest"></textarea>
</body>
</html>
Member Avatar for crazy.works

i will try it and thank you very much :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.