[x]
Posted via EE Mobile

Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.
Question
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
5.8

Deditor & Insert Emotions

Asked by sohaib69 in JavaScript

Tags: insert, javascript

Dear Sir,

I have that script which I am running, same as Hotmail -  but in the html editor I want to put some code so that user can insert Emotions to the emails', I have all Emotions Images such has smily face, sad face and so on...


Start >>>>>>>>>>>>>>>>>>>>>>>>>>>

MY html composer source is :-

<html>
<head>
<title>Compose Email</title>

<link REL="stylesheet" TYPE="text/css" HREF="../../javascript/composehtml.css">

<SCRIPT>
<!--
var bLoad=false
var pureText=true
var bodyTag="<BODY MONOSPACE STYLE=\"font:10pt arial,sans-serif\">"
var bTextMode=false

public_description=new Editor

function Editor() {
  this.put_html=SetHtml;
  this.get_html=GetHtml;
  this.put_text=SetText;
  this.get_text=GetText;
  this.CompFocus=GetCompFocus;
}

function GetCompFocus() {
  Composition.focus();
}

function GetText() {
  return Composition.document.body.innerText;
}

function SetText(text) {
  text = text.replace(/\n/g, "<br>")
  Composition.document.body.innerHTML=text;
}

function GetHtml() {
  if (bTextMode)
    return Composition.document.body.innerText;
  else {
    cleanHtml();
    cleanHtml();
    return Composition.document.body.innerHTML;
  }
}

function SetHtml(sVal) {
  if (bTextMode) Composition.document.body.innerText=sVal;
  else Composition.document.body.innerHTML=sVal;
}

// -->
</script>
</head>

<body onload="bLoad=true" STYLE="margin:0pt;padding:2pt">
<div class="yToolbar" ID="ParaToolbar">
  <div class="TBHandle"></div>
  <select ID="ParagraphStyle" class="TBGen" TITLE="Paragraph Format" LANGUAGE="javascript" onchange="format('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
    <option class="heading" selected>Paragraph
    <option value="Normal">Normal
    <option value="Heading 1">Heading 1 &lt;H1&gt;
    <option value="Heading 2">Heading 2 &lt;H2&gt;
    <option value="Heading 3">Heading 3 &lt;H3&gt;
    <option value="Heading 4">Heading 4 &lt;H4&gt;
    <option value="Heading 5">Heading 5 &lt;H5&gt;
    <option value="Heading 6">Heading 6 &lt;H6&gt;
    <option value="Address">Address &lt;ADDR&gt;
    <option value="Formatted">Formatted &lt;PRE&gt;
    <option style="color: darkred" value="removeFormat">Remove Formatting
  </select>
  <select ID="FontName" class="TBGen" TITLE="Font Name" LANGUAGE="javascript" onchange="format('fontname',this[this.selectedIndex].value);this.selectedIndex=0">
    <option class="heading" selected>Font
    <option value="Arial">Arial
    <option value="Arial Black">Arial Black
    <option value="Arial Narrow">Arial Narrow
    <option value="Comic Sans MS">Comic Sans MS
    <option value="Courier New">Courier New
    <option value="System">System
    <option value="Times New Roman">Times New Roman
    <option value="Verdana">Verdana
    <option value="Wingdings">Wingdings
  </select>
  <select ID="FontSize" class="TBGen" TITLE="Font Size" LANGUAGE="javascript" onchange="format('fontsize',this[this.selectedIndex].value);this.selectedIndex=0">
    <option class="heading" selected>Size
    <option value="1">1
    <option value="2">2
    <option value="3">3
    <option value="4">4
    <option value="5">5
    <option value="6">6
    <option value="7">7
  </select>
  <div class="TBSep"></div>
  <div class="Btn" TITLE="Bold" LANGUAGE="javascript" onclick="format('bold');">
    <img class="Ico" src="../../imgs/bold.gif">
  </div>
  <div class="Btn" TITLE="Italic" LANGUAGE="javascript" onclick="format('italic')">
    <img class="Ico" src="../../imgs/italic.gif">
  </div>
  <div class="Btn" TITLE="Underline" LANGUAGE="javascript" onclick="format('underline')">
    <img class="Ico" src="../../imgs/under.gif">
  </div>
  <div class="TBSep"></div>
  <div class="Btn" TITLE="Cut" LANGUAGE="javascript" onclick="format('cut')">
    <img class="Ico" src="../../imgs/cut.gif">
  </div>
  <div class="Btn" TITLE="Copy" LANGUAGE="javascript" onclick="format('copy')">
    <img class="Ico" src="../../imgs/copy.gif">
  </div>
  <div class="Btn" TITLE="Paste" LANGUAGE="javascript" onclick="format('paste')">
    <img class="Ico" src="../../imgs/paste.gif">
  </div>
