PDA

View Full Version : Clickable smilies in an Iframe



Archbob
Mar 12th, 2007, 05:00 AM
Hi all,
I'm a bit stuck on this one.

So basically I had some code that did do clickable smilies in a text area like so:



<a onclick=\"addSmiley(':[winking]')\"><img src='../smiley/winking.jpg'></a>


And the function:



<script language=\"JavaScript\" type=\"text/javascript\">
function addSmiley(textToAdd)
document.form.textarea.value+= textToAdd;
document.form.textarea.focus();
</script>

Which worked just fine. Now I have a javascript WYSIWYG function that turns the textarea into an iframe. I've determined the iframe's ID as WYSIWYG7

So I changed my function to the below:



<script language=\"JavaScript\" type=\"text/javascript\">
function addSmiley(textToAdd)
document.getElementById(\"wysiwyg\" + 7).contentWindow.value+= textToAdd;
document.getElementById(\"wysiwyg\" + 7).contentWindow.focus();
</script>


It doesn't produce errors, however it doesn't actually add the smiliey symbols to the iframe. QUOTE]
How do I get it to put the characters in there when I click on the smiley face?

Here the page with an example(don't try to postm guest posting is disabled).

http://chipmunk-scripts.com/board/newtopic.php?forumID=36

vwphillips
Mar 12th, 2007, 10:34 AM
hmm
thats not the way one would normally enter HTML text in to a WYSIWYG

WYSIWYG can be quite complex to change

but adding a smilley is same as adding an image

This is an easily understood WYSIWYG

http://www.openwebware.com/products/openwysiwyg/


I found it most usefull when cribbing haft a dozen editers

not sure if they have a smilley option but if you use it I may be able to assist although my WYSIWYG(which has a Also has a smilley panel) uses popup divs and and DOM to enter elements.

Archbob
Mar 12th, 2007, 04:59 PM
Thats actually the one I'm using, how do you add a smiley panel to it?
I'm just trying to do clicable smilies, but I can't get it to focus on the I-frame correctly.

vwphillips
Mar 12th, 2007, 05:18 PM
Clicking on the edit area focus the insertion point or selection then pass the HTML to function(from memory) insertHTML

dont forget .unselectable='on';

They use horid popups but here is my code for the smiley
which used a horid floating DIVs

Smilies are easy to implement, like I say, its an image, so crib there image inset poopup, it is open source.




// Smiley Panel (22-February-2007)
// by Vic Phillips http://www.vicsjavascripts.org.uk

zxcSmileyP=['zxcSmileyPCall'];

function zxcSmileyPCall(){
// if (zxcDIVP!='Load'){ return; }
var zxcoop=new zxcSmileyPOOP();
}

function zxcSmileyPOOP(){
zxcSmileyP[zxcDOMAry.length+1]=this;
var zxcbdy=document.getElementsByTagName('BODY')[0];
this.tag='Smiley';
this.panel=zxcS('DIV',{overflow:'hidden',zIndex:zxcZIndex+3,left:'-500px',top:'20px',width:'300px',height:'214px',color:zxcPanelTxtColor,backgroundColor:zxcPanelBGColo r,border:zxcPanelBorder});
this.panel.oop=this;
zxcbdy.appendChild(this.panel);
zxcTitleBar(this.panel,'Insert Smiley',280);
var zxcp1=this.panel.cloneNode(false);
zxcS(zxcp1,{overflow:'visible',zIndex:'0',left:'5px',top:'26px',width:'288px',height:'156px',color:z xcSubPanelTxtColor,backgroundColor:zxcSubPanelBGColor,border:zxcSubPanelBorder});
this.panel.appendChild(zxcp1);
var zxclft=0,zxctop=0;
var zxcpath='http://www.websmileys.com/sm/';
var zxchappy=['happy/','009.gif','010.gif','013.gif','019.gif','023.gif','025.gif','026.gif','028.gif','026.gif','028.gif ','032.gif','042.gif','044.gif','045.gif','046.gif','050.gif','060.gif','068.gif','073.gif','075.gif ','077.gif','090.gif','093.gif','1002.gif','1006.gif','1015.gif','1016.gif','1020.gif','1029.gif','1 033.gif','1043.gif','1053.gif'];
var zxcsad=['sad/','1012.gif','021.gif','1004.gif','1009.gif','1011.gif','1012.gif','1369.gif','1178.gif','141.gif',' 696.gif','/1171.gif','789.gif','826.gif','824.gif','837.gif','839.gif','938.gif','944.gif','951.gif','968.gif', '974.gif'];
var zxccartoon=['cartoon/','1224.gif','1232.gif','1279.gif'];
var zxcangls=['angels/','angel2.gif','teu21.gif'];
var zxcanimal=['animal/','1089.gif','1115.gif','460.gif'];
var zxccomp=['comp/','comp26.gif'];
var zxccrazy=['crazy/','089.gif','1087.gif']
var zxcevil=['evil/','228.gif','710.gif'];
var zxcfingers=['fingers/','fing01.gif','fing02.gif'];
var zxclove=['love/','1273.gif','753.gif','029.gif'];
var zxcmusic=['music/','musik20.gif','musik37.gif'];
var zxcsleep=['sleep/','schla01.gif','schla02.gif','schla19.gif'];
var zxcsmileary=[zxchappy,zxcsad,zxccartoon,zxcangls,zxcanimal,zxccomp,zxccrazy,zxcevil,zxcfingers,zxclove,zxcmusic,z xcsleep];
var zxccnt=0;
for (var zxc0=0;zxc0<zxcsmileary.length;zxc0++){
for (var zxc0a=1;zxc0a<zxcsmileary[zxc0].length;zxc0a++){
zxcimg=zxcS('IMG',{position:'absolute',cursor:zxcCur},null,zxcp1);
zxcimg.src=zxcpath+zxcsmileary[zxc0][0]+zxcsmileary[zxc0][zxc0a];
zxcimg.unselectable='on';
zxcimg.onmouseup=function(){ zxcSmileyEnter(this); }
}
}
zxcDefaultStyle(this.panel);
this.helpp=zxcS(zxcTextPanelOOP(this,5,26,290,105,['','Insert a Smiley','','Click a Smiley','To Insert the Smiley','at the Edit Area Cursor Position']),{backgroundColor:'#ffffff',border:'#787878 1px solid'});
this.enteroop=new zxcOOPReturnText(this,'IMG');
zxcHelpButton(this);
zxcTranslate(this.panel);
this.msk=zxcPanelMask(this.panel);
this.wp2=zxcBlankDiv(this.panel);
this.editopen();
this.reset();
}

zxcSmileyPOOP.prototype.help=function(zxcbut){
this.helpp.style.visibility=(this.helpp.style.visibility=='visible')?'hidden':'visible';
}

function zxcSmileyEnter(zxcimg){
zxcIFObj.contentWindow.focus();
zxcRemoveNodes(zxcSmileyP[1].enteroop.wp);
var zxccimg=zxcS('IMG',{},null,zxcSmileyP[1].enteroop.wp);
zxccimg.src=zxcimg.src;
var zxctxt=zxcSmileyP[1].enteroop.wp.innerHTML;
zxcInsertHTML(zxctxt);
zxcPanelReset();
}

zxcSmileyPOOP.prototype.editopen=function(){
var zxcp=this.panel;
var zxcp1=this.panel.childNodes[1];
var zxcimgs=zxcp.childNodes[1].getElementsByTagName('IMG');
var zxctop=0,zxclft=0;
for (var zxc0=0;zxc0<zxcimgs.length;zxc0++){
zxclft=Math.max(zxclft,zxcimgs[zxc0].width);
zxctop=Math.max(zxctop,zxcimgs[zxc0].height);
}
var zxctop=zxctop+2; zxccols=Math.ceil(zxcp1.offsetWidth/(zxclft+2)); zxclft=zxcp1.offsetWidth/zxccols;
for (var zxc1=0;zxc1<zxcimgs.length;zxc1++){
zxcS(zxcimgs[zxc1],{position:'absolute',left:((zxc1%zxccols)*zxclft+(zxclft-zxcimgs[zxc1].width)/2)+'px',top:(Math.floor(zxc1/zxccols)*zxctop+(zxctop-zxcimgs[zxc1].height))+'px'});
}
zxcS(zxcp,{height:(parseInt(zxcimg.style.top)+58)+'px'});
zxcS(zxcp1,{height:(parseInt(zxcimg.style.top)+25)+'px'});
}

zxcSmileyPOOP.prototype.reset=function(zxcbut){
zxcS(this.panel,{zIndex:zxcZIndex+3,left:'-500px'});
zxcS(this.helpp,{visibility:'hidden'});
zxcAddIFrame(this.panel);
}






I found their code



/* ---------------------------------------------------------------------- *\
Function : insertHTML()
Description : insert HTML into WYSIWYG in rich text
Usage : insertHTML(<b>hello</b>, "textareaID")
Arguments : html - The HTML being inserted (e.g. <b>hello</b>)
n - The editor identifier that the HTML
will be inserted into (the textarea's ID)
\* ---------------------------------------------------------------------- */
function insertHTML(html, n) {

var browserName = navigator.appName;

if (browserName == "Microsoft Internet Explorer") {
document.getElementById('wysiwyg' + n).contentWindow.document.selection.createRange().pasteHTML(html);
}

else {
var div = document.getElementById('wysiwyg' + n).contentWindow.document.createElement("div");

div.innerHTML = html;
var node = insertNodeAtSelection(div, n);
}

}


/* ---------------------------------------------------------------------- *\
Function : insertNodeAtSelection()
Description : insert HTML into WYSIWYG in rich text (mozilla)
Usage : insertNodeAtSelection(insertNode, n)
Arguments : insertNode - The HTML being inserted (must be innerHTML
inserted within a div element)
n - The editor identifier that the HTML will be
inserted into (the textarea's ID)
\* ---------------------------------------------------------------------- */
function insertNodeAtSelection(insertNode, n) {
// get current selection
var sel = document.getElementById('wysiwyg' + n).contentWindow.getSelection();

// get the first range of the selection
// (there's almost always only one range)
var range = sel.getRangeAt(0);

// deselect everything
sel.removeAllRanges();

// remove content of current selection from document
range.deleteContents();

// get location of current selection
var container = range.startContainer;
var pos = range.startOffset;

// make a new range for the new selection
range=document.createRange();

if (container.nodeType==3 && insertNode.nodeType==3) {

// if we insert text in a textnode, do optimized insertion
container.insertData(pos, insertNode.nodeValue);

// put cursor after inserted text
range.setEnd(container, pos+insertNode.length);
range.setStart(container, pos+insertNode.length);
}

else {
var afterNode;

if (container.nodeType==3) {
// when inserting into a textnode
// we create 2 new textnodes
.........

Archbob
Mar 12th, 2007, 05:43 PM
DId you insert your smiley code right after the portion of the code you just outlined?

And why do you have several smilies for happy, sad, etc?

vwphillips
Mar 12th, 2007, 05:56 PM
The functions for input popups are separate from the insetion code. They pass code to the Text insert or html insert function to be applied to the IFRAME.

My code is somewat different to the code you are using but their documentation is better than most and there is a forum on their site which is worth checking out.

As for the smilies, there are hundreds of em I just picked enough to fill the available space.

Archbob
Mar 12th, 2007, 08:43 PM
I'm using my own custom smilies for this. :p
I've tried their forum, they aren't too responsive. :(

I'm asking if you can just put your code in the wyiwyg.js file.
Also to add the smiley icon to the toolbar, wouldn't I have to modify their generat_toolbar functions?

Thanks.

Archbob
Mar 12th, 2007, 08:50 PM
I'd still prefer the clickable smilies I have now, if anyone knows how to get it to focus on an I-frame.

My speciality is in PHP and not javascript so I'm more or less looking for a quick fix so I can go ahead with my development and release a updated version.

Would anyone be interested in doing this(inserting it into the WYSIWYG) for a small fee, say $25?
I can provide the smilies.

Archbob
Mar 13th, 2007, 06:10 AM
Ok, I still can't get the smiley to appear, after file in the code, what changes to the toolbar generate function do I have to use?

Chippo
Sep 26th, 2008, 09:19 AM
Hi

did you manage to sort this? I am struggling with the same thing now