How to quickly implement the HTML editor. NET Component)

How to quickly implement the HTML editor. NET Component
preface
recently, an HTML editor has been created for the work, which is not complete due to the rush of time, however, during a debugging process, you may find a very clever method that allows you to implement an HTML editor within a few minutes. I hope it will be helpful for you to write it out.
------------------------------------------------------------------------------
abstract
using ccommand ('bold ')), this article mainly introduces how to implement an HTML editor component (but does not describe the implementation details too much, the specific JS technology can query the JScript Language Reference) and how to implement one.. NET component.
------------------------------------------------------------------------------
the directory
encapsulates the "material"
into ASP. NET Component
Add plug-in
summary
about the author
related connections
tips
get "material"
first, we need to get the original Code Of the HTML editor, there are many such editors on the Internet, such as the well-known RichTextBox and DOTNET's dotnettextbox. To avoid copyright disputes, take what I have done as an example (Name: ultratextbox): In the editor Toolbar Right-click a blank area and choose --> View Source Code ,.

Save the code Beibei to A. htm file and you can see the effect. Is it easy to make half of it? :)
For future explanations, we will save it as the editor. aspx file. Here, delete the _ viewstate section.
Save the corresponding icons and CSS files in the corresponding location. Otherwise, your interface will be ugly. Of course, you can also make the icons as needed.
Now, the preparation is complete. The following describes how to encapsulate it as a. NET component for your convenience in the project.
--------------------------------------------------------------------------------
Encapsulated into ASP. NET components
First, generate an ultratextboxv1 component (also known as a custom control, I used to call it a component) project in the Vs. NET environment,
Using system;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. componentmodel;
// Set the tag prefix of the component
[Assembly: tagprefix ("GOODIDEA. ultratextboxv1", "utbv1")]
Namespace GOODIDEA. ultratextboxv1
{
// Add a class declaration
[
Defaultproperty ("text "),
Validationproperty ("text "),
Toolboxdata ("<{0}: ultratextboxv1 runat = Server> </{0}: ultratextboxv1> "),
Parsechildren (false ),
Designer ("GOODIDEA. ultratextboxv1.ultratextboxv1designer ")
]
Public class ultratextboxv1: system. Web. UI. Control, ipostbackdatahandler
{
Private Static readonly object valuechangedevent = new object ();
// Declare a proxy to handle the event where the value is changed. The valuechanged event occurs when the value of the component is changed.
Public event eventhandler valuechanged
{
Add
{
Events. addhandler (valuechangedevent, value );
}
Remove
{
Events. removehandler (valuechangedevent, value );
}
}
// Method for triggering event with a value changed
Protected virtual void onvaluechanged (eventargs E)
{
If (events! = NULL)
{
Eventhandler oeventhandler = (eventhandler) events [valuechangedevent];
If (oeventhandler! = NULL) oeventhandler (this, e );
}
}
// Process the returned data
Bool ipostbackdatahandler. loadpostdata (string postdatakey, system. Collections. Specialized. namevaluecollection postcollection)
{
If (postcollection [postdatakey]! = Text)
{
TEXT = postcollection [postdatakey];
Return true;
}
Return false;
}
// Notify the application Program The component status has changed.
Void ipostbackdatahandler. raisepostdatachangedevent ()
{
Onvaluechanged (eventargs. Empty );
}

// We need to implement the following four attributes for an Editor: Text, width, height, and basepath.

// Text attribute: (get the value from the editor and assign the value to the editor)
[Bindable (true), defaultvalue ("")]
Public String text
{
Get
{
Object o = viewstate ["text"];
Return (O = NULL )? String. Empty: (string) O;
}
Set
{
Viewstate ["text"] = value;
}
}

// Width attribute: (editor width)
[Bindable (true), category ("appearence"), defaultvalue ("100%")]
Public unit width
{
Get
{
Object o = viewstate ["width"];
Return (O = NULL )? Unit. parse ("100%"): (unit) O;
}
Set
{
Viewstate ["width"] = value;
}
}

// Height attribute: (editor height)
[Bindable (true), category ("appearence"), defaultvalue ("385px")]
Public unit height
{
Get
{
Object o = viewstate ["height"];
Return (O = NULL )? Unit. parse ("pixel PX"): (unit) O;
}
Set
{
Viewstate ["height"] = value;
}
}

// Basepath attributes: (the path of editor. aspx saved in step 1 and the path of the plug-in to be created later)
[Bindable (true), defaultvalue ("../ultratextboxv1sys/plug-ins/")]
Public String basepath
{
Get
{
Object o = viewstate ["basepath"];
Return (O = NULL )? "../Ultratextboxv1sys/plug-ins/": (string) O;
}
Set
{
Viewstate ["basepath"] = value;
}
}

// The next step is how to combine this component with editor. aspx. Here the IFRAME technology is used:
// Overwrite the render method and output it at runtime:
Protected override void render (htmltextwriter output)
{
System. Web. httpbrowsercapabilities obroties = page. Request. browser;
// The corresponding IE version must be 5.5 or later.
If (obrojor. browser = "ie" & obroversion. majorversion> = 5.5 & obrowser. Win32)
{
String slink = basepath + "editor. aspx? Fieldname = "+ uniqueid;
// If setTimeout is not used, the system will prompt that the object cannot be found.
Output. Write (
"<IFRAME id = \" {5} \ "src = \" {0} \ "width = \" {1} \ "Height = \" {2} \ "frameborder = \ "NO \" scrolling = \ "NO \" onLoad = \ "Export CEPT: settimeout('%5}.htmledit.doc ument. body. innerhtml = document. getelementbyid (\ '{4}
\ '). Value', 1000); \ "onblur = \" {4}. value = 41552.16.htmledit.doc ument. Body. innerhtml \ "> </iframe> ",
Slink,
Width,
Height,
Text,
Uniqueid,
ID + "_ Editor"
);
// Store the editor Value
Output. Write (
"<Input type = \" Hidden \ "id = \" {0} \ "name = \" {0} \ "value = \" {1} \ "> ",
Uniqueid,
System. Web. httputility. htmlencode (text ));
}
}
}

// Implement a design-time interface for this component:
Public class ultratextboxv1designer: system. Web. UI. Design. controldesigner
{
Public ultratextboxv1designer (){}
Public override string getdesigntimehtml ()
{
Ultratextboxv1 ocontrol = (ultratextboxv1) component;
Return string. Format (
"<Table width = \" {0} \ "Height = \" {1} \ "bgcolor = \" # f5f5f5 \ "bordercolor = \" # c7c7c7 \ "cellpadding = \ "0 \" cellspacing = \ "0 \" border = \ "1 \"> <tr> <TD valign = \ "Middle \" align = \ "center \"> ultratextbox 1.1-<B> {2} </B> </TD> </tr> </table> ",
Ocontrol. Width,
Ocontrol. height,
Ocontrol. ID );
}
}
}