</div>

<div class="yToolbar" ID="FormatToolbar">

  <div class="TBSep"></div>
  <div class="Btn" TITLE="Foreground Color" LANGUAGE="javascript" onclick="foreColor()">
    <img class="Ico" src="../../imgs/tpaint.gif">
  </div>
  <div class="Btn" TITLE="Background Color" LANGUAGE="javascript" onclick="backColor()">
    <img class="Ico" src="../../imgs/parea.gif">
  </div>
  <div class="TBSep"></div>
  <div class="Btn" TITLE="Align Left" NAME="Justify" LANGUAGE="javascript" onclick="format('justifyleft')">
    <img class="Ico" src="../../imgs/aleft.gif">
  </div>
  <div class="Btn" TITLE="Center" NAME="Justify" LANGUAGE="javascript" onclick="format('justifycenter')">
    <img class="Ico" src="../../imgs/center.gif">
  </div>
  <div class="Btn" TITLE="Align Right" NAME="Justify" LANGUAGE="javascript" onclick="format('justifyright')">
    <img class="Ico" src="../../imgs/aright.gif">
  </div>
  <div class="TBSep"></div>
  <div class="Btn" TITLE="Numbered List" LANGUAGE="javascript" onclick="format('insertorderedlist')">
    <img class="Ico" src="../../imgs/nlist.gif">
  </div>
  <div class="Btn" TITLE="Bulletted List" LANGUAGE="javascript" onclick="format('insertunorderedlist')">
    <img class="Ico" src="../../imgs/blist.gif">
  </div>
  <div class="TBSep"></div>
  <div class="Btn" TITLE="Decrease Indent" LANGUAGE="javascript" onclick="format('outdent')">
    <img class="Ico" src="../../imgs/ileft.gif">
  </div>
  <div class="Btn" TITLE="Increase Indent" LANGUAGE="javascript" onclick="format('indent')">
    <img class="Ico" src="../../imgs/iright.gif" >
  </div>
  <div class="TBSep"></div>
  <div class="Btn" TITLE="Create Hyperlink" LANGUAGE="javascript" onclick="createLink()">
    <img class="Ico" src="../../imgs/wlink.gif">
  </div>

  <div class="TBSep"></div>
  <div ID="EditMode" class="TBGen" style="width:150" TITLE="Editing Mode">
    <input type=checkbox name="switchMode" LANGUAGE="javascript" onclick="setMode(switchMode.checked)">Advanced Edit
  </div>
</div>

<IFRAME class="Composition" width="100%" ID="Composition" height="270">
</IFRAME>

<SCRIPT>
<!--
Composition.document.open();
Composition.document.write(bodyTag);

Composition.document.close();
Composition.document.designMode="On";
// -->
</SCRIPT>

<script LANGUAGE="Javascript" SRC="../../javascript/compose.js">
</script>

</body>
</html>

End >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>


And the source for compose.js is are as follows :-

Start >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

SEP_PADDING = 5
HANDLE_PADDING = 7

var yToolbars = new Array();  // Array of all toolbars.

