• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 673
  • Last Modified:

DHTMLEdit

I need some kind of control for Internet Explorer that enables me to edit rich text.

I would like to make a HTML form with a control where user could write text, set fonts, paragraphs, insert pictures (???). With submit the HTML would be transfered onto server.

If understand this right DHTMLEdit control should give me some of this functionality. I can't find any useful examples.

Where can I find some sample code or maybe hints where to find such components.

Thanks
Marko
0
marko020397
Asked:
marko020397
  • 3
  • 3
  • 2
  • +3
1 Solution
 
ZhongYuCommented:
<html>
<head>
<title>ContentEditable Demo</title>
<script>
// Makes button look sunken when button is clicked
function BtnDown()
{
     window.event.srcElement.style.borderStyle = "inset";
}

// Makes button look raised when button is released
function BtnUp()
{    
     window.event.srcElement.style.borderStyle = "outset";
}

// Executes commands depending on which button has been pushed
function Toggle()
{
     // get button label
     text = window.event.srcElement.innerText;
     
     if (text == "ContentEditable")
     {
          if (document.all("edit").contentEditable == "true")
          {
               document.all("edit").contentEditable = "false";
               window.event.srcElement.style.borderStyle = "outset";
          }
          else
          {
               document.all("edit").contentEditable = "true";
               window.event.srcElement.style.borderStyle = "inset";
          }
         
          return;
     }

     else if (text == "Bold")
          document.execCommand("Bold");

     else if (text == "Italic")
          document.execCommand("Italic");

     else if (text == "FontColor")
     {
          theColor = document.all.fontcolor.value;
          if (theColor != "")
               document.execCommand("ForeColor", false, theColor);
     }
         
     else if (text == "FontSize")
     {
          theSize = document.all.fontsize.value;
          if (theSize != "")          
               document.execCommand("FontSize", false, theSize);
     }
         
     else if (text == "FontName")
     {
          theName = document.all.fontname.value;
          if (theName != "")
               document.execCommand("FontName", false, theName);
     }

     else if (text == "InsertImage")
     {
          theImg = document.all.imagepath.value;
          if (theImg != "")
               document.execCommand("InsertImage", false, theImg);
     }

     window.event.srcElement.style.borderStyle = "outset";
}
</script>
<style>
#edit {
     position:absolute;
     top: 25;
     left: 225;
     width: 350;
     height: 350;
     border:solid;
     border-style:ridge;
     border-width:5;
     background-color:white;
     }
.btn {
     border:solid;
     border-style:outset;
     border-width:thin;

     font-weight:bold;
     padding:2;
     color:white;
     background-color:#336699;
     cursor:default;
     }
     
</style>
</head>

<body bgcolor="#cc9966" unselectable="on">

<div unselectable="on">
<br>

<span unselectable="on" class="btn" onmouseup="Toggle();" style="border-style:inset">ContentEditable</span>
<br><br>

<span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">Bold</span>
<br><br>

<span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">Italic</span>
<br><br>

<span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">FontColor</span>
<input type="text" id="fontcolor" size="10" value="red">
<br><br>

<span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">FontSize</span>
<input type="text" id="fontsize" size="1" value="7">
<br><br>

<span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">FontName</span>
<input type="text" id="fontname" size="14" value="comic sans ms">
<br><br>

<span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">InsertImage</span>
<input type="text" id="imagepath" size="14" value="/workshop/graphics/cone.jpg">
<br><br>
</div>


<div id="edit" contentEditable="true">
<p>This text is inside the editable region.</p>
</div>

</body>
</html>
0
 
ZhongYuCommented:
Hi marko,

Try the example. You must use IE5 or higher I guess.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
beg3aCommented:
here are a couple of dhtmledit examples from microsoft.  The second one (brochure machine) may be closer to what your looking for


http://msdn.microsoft.com/Downloads/samples/Internet/browser/editcntrl/Default.asp

http://msdn.microsoft.com/Downloads/samples/Internet/ie55/BrochureMachine/default.asp

0
 
weaklingCommented:
Hello,

A saw an excellent example of rich content editing at http://www.aspalliance.com/Yusuf/Article10.asp about a month or so ago. I tried the code out and it works quite well. You'll have to put in your own code to do things like saving your content and uploading images for your particular situation but in terms of editing it works great.
0
 
marko020397Author Commented:
I have taken a look at the eWebEditPro. It is exactly what I need. The only problem is that it's quite expensive. I have to use it on many sites and get licence for every site.

I have also looked at the MSHTML component from Microsoft. Is it possible to POST data from MSHTML editing component to an Internet Server in HTML format where I could save it in database? I have only found SaveDocument and LoadDocument functions and no documentation about them.
0
 
ZhongYuCommented:
You can post the innerHTML content to the server via xmlhttp. Or simply assign the whole content to a hiiden field and post it to the server.

0
 
marko020397Author Commented:
I have found solution myself. There is very difficult to find any documentation about DHTML Editing Component.

There simply doesn't exists any information on the internet. All links point to www.microsoft.com. On Microsoft all info is just not there. I had to find DHTMLEdit SDK and there is documentation. Documentation also point to www.microsoft.com dead links.

ZhongYu was the closest to the solution, so I will give points to him.

Very interesting link was also given by joegass. EWebEditPro is a very good component. But I have to use it on many sites, so it is quite expensive.

I still had to solve the problem with image uploading. Which is not automaticly supported in DHTMLEdit while in EWebEditPro is.

Thanks
0
 
thor918Commented:
can you post the link to the page where the documentation is?
0
 
marko020397Author Commented:
I don't know where the documentation is on internet. You have to get "DHTMLEdit SDK". Some documentation is included in that SDK.
0
 
thor918Commented:
If anybody can help me on using mshtml component go here :
http://www.experts-exchange.com/jsp/qManageQuestion.jsp?qid=20251062
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 3
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now