at this point, the component is basically finished. Copy the compiled DLL to your project folder and add it to the toolbar --> component, you can drag and drop your page to use it in your project.
plugin
Add plug-in
here are two examples to illustrate how to add plug-ins to the Editor:
if you want to add some functions to the editor, for example, to upload an image or insert a tag, you should first add an icon to it:

<Div class = "BTN" Title = "insert Excel table" Language = "JavaScript" onclick = "utb_insertexcel ()">

</Div>
Then, add utb_insertimg () and utb_insertexcel () in the JScript code:
Function utb_insertimg ()
{
// It can only be used in editing mode
If (! Utb_validatemode ())
Return;
Htmledit. Focus ();
// Create an area at the current cursor to insert an image
VaR range = htmledit.doc ument. selection. createRange ();
// Open the upload page in the mode dialog box and insert the returned value to the editor.
VaR arr = showmodaldialog ("" uploadface. aspx "", "," "dialogwidth: 430px; dialogheight: 280px; help: 0; Status: 0 "");
If (Arr! = NULL)
{
// The returned value is like:
Range. pastehtml (ARR );
}
Htmledit. Focus ();
}

Function utb_insertexcel ()
{
If (! Utb_validatemode ())
Return;
Htmledit. Focus ();
// Insert a Microsoft Office Web Components (msowc) Component
VaR range = htmledit.doc ument. selection. createRange ();
Range. pastehtml ("" <object classid = 'clsid: 0002e510-0000-0000-c000-000000000046 'Id = 'readsheet1' codebase = 'file: \ Bob \ Software \ Office2000 \ msowc. cab 'width = '000000' Height = '000000'> <Param name = 'htmlurl' value> <Param name = 'htmldata' value = '& lt; html xmlns: X = & quot; URN: Schemas-Microsoft-com: Office: Excel & quot; xmlns = & quot; http://www.w3.org/TR/REC-html40">"" & Lt; X: width & gt; 15240 & lt;/X: width & gt; & lt; X: toprowvisible & gt; 0 & lt;/X: toprowvisible & gt; & lt; X: leftcolumnvisible & gt; 0 & lt;/X: leftcolumnvisible & gt; & lt; X: protectcontents & gt; false & lt;/X: protectcontents & gt; & lt; X: defaultrowheight & gt; 210 & lt;/X: defaultrowheight & gt; & lt; X: standardwidth & gt; 2389 & lt;/X: standardwidth & gt; & lt;/X: worksheetoptions & gt; & lt;/X: excelworksheet & gt; & lt;/X: excelworksheets & gt; & lt; X: maxhei Ght & gt; 80% & lt;/X: maxheight & gt; & lt; X: maxwidth & gt; 80% & lt;/X: maxwidth & gt; & lt; /X: excelworkbook & gt; & lt;/xml & gt; & lt ;! [Endif] -- & gt; & lt; Table class = wc4590f88 X: Str & gt; & lt; Col width = & quot; 56 & quot; & gt; & lt; tr Height = & quot; 14 & quot; & gt; & lt; TD & gt; & lt;/tr & gt; & lt; /table & gt; & lt;/Body & gt; & lt;/html & gt; '> <Param name = 'ype ype' value = 'htmldata'> <Param name = 'autofit 'value = '0'> <Param name = 'displaycolheaders' value ='-1 '> <Param name = 'displaygridlines' value ='-1'> <Param name = 'displayhorizontalscrollbar' value = '-1'> <Param name = 'displayrowheaders' value =' -1 '> <Param name = 'displaytitlebar' value ='-1'> <Param name = 'displaytoolbar' value = '-1'> <Param name = 'displayverticalscrollbar' Value = '-1'> <Param name = 'enablesautocalculate' value = '-1'> <Param name = 'enablesevents' value ='-1'> <Param name = 'moveafterreturn 'value = '-1'> <Param name = 'moveafterreturnction ction' value = '0'> <Param name = 'righttoleft' value = '0'> <Param name = 'viewablerange 'value = '1: 65536 '> </Object> "");
Htmledit. Focus ();
}

There are too many posts on csdn about how to upload images. Note that the mode dialog box is used, so there cannot be a send-back event on the page. The operation should be done in IFRAME.
--------------------------------------------------------------------------------
Summary
Thank you for seeing this. Now a simple HTML editor has been created. This article mainly describes how to get the code of an HTML editor and how to encapsulate it into one.. NET Component and explains how to add a plug-in to it through two columns. From the above steps, you can see that creating an HTML editor is actually very simple. Although some other people's code has been used for reference, if you carefully analyze those JS scripts, you will suddenly become open-minded, if you have better ideas, please let me know.
--------------------------------------------------------------------------------