// Initialize everything when the document is ready
var YInitialized = false;
function document.onreadystatechange() {
  if (YInitialized) return;
  YInitialized = true;

  var i, s, curr;

  // Find all the toolbars and initialize them.
  for (i=0; i<document.body.all.length; i++) {
    curr=document.body.all[i];
    if (curr.className == "yToolbar") {
      if (! InitTB(curr)) {
        alert("Toolbar: " + curr.id + " failed to initialize. Status: false");
      }
      yToolbars[yToolbars.length] = curr;
    }
  }

  //Lay out the page, set handler.
  DoLayout();
  window.onresize = DoLayout;

  Composition.document.open()
  Composition.document.write("<BODY MONOSPACE STYLE=\"font:10pt arial,sans-serif\"></body>");
  Composition.document.close()
  Composition.document.designMode="On"
  //setTimeout("Composition.focus()",0)

}

// Initialize a toolbar button
function InitBtn(btn) {
  btn.onmouseover = BtnMouseOver;
  btn.onmouseout = BtnMouseOut;
  btn.onmousedown = BtnMouseDown;
  btn.onmouseup = BtnMouseUp;
  btn.ondragstart = YCancelEvent;
  btn.onselectstart = YCancelEvent;
  btn.onselect = YCancelEvent;
  btn.YUSERONCLICK = btn.onclick;
  btn.onclick = YCancelEvent;
  btn.YINITIALIZED = true;
  return true;
}

//Initialize a toolbar.
function InitTB(y) {
  // Set initial size of toolbar to that of the handle
  y.TBWidth = 0;
   
  // Populate the toolbar with its contents
  if (! PopulateTB(y)) return false;
 
  // Set the toolbar width and put in the handle
  y.style.posWidth = y.TBWidth;
 
  return true;
}


// Hander that simply cancels an event
function YCancelEvent() {
  event.returnValue=false;
  event.cancelBubble=true;
  return false;
}

// Toolbar button onmouseover handler
function BtnMouseOver() {
  if (event.srcElement.tagName != "IMG") return false;
  var image = event.srcElement;
  var element = image.parentElement;
 
  // Change button look based on current state of image.
  if (image.className == "Ico") element.className = "BtnMouseOverUp";
  else if (image.className == "IcoDown") element.className = "BtnMouseOverDown";

  event.cancelBubble = true;
}

// Toolbar button onmouseout handler
function BtnMouseOut() {
  if (event.srcElement.tagName != "IMG") {
    event.cancelBubble = true;
    return false;
  }

  var image = event.srcElement;
  var element = image.parentElement;
  yRaisedElement = null;
 
  element.className = "Btn";
  image.className = "Ico";

  event.cancelBubble = true;
}

// Toolbar button onmousedown handler
function BtnMouseDown() {
  if (event.srcElement.tagName != "IMG") {
    event.cancelBubble = true;
    event.returnValue=false;
    return false;
  }

  var image = event.srcElement;
  var element = image.parentElement;

  element.className = "BtnMouseOverDown";
  image.className = "IcoDown";

  event.cancelBubble = true;
  event.returnValue=false;
  return false;
}

// Toolbar button onmouseup handler
function BtnMouseUp() {
  if (event.srcElement.tagName != "IMG") {
    event.cancelBubble = true;
    return false;
  }

  var image = event.srcElement;
  var element = image.parentElement;

  if (element.YUSERONCLICK) eval(element.YUSERONCLICK + "anonymous()");

  element.className = "BtnMouseOverUp";
  image.className = "Ico";

  event.cancelBubble = true;
  return false;
}

