I have created our own web-based editor that we use to create new entries on Wohill. Very briefly spoken it works in a way that you create the entry in a textarea with the help of buttons below it which gives you the possibility to add bold text, italic text, links, images, smileys etc to the content. I will not go too deep into it this time but instead only pick out one of the functionalities. More will come later on and hopefully a full review of the admin interface someday to give you a full understanding of how it works.
Today I will show you how you can do to create a HTML-link for a selected (or no selected) text easily by clicking a button and then specifying the url.
Here is a part of the html-code on the calling page containing a textarea and a button below it for creating a link in the textarea for selected or non-selected text:
<textarea cols="75" rows="25" id="tArea"></textarea>
<input title="Create link" type="button" value="A" onclick="formatTextLink(document.getElementById('tArea'))" /> |
As you can see a JavaScript function is called with the argument of the textarea object 'tArea'. In the code below, a modal window is used for Internet explorer. I have not found a similar solution for Firefox, so they are handled slightly different. For Internet explorer a new page is opened and the response from it is used to create the link and put it in the textarea at the right place. For Firefox the solution has to be a bit different as already said. In this function the new window is opened but the respons from it and creation of link and adding of link to the textarea is made in the popup window instead as you will see below.
The 'formatTextLink' function looks like this:
/* FUNCTION FOR ADDING AN A HREF TAG IN EDITOR */
function formatTextLink(el) {
/* IF INTERNET EXPLORER */
if (window.showModalDialog) {
var myText = window.showModalDialog('chooseLinkUrl.html',
'name',
'dialogWidth:530px;dialogHeight:180px');
var selectedText = document.selection.createRange().text;
if (selectedText != "") {
var newText = myText + selectedText + "</a>";
document.selection.createRange().text = newText;
}
else {
el.focus(el.caretPos);
el.caretPos = document.selection.createRange().duplicate();
if(el.caretPos.text.length == 0) {
el.caretPos.text = myText + "</a>";
}
}
}
/* IF MOZILLA */
else {
window.open('chooseLinkUrl.html',
'name',
'height=180,width=530,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,modal=yes');
}
} |
The HTML- and JavaScript code for the popup window 'chooseLinkUrl' looks like this:
<html>
<head>
<title>Specify link</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script language="javascript">
function returnSelected(val) {
var text = document.getElementById(val).value;
text = text.replace("&", "&");
var trgt = document.getElementById('trgt').value;
var tagText = "<a href=\"" + text + "\" target=\"" + trgt + "\">"
if (navigator.appName == "Microsoft Internet Explorer") {
// set return value
window.returnValue = tagText;
}
else {
window.opener.updateEditorAMozilla(tagText);
}
// close dialog
window.close();
}
</script>
</head>
<body>
<form>
<br />
<table>
<tr>
<td> </td><td><h2>Specify link:</h2></td>
</tr>
<tr>
<td width="60"><h3>Link:</h3></td>
<td><input type="text" value="http://" id="linkUrl" size="60" /></td>
<td><input type="button" value="Paste" onClick="returnSelected('linkUrl')"></td>
</tr>
<tr>
<td><h3>Open in:</h3></td>
<td colspan="2">
<select id="trgt">
<option value="_top">same window</option>
<option value="_blank">new window</option>
</select>
</td>
</tr>
</form>
</body>
</html> |
The function 'returnSelected' builds the first part of the link tag using the fields set by the user and returns it to the function that called it (function 'formatTextLink' above). The last part happens for Internet explorer. If the browser is Firefox another function is called that handles the part that build the final url and inserts it into the textarea. This function is (as you can see above) called 'updateEditorAMozilla' and looks like this:
/* FUNCTION CALLED FROM POPUP WINDOW TO SET AN A HREF TAG IN EDITOR WHEN USING MOZILLA */
function updateEditorAMozilla(fldVal) {
var tagBeginning = fldVal;
var tagEnding = "</a>";
var el = document.getElementById('tArea');
if (el.setSelectionRange) {
el.value = el.value.substring(0,el.selectionStart) + tagBeginning + el.value.substring(el.selectionStart,el.selectionEnd) + tagEnding + el.value.substring(el.selectionEnd,el.value.length)
}
el.focus();
} |
So this is it. It might feel like a lot of things to put together but it is only three different files. One html-file, one js-file and one popup-file. Add a comment if you have a question, a correction or other suggesions.
