Solved

DHTMLEdit

Posted on 2001-08-10
11
629 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
 
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Have you ever needed to get an ASP script to wait for a while? I have, just to let something else happen. Or in my case, to allow other stuff to happen while I was murdering my MySQL database with an update. The Original Issue This was written…
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…
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …

758 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now