// Populate a toolbar with the elements within it
function PopulateTB(y) {
  var i, elements, element;

  // Iterate through all the top-level elements in the toolbar
  elements = y.children;
  for (i=0; i<elements.length; i++) {
    element = elements[i];
    if (element.tagName == "SCRIPT" || element.tagName == "!") continue;
   
    switch (element.className) {
    case "Btn":
      if (element.YINITIALIZED == null) {
      if (! InitBtn(element)) {
        alert("Problem initializing:" + element.id);
        return false;
      }
      }
     
      element.style.posLeft = y.TBWidth;
      y.TBWidth += element.offsetWidth + 1;
      break;
     
    case "TBGen":
      element.style.posLeft = y.TBWidth;
      y.TBWidth += element.offsetWidth + 1;
      break;
     
    case "TBSep":
      element.style.posLeft = y.TBWidth + 2;
      y.TBWidth += SEP_PADDING;
      break;
     
    case "TBHandle":
      element.style.posLeft = 2;
      y.TBWidth += element.offsetWidth + HANDLE_PADDING;
      break;
     
    default:
      alert("Invalid class: " + element.className + " on Element: " + element.id + " <" + element.tagName + ">");
      return false;
    }
  }

  y.TBWidth += 1;
  return true;
}

function DebugObject(obj) {
  var msg = "";
  for (var i in TB) {
    ans=prompt(i+"="+TB[i]+"\n");
    if (! ans) break;
  }
}

// Lay out the docked toolbars
function LayoutTBs() {
  NumTBs = yToolbars.length;

  // If no toolbars we're outta here
  if (NumTBs == 0) return;

  //Get the total size of a TBline.
  var i;
  var ScrWid = (document.body.offsetWidth) - 6;
  var TotalLen = ScrWid;
  for (i = 0 ; i < NumTBs ; i++) {
    TB = yToolbars[i];
    if (TB.TBWidth > TotalLen) TotalLen = TB.TBWidth;
  }

  var PrevTB;
  var LastStart = 0;
  var RelTop = 0;
  var LastWid, CurrWid;

  //Set up the first toolbar.
  var TB = yToolbars[0];
  TB.style.posTop = 0;
  TB.style.posLeft = 0;

  //Lay out the other toolbars.
  var Start = TB.TBWidth;
  for (i = 1 ; i < yToolbars.length ; i++) {
    PrevTB = TB;
    TB = yToolbars[i];
    CurrWid = TB.TBWidth;

    if ((Start + CurrWid) > ScrWid) {
      //TB needs to go on next line.
      Start = 0;
      LastWid = TotalLen - LastStart;
    }
    else {
      //Ok on this line.
      LastWid = PrevTB.TBWidth;
      //RelTop -= TB.style.posHeight;
      RelTop -= TB.offsetHeight;
    }
     
    //Set TB position and LastTB width.
    TB.style.posTop = RelTop;
    TB.style.posLeft = Start;
    PrevTB.style.width = LastWid;

    //Increment counters.
    LastStart = Start;
    Start += CurrWid;
  }

  //Set width of last toolbar.
  TB.style.width = TotalLen - LastStart;
 
  //Move everything after the toolbars up the appropriate amount.
  i--;
  TB = yToolbars[i];
  var TBInd = TB.sourceIndex;
  var A = TB.document.all;
  var item;
  for (i in A) {
    item = A.item(i);
    if (! item) continue;
    if (! item.style) continue;
    if (item.sourceIndex <= TBInd) continue;
    if (item.style.position == "absolute") continue;
    item.style.posTop = RelTop;
  }
}

//Lays out the page.
function DoLayout() {
  LayoutTBs();
}

// Check if toolbar is being used when in text mode
function validateMode() {
  if (! bTextMode) return true;
  alert("Please uncheck the \"View HTML source\" checkbox to use the toolbars");
  Composition.focus();
  return false;
}

//Formats text in composition.
function format(what,opt) {
  if (!validateMode()) return;
 
  if (opt=="removeFormat") {
    what=opt;
    opt=null;
  }

  if (opt==null) Composition.document.execCommand(what);
  else Composition.document.execCommand(what,"",opt);
 
  pureText = false;
  Composition.focus();
}

//Switches between text and html mode.
function setMode(newMode) {
  bTextMode = newMode;
  var cont;
  if (bTextMode) {
    cleanHtml();
    cleanHtml();

    cont=Composition.document.body.innerHTML;
    Composition.document.body.innerText=cont;
  } else {
    cont=Composition.document.body.innerText;
    Composition.document.body.innerHTML=cont;
  }
 
  Composition.focus();
}

