Solved

DHTMLEdit

Posted on 2001-08-10
11
643 Views
Last Modified: 2012-06-27
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
Comment
Question by:marko020397
  • 3
  • 3
  • 2
  • +3
11 Comments
 
LVL 2

Expert Comment

by:joegass
ID: 6372363
0
 
LVL 2

Expert Comment

by:ZhongYu
ID: 6372652
<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
 
LVL 2

Expert Comment

by:ZhongYu
ID: 6372660
Hi marko,

Try the example. You must use IE5 or higher I guess.
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 1

Expert Comment

by:beg3a
ID: 6375104
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
 

Expert Comment

by:weakling
ID: 6382818
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
 
LVL 4

Author Comment

by:marko020397
ID: 6383022
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
 
LVL 2

Accepted Solution

by:
ZhongYu earned 300 total points
ID: 6383089
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
 
LVL 4

Author Comment

by:marko020397
ID: 6409835
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
 
LVL 2

Expert Comment

by:thor918
ID: 6706599
can you post the link to the page where the documentation is?
0
 
LVL 4

Author Comment

by:marko020397
ID: 6707051
I don't know where the documentation is on internet. You have to get "DHTMLEdit SDK". Some documentation is included in that SDK.
0
 
LVL 2

Expert Comment

by:thor918
ID: 6708003
If anybody can help me on using mshtml component go here :
http://www.experts-exchange.com/jsp/qManageQuestion.jsp?qid=20251062
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests." I got to thinking, hey, I use more than one…
I have helped a lot of people on EE with their coding sources and have enjoyed near about every minute of it. Sometimes it can get a little tedious but it is always a challenge and the one thing that I always say is:  The Exchange of information …
Established in 1997, Technology Architects has become one of the most reputable technology solutions companies in the country. TA have been providing businesses with cost effective state-of-the-art solutions and unparalleled service that is designed…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question