Solved

DHTMLEdit

Posted on 2001-08-10
11
645 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: 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!

 
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

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!

Question has a verified solution.

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

I would like to start this tip/trick by saying Thank You, to all who said that this could not be done, as it forced me to make sure that it could be accomplished. :) To start, I want to make sure everyone understands the importance of utilizing p…
I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…
Attackers love to prey on accounts that have privileges. Reducing privileged accounts and protecting privileged accounts therefore is paramount. Users, groups, and service accounts need to be protected to help protect the entire Active Directory …

749 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