Nowadays, website development is increasingly promoting user experience, and more and more tools are providing users with convenience, and online HTML content editors should be considered one of the more "old" ones. With simple functions, it can provide users with text style control, such as text color, font size, etc.; with complex functions, it can even provide powerful functions like Word. Although there are many open source editors now, not many are really useful, so their improvement work is still in progress.
Nowadays, most editors online have very powerful functions. Relatively speaking, they also require a lot of configuration during use, and of course the code will naturally be relatively "bloated". If we don't need a powerful editor, we can implement one by ourselves because the code is not complicated. The following is a little personal experience for reference only (taking ExtJS's HTMLEditor as an example).
1. Initialization. When the page is loaded, add an IFrame (optional) to the page. It should be noted here that to judge the status of the page, wait until the page is fully loaded before performing operations to prevent errors in not finding certain elements.
2. Turn on the editing function. Set IFrame to editable (the following code comes from ExtJS's HTMLEditor):
// Get the window object of the iframe
getWin : function(){
return ? : [];
},
//Get the document object of the iframe
getDoc : function(){
return ? ().document : ( || ().document);
},
//Open the document object and write the initialization content to it to be compatible with FireFox
doc = ();
();
('<html><head><mce:style type="text/css"><!--
body{border:0;margin:0;padding:3px;height:98%;cursor:text;}
--></mce:style><style type="text/css" mce_bogus="1">body{border:0;margin:0;padding:3px;height:98%;cursor:text;}</style></head><body></body></html>');
//Open document object editing mode
= "on";
();
This way you can write content to this simple editor.
3. Get the editor's content, the code is as follows:
//Get the editor's body object
var body = || ;
//Get the editor's content
var content = ;
// Process the content, such as replacing some special characters, etc.
//Some code
//Return to content
return content;
4. Add style settings. Although the above editor implements basic functions, it is really too simple and should add some simple styles to implement them. The execCommand method of document makes this idea possible.
//Unified execution method
function execCmd(cmd, value){
//Refer to the above code to obtain the doc object
//Calling the execCommand method to execute the command
(cmd, false, value === undefined ? null : value);
};
//Change the selected font into bold, Ctrl-B
execCmd('bold');
//Under the underline, Ctrl-U
execCmd('underline');
//Change italic, Ctrl-I
execCmd('italic');
//Set the text color
execCmd('forecolor', || ? '#'+color : color);
//Insert a piece of content at the cursor
function insertAtCursor(text){
//Refer to the above code for obtaining win object
if(){
();
var r = ();
if(r){
(true);
(text); }
}else if( || ){
();
execCmd('InsertHTML', text);
}else if(){
execCmd('InsertText', text);
}
}
5. Go further. Now we can change the style. If the editor has a toolbar (this should be inevitable), then we also want the buttons on the toolbar to be highlighted or displayed automatically according to the style of the cursor position. The queryCommandState() method of document allows this idea to be implemented.
//Reference to the above opposite of the doc object
//Is the cursor bold?
var isBold = ('bold');
if(isBold){
//Change the style of the Bold button
}
//Of course the above code can be merged, here is just a schematic
//Underline
('underline');
//Italic
('italic');
This article only provides simple ideas for implementing the editor, and some of the code can be used directly. It is recommended that friends who want to implement the editor by themselves can refer to the HTMLEditor code in ExtJS. It is both simple and clear and can be extended on it.
Finally, I would like to remind you: be careful about browser compatibility issues, and don’t wait until it is coming to an end before testing compatibility. For such a large amount of JavaScript code, tuning is a bit painful.