A directory of browser-based WYSIWYG editors


Home: htmlArea 3 (beta): htmlArea 2 & 3 archive (read only): htmlArea v3.0 - Add-Ons:
Insert internal link

The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.


New User

Aug 26, 2004, 5:45 AM

Post #1 of 2 (7296 views)
Insert internal link Can't Post

Hi all,

I'm looking for a way to insert internal links. Apparently this is a frequently asked question but I can't seem to find an answer. There are a couple of threads about this topic but I can't find real answers. Here's a a more precise description of the functionality I would like to add.

I want to add a button which opens a popup window. This window contains a pulldown, filled with records selected from a database. After the user has selected an option, the internal link is inserted automatically (e.g. <a href="?pg=foo">bar</a>). I already know how to create a pulldown et cetera, so that doesn't have to be explained.

Has someone created this kind of functionality before? Or could someone help me out to build this? It would really be a great addition to HTMLArea I think.

Hopefully someone has an example for me or some useful information.

Thanks in advance.


Maarten Wierda


Aug 27, 2004, 4:19 AM

Post #2 of 2 (7252 views)
Re: [maarten_OA] Insert internal link [In reply to] Can't Post

I'll give you some hints, since mine is on a lotus domino platform so I can't sent you a working example since you'ld need a domino server.

Start creating your own function to open this popup (the code in red it the link to your html page containing the links):

HTMLArea.prototype._createDocLink = function(link) {
var editor = this;
var outparam = null;
if (typeof link == "undefined") {
link = this.getParentElement();
if (link && !/^a$/i.test(link.tagName))
link = null;
if (link) outparam = {
f_href : HTMLArea.is_ie ? editor.stripBaseURL(link.href) : link.getAttribute("href"),
f_title : link.title,
f_target :
this._popupDialog("../Link?openview&count=10", function(param) {
if (!param)
return false;
var a = link;
if (!a) {
editor._doc.execCommand("createlink", false, param.f_href);
a = editor.getParentElement();
var sel = editor._getSelection();
var range = editor._createRange(sel);
if (!HTMLArea.is_ie) {
a = range.startContainer;
if (!/^a$/i.test(a.tagName))
a = a.nextSibling;
} else a.href = param.f_href.trim();
if (!/^a$/i.test(a.tagName))
return false; = param.f_target.trim();
a.title = param.f_title.trim();
}, outparam);

Then Create the page that is referenced in red. It should contain the following code:

<script type="text/javascript" src="/path/popups/popup.js"></script>

<style type="text/css">

html, body {

background: ButtonFace;

color: ButtonText;

font: 11px Tahoma,Verdana,sans-serif;

margin: 0px;

padding: 0px;


body { padding: 5px; }

table {

font: 11px Tahoma,Verdana,sans-serif;


select, input, button { font: 11px Tahoma,Verdana,sans-serif; }

button { width: 70px; }

table .label { text-align: right; width: 8em; }

.title { background: #ddf; color: #000; font-weight: bold; font-size: 120%; padding: 3px 10px; margin-bottom: 10px;

border-bottom: 1px solid black; letter-spacing: 2px;


#buttons {

margin-top: 1em; border-top: 1px solid #999;

padding: 2px; text-align: right;



<div class="title">Insert/Modify DocLink</div>

Here comes the list with your records using some sort of format like this: <a href="JavaScript:doChooseLink('text', 'url');">text</a><br />

<table border="0" style="width: 100%;">


<td class="label">URL:</td>

<td><input type="text" id="f_href" style="width: 100%" /></td>



<td class="label">Title (tooltip):</td>

<td><input type="text" id="f_title" style="width: 100%" /></td>



<td class="label">Target:</td>

<td><select id="f_target">

<option value="">None (use implicit)</option>

<option value="_blank">New window (_blank)</option>

<option value="_self">Same frame (_self)</option>

<option value="_top">Top frame (_top)</option>


<input type="text" name="f_other_target" id="f_other_target" size="10" style="visibility: hidden" />




<div id="buttons">

<button type="button" name="pastelink" onclick="return onPaste();">Paste Link</button>

<button type="button" name="ok" onclick="return onOK();">OK</button>

<button type="button" name="cancel" onclick="return onCancel();">Cancel</button>


This should be the Javascript header for the page:

window.resizeTo(400, 400);
I18N = window.opener.HTMLArea.I18N.dialogs;
function i18n(str) {
return (I18N[str] || str);

function onTargetChanged() {
var f = document.getElementById("f_other_target");
if (this.value == "_other") { = "visible";;
} else = "hidden";

function Init() {
var param = window.dialogArguments;
var target_select = document.getElementById("f_target");
if (param) {
document.getElementById("f_href").value = param["f_href"];
document.getElementById("f_title").value = param["f_title"];
comboSelectValue(target_select, param["f_target"]);
if (target_select.value != param.f_target) {
var opt = document.createElement("option");
opt.value = param.f_target;
opt.innerHTML = opt.value;
opt.selected = true;
var opt = document.createElement("option");
opt.value = "_other";
opt.innerHTML = i18n("Other");
target_select.onchange = onTargetChanged;

function doChooseLink(title, unid){
document.getElementById("f_href").value = unid;
document.getElementById("f_title").value = title;

function onPaste() {
if (hs.value.indexOf("http://")<0) hs.value='';

function onOK() {
var required = {
"f_href": i18n("You must enter the URL where this link points to")
for (var i in required) {
var el = document.getElementById(i);
if (!el.value) {
return false;
// pass data back to the calling window
var fields = ["f_href", "f_title", "f_target" ];
var param = new Object();
for (var i in fields) {
var id = fields;
var el = document.getElementById(id);
param[id] = el.value;
if (param.f_target == "_other")
param.f_target = document.getElementById("f_other_target").value;
return false;

function onCancel() {
return false;

The onload event of my form contains init();

It works for me.

Good luck Wink


Search for (options)