//Finds and returns an element.
function getEl(sTag,start) {
  while ((start!=null) && (start.tagName!=sTag)) start = start.parentElement;
  return start;
}

function createLink() {
  if (!validateMode()) return;
 
  var isA = getEl("A",Composition.document.selection.createRange().parentElement());
  var str=prompt("Enter link location (e.g. http://www.adomain.com):", isA ? isA.href : "http:\/\/");
 
  if ((str!=null) && (str!="http://")) {
    if (Composition.document.selection.type=="None") {
      var sel=Composition.document.selection.createRange();
      sel.pasteHTML("<A HREF=\""+str+"\">"+str+"</A> ");
      sel.select();
    }
    else format("CreateLink",str);
  }
  else Composition.focus();
}

//Sets the text color.
function foreColor() {
  if (! validateMode()) return;
  var arr = showModalDialog("../ColorSelect.html", "", "font-family:Verdana; font-size:12; dialogWidth:30em; dialogHeight:35em");
  if (arr != null) format('forecolor', arr);
  else Composition.focus();
}

//Sets the background color.
function backColor() {
  if (!validateMode()) return;
  var arr = showModalDialog("../ColorSelect.html", "", "font-family:Verdana; font-size:12; dialogWidth:30em; dialogHeight:35em");
  if (arr != null) format('backcolor', arr);
  else Composition.focus()
}

function cleanHtml() {
  var fonts = Composition.document.body.all.tags("FONT");
  var curr;
  for (var i = fonts.length - 1; i >= 0; i--) {
    curr = fonts[i];
    if (curr.style.backgroundColor == "#ffffff") curr.outerHTML = curr.innerHTML;
  }
}

function getPureHtml() {
  var str = "";
  var paras = Composition.document.body.all.tags("P");
  if (paras.length > 0) {
    for (var i=paras.length-1; i >= 0; i--) str = paras[i].innerHTML + "\n" + str;
  } else {
    str = Composition.document.body.innerHTML;
  }
  return str;
}

End >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>


I will really appreciate if you please kindly help me ..

Thanks
 
Related Solutions
Keywords: Deditor & Insert Emotions
Title
1 Emotions IN html composer
 
Loading Advertisement...
 
[+][-]10/10/02 08:10 AM, ID: 7324231Accepted Solution

View this solution now by starting your 30-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

About this solution

Zone: JavaScript
Tags: insert, javascript
Sign Up Now!
Solution Provided By: ComTech
Participating Experts: 2
Solution Grade: A
 
[+][-]03/25/02 05:26 AM, ID: 6893876Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]03/25/02 05:30 AM, ID: 6893883Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]03/25/02 06:33 AM, ID: 6894022Author Comment

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]03/25/02 06:33 AM, ID: 6894026Author Comment

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]03/25/02 07:16 AM, ID: 6894142Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]03/25/02 07:17 AM, ID: 6894151Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]03/25/02 07:23 AM, ID: 6894163Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]03/25/02 07:24 AM, ID: 6894165Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]03/25/02 08:36 AM, ID: 6894335Author Comment

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]03/25/02 10:35 PM, ID: 6895732Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]03/25/02 10:59 PM, ID: 6895756Author Comment

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]03/26/02 12:52 AM, ID: 6895888Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]03/26/02 12:58 AM, ID: 6895897Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]03/26/02 02:29 AM, ID: 6896030Author Comment

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]03/27/02 01:16 AM, ID: 6898737Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]03/27/02 02:30 AM, ID: 6898845Author Comment

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]10/10/02 08:09 PM, ID: 7325351Expert Comment

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 30-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]10/10/02 08:22 PM, ID: 7325384Author Comment

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 30-day free trial to view this Author Comment or ask the Experts your question.

 
 
Loading Advertisement...
20091111-EE-VQP-92