Home: htmlArea 2: htmlArea 2 & 3 archive (read only): htmlArea v2.0 - Add-Ons:
emoticon popup



remac
New User

Jan 29, 2005, 2:51 PM


Views: 44604
emoticon popup

I have finally figured out how to implement a popup screen that allows the user to select from some emoticons (smileys) and insert them into the htmlarea, so I figured I'd share the wealth. Check it out at my test page, http://www.gympost.com/wysiwyg.html. Enjoy!

1. Put the following under the "editor_action" function in editor.js:

// insert emoticon
else if (cmdID.toLowerCase() == 'insertemoticon'){
showModalDialog(_editor_url + "popups/insert_emoticon.html", editdoc, "resizable: no; help: no; status: no; scroll: no; ");


2. Add the following to "this.btnList" in editor.js:

"insertemoticon": ['InsertEmoticon', 'Insert Emoticon', 'editor_action(this.id)', 'ed_emoticon.gif'],

3. Add 'InsertImage' to "this.toolbar" in editor.js.

4. Create an image (e.g. a smiley) for the emoticon button in the toolbar, place it in the "images" directory, and call it "ed_emoticon.gif".

5. Upload some emoticons to your server and reference them as shown in the code below.

6. Create a file under the directory "popups" called "insert_emoticon.html" with the following code based on insert_image.html:

<!-- based on insimage.dlg -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD W3 HTML 3.2//EN">
<HTML id=dlgImage STYLE="width: 150px; height: 185px; ">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="MSThemeCompatible" content="Yes">
<TITLE>Insert Image</TITLE>


<style type="text/css">
html, body, button, div, input, select, fieldset { font-family: MS Shell Dlg; font-size: 8pt; position: absolute; };
.btn { width: 22px; height: 22px; margin: 0; padding: 0; border:0px; background-color: threedface}
.btnOver { width: 22px; height: 22px; border: 1px solid #333333; background-color: threedface}
.btnDown { width: 22px; height: 22px; border:0px; background-color: threedface}
.btnNA { width: 22px; height: 22px; border: 0px solid #FFFFFF; filter: alpha(opacity=25); background-color: threedface}
.cMenu { background-color: threedface; color: menutext; cursor: Default; font-family: MS Sans Serif; font-size: 8pt; padding: 2 12 2 16}
.cMenuOver { background-color: threedface; color: highlighttext; cursor: Default; font-family: MS Sans Serif; font-size: 8pt; padding: 2 12 2 16}
.cMenuDivOuter { background-color: threedface; height: 9}
.cMenuDivInner { margin: 0 4 0 4; border-width: 1; border-style: solid; border-color: threedshadow threedhighlight threedhighlight threedshadow; background-color: threedface}
</style>


<SCRIPT defer>

function _CloseOnEsc() {
if (event.keyCode == 27) { window.close(); return; }
}


function _getTextRange(elm) {
var r = elm.parentTextEdit.createTextRange();
r.moveToElementText(elm);
return r;
}


window.onerror = HandleError

function HandleError(message, url, line) {
var str = "An error has occurred in this dialog." + "\n\n"
+ "Error: " + line + "\n" + message;
alert(str);
window.close();
return true;
}


function Init() {
var elmSelectedImage;
var htmlSelectionControl = "Control";
var globalDoc = window.dialogArguments;
var grngMaster = globalDoc.selection.createRange();

// event handlers
document.body.onkeypress = _CloseOnEsc;
// btnOK.onclick = new Function("btnClick()");


txtFileName.fImageLoaded = false;
txtFileName.intImageWidth = 0;
txtFileName.intImageHeight = 0;


if (globalDoc.selection.type == htmlSelectionControl) {
if (grngMaster.length == 1) {
elmSelectedImage = grngMaster.item(0);
if (elmSelectedImage.tagName == "IMG") {
txtFileName.fImageLoaded = true;
if (elmSelectedImage.src) {
txtFileName.value = elmSelectedImage.src.replace(/^[^*]*(\*\*\*)/, "$1"); // fix placeholder src values that editor converted to abs paths
txtFileName.intImageHeight = elmSelectedImage.height;
txtFileName.intImageWidth = elmSelectedImage.width;
txtVertical.value = elmSelectedImage.vspace;
txtHorizontal.value = elmSelectedImage.hspace;
txtBorder.value = elmSelectedImage.border;
txtAltText.value = elmSelectedImage.alt;
selAlignment.value = elmSelectedImage.align;
}
}
}
}
}


function _isValidNumber(txtBox) {
var val = parseInt(txtBox);
if (isNaN(val) || val < 0 || val > 999) { return false; }
return true;
}


function btnClick(btn) {
var elmImage;
var intAlignment;
var htmlSelectionControl = "Control";
var globalDoc = window.dialogArguments;
var grngMaster = globalDoc.selection.createRange();
var source = document.getElementById(btn).value;


//trim URL to image from button value
txtFileName.value = source.match(/http.*\.gif/);

// delete selected content and replace with image
if (globalDoc.selection.type == htmlSelectionControl && !txtFileName.fImageLoaded) {
grngMaster.execCommand('Delete');
grngMaster = globalDoc.selection.createRange();
}

idstr = "\" id=\"556e697175657e537472696e67"; // new image creation ID
if (!txtFileName.fImageLoaded) {
grngMaster.execCommand("InsertImage", false, idstr);
elmImage = globalDoc.all['556e697175657e537472696e67'];
elmImage.removeAttribute("id");
elmImage.removeAttribute("src");
grngMaster.moveStart("character", -1);
} else {
elmImage = grngMaster.item(0);
if (elmImage.src != txtFileName.value) {
grngMaster.execCommand('Delete');
grngMaster = globalDoc.selection.createRange();
grngMaster.execCommand("InsertImage", false, idstr);
elmImage = globalDoc.all['556e697175657e537472696e67'];
elmImage.removeAttribute("id");
elmImage.removeAttribute("src");
grngMaster.moveStart("character", -1);
txtFileName.fImageLoaded = false;
}
grngMaster = _getTextRange(elmImage);
}


if (txtFileName.fImageLoaded) {
elmImage.style.width = txtFileName.intImageWidth;
elmImage.style.height = txtFileName.intImageHeight;
}


elmImage.src = txtFileName.value;
elmImage.hspace = 1;
elmImage.vspace = 0;
elmImage.alt = "";
elmImage.border = 0;
elmImage.align = "middle";
grngMaster.collapse(false);
grngMaster.select();
window.close();
}
</SCRIPT>


</HEAD>
<BODY id=bdy onload="Init(); document.getElementById('btnCancel').focus();" style="background: threedface; color: windowtext;" scroll=no>


<INPUT ID=txtFileName type=hidden>

<BUTTON ID=btn1 style="top:10px; left:10px; width:30px; height:30px" class="btn" onmouseover="if(this.className=='btn'){this.className='btnOver'}" onmouseout="if(this.className=='btnOver'){this.className='btn'}" unselectable="on" type=submit tabIndex=40 onClick="btnClick('btn1');"><img src="yourpath/angry.gif"></BUTTON>

<BUTTON ID=btn2 style="top:40px; left:10px; width:30px; height:30px" class="btn" onmouseover="if(this.className=='btn'){this.className='btnOver'}" onmouseout="if(this.className=='btnOver'){this.className='btn'}" unselectable="on" type=submit tabIndex=40 onClick="btnClick('btn2');"><img src="yourpath/cry.gif"></BUTTON>

<BUTTON ID=btn3 style="top:70px; left:10px; width:30px; height:30px" class="btn" onmouseover="if(this.className=='btn'){this.className='btnOver'}" onmouseout="if(this.className=='btnOver'){this.className='btn'}" unselectable="on" type=submit tabIndex=40 onClick="btnClick('btn3');"><img src="yourpath/confused.gif"></BUTTON>

<BUTTON ID=btn4 style="top:100px; left:10px; width:30px; height:30px" class="btn" onmouseover="if(this.className=='btn'){this.className='btnOver'}" onmouseout="if(this.className=='btnOver'){this.className='btn'}" unselectable="on" type=submit tabIndex=40 onClick="btnClick('btn4');"><img src="yourpath/thumbs_up.gif"></BUTTON>

<BUTTON ID=btn5 style="top:10px; left:40px; width:30px; height:30px" class="btn" onmouseover="if(this.className=='btn'){this.className='btnOver'}" onmouseout="if(this.className=='btnOver'){this.className='btn'}" unselectable="on" type=submit tabIndex=40 onClick="btnClick('btn5');"><img src="yourpath/regular.gif"></BUTTON>

<BUTTON ID=btn6 style="top:40px; left:40px; width:30px; height:30px" class="btn" onmouseover="if(this.className=='btn'){this.className='btnOver'}" onmouseout="if(this.className=='btnOver'){this.className='btn'}" unselectable="on" type=submit tabIndex=40 onClick="btnClick('btn6');"><img src="yourpath/omg.gif"></BUTTON>

<BUTTON ID=btn7 style="top:70px; left:40px; width:30px; height:30px" class="btn" onmouseover="if(this.className=='btn'){this.className='btnOver'}" onmouseout="if(this.className=='btnOver'){this.className='btn'}" unselectable="on" type=submit tabIndex=40 onClick="btnClick('btn7');"><img src="yourpath/whatchutalkingabout.gif"></BUTTON>

<BUTTON ID=btn8 style="top:100px; left:40px; width:30px; height:30px" class="btn" onmouseover="if(this.className=='btn'){this.className='btnOver'}" onmouseout="if(this.className=='btnOver'){this.className='btn'}" unselectable="on" type=submit tabIndex=40 onClick="btnClick('btn8');"><img src="yourpath/thumbs_down.gif"></BUTTON>

<BUTTON ID=btn9 style="top:10px; left:70px; width:30px; height:30px" class="btn" onmouseover="if(this.className=='btn'){this.className='btnOver'}" onmouseout="if(this.className=='btnOver'){this.className='btn'}" unselectable="on" type=submit tabIndex=40 onClick="btnClick('btn9');"><img src="yourpath/tongue.gif"></BUTTON>

<BUTTON ID=btn10 style="top:40px; left:70px; width:30px; height:30px" class="btn" onmouseover="if(this.className=='btn'){this.className='btnOver'}" onmouseout="if(this.className=='btnOver'){this.className='btn'}" unselectable="on" type=submit tabIndex=40 onClick="btnClick('btn10');"><img src="yourpath/sad.gif"></BUTTON>

<BUTTON ID=btn11 style="top:70px; left:70px; width:30px; height:30px" class="btn" onmouseover="if(this.className=='btn'){this.className='btnOver'}" onmouseout="if(this.className=='btnOver'){this.className='btn'}" unselectable="on" type=submit tabIndex=40 onClick="btnClick('btn11');"><img src="yourpath/teeth.gif"></BUTTON>

<BUTTON ID=btn12 style="top:70px; left:100px; width:30px; height:30px" class="btn" onmouseover="if(this.className=='btn'){this.className='btnOver'}" onmouseout="if(this.className=='btnOver'){this.className='btn'}" unselectable="on" type=submit tabIndex=40 onClick="btnClick('btn12');"><img src="yourpath/shades.gif"></BUTTON>

<BUTTON ID=btn13 style="top:10px; left:100px; width:30px; height:30px" class="btn" onmouseover="if(this.className=='btn'){this.className='btnOver'}" onmouseout="if(this.className=='btnOver'){this.className='btn'}" unselectable="on" type=submit tabIndex=40 onClick="btnClick('btn13');"><img src="yourpath/embarassed.gif"></BUTTON>

<BUTTON ID=btn14 style="top:40px; left:100px; width:30px; height:30px" class="btn" onmouseover="if(this.className=='btn'){this.className='btnOver'}" onmouseout="if(this.className=='btnOver'){this.className='btn'}" unselectable="on" type=submit tabIndex=40 onClick="btnClick('btn14');"><img src="yourpath/wink.gif"></BUTTON>

<BUTTON ID=btnCancel style="top:105px; left:75px; width:50px; height:20px" type=reset tabIndex=45 onClick="window.close();">Cancel</BUTTON>


</BODY>
</HTML>



(This post was edited by remac on Jan 29, 2005, 2:57 PM)