In the tinymce online editor, JavaScript is saved by pressing CTRL + S.

I have also used several editors, such as fck and cutedtor. Most of them provide excellent functions and a wide range of plug-ins. However, I still think the tinymce online editor is easy to use. It is built with pure JS client scripting technology and is a lightweight Web text editing control with extremely fast loading speed, tinymce is a free software released based on lgpl license. You can use it for commercial applications.

Because the online editor is required to create a blog system, I found the tinymce online editor. I used Google's Gmail before, there is a press Ctrl + S shortcut to save the mail function, because at that time it was not clear about some of the functions of those editors, the editor structure is not clear, I don't know how to use debugging tools such as IE developer toolbar and firebug. At that time, I felt that Google was very good, and CTRL + S saved that function and ran it in ff, in FF browser, pressing CTRL + S is the pop-up dialog box for modifying webpages by default, which makes me more curious. Can JavaScript still prevent Ctrl + S from saving the shortcut keys of webpages in the browser, it's so awesome! Next we will use the tinymce editor to implement an asynchronous storage by pressing CTRL + s using AjaxArticleThis is also the need of my blog system.

An online editor generally creates an ifrmae, which is equivalent to a page for separate control and sets the ifrmae's designMode = "on" in the setting mode. Tinymce configures some parameters through preliminary configuration. It mainly transmits a textarea object and hides these textarea during initialization, obtain the width and height of the original textarea and create a new ifrmae object. Let's first use the IE developer toolbar to look at some structures created in this editor.

The red box marks the textare text input control placed on our page. Here is the ASP. NET Server Control, and the content marked in the green box is automatically generated by tinymce. We can see that the content in the box is an IFRAME, and the body in it is the content of our editor, it automatically initializes the content of the specified textare. The ifrasme number adds '_ ifr' to the ID of the specified textare control and the designMode = "on ". Therefore, we need to press Ctrl + S in the online editor to implement saving, which is to listen to the events in the ifame and associate it with our custom method, which can be an Ajax request server to save s, you can also execute other operations in seconds. Then I will provide a complete demo.

<textarea cols="77" rows="4" style="width: 650px; height: 77px;" id="txtContentEditor">In this case, press Ctrl + S to try?</textarea>

The above is a completed example. Because tinymce supports JavaScript, I Will Initialize an editor with a script in the editor. This is all the editors in my blog, some Function plug-ins are unavailable. Let's take a look at how the script is written. paste it first.Code:

< Script Type = " Text/JavaScript " SRC = " /Tiny_mce/tiny_mce.js " > < / SCRIPT>
< Script Type = " Text/JavaScript " >
VaR Editorid =   " Txtcontenteditor "
Tinymce. INIT ({
Mode: " Exact " ,
Elements: editorid,
Theme: " Advanced " ,
Language: " ZH " ,
Content_css: " /Tiny_mce/CSS/content.css " , Plugins: " Safari, pagebreak, style, layer, table, advhr, advimage, advlink, emotions, iespell, delimiter, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template, insertcode, uploadimage " ,
Theme_advanced_buttons1: " Formatselect, fontselect, fontsizeselect, separator, forecolor, backcolor, separator, bold, italic, underline, strikethrough, separator, bullist, numlist, separator, justifyleft, justifycenter " ,
Theme_advanced_buttons2: " Undo, redo, cut, copy, paste, separator, justifyleft, justifycenter, justifyright, separator, outdent, indent, removeformat, separator, Link, unlink, image, uploadimage, media, separator, insertcode, separator, code, fullscreen " ,
Convert_fonts_to_spans: True
});

Addevent (window, " Load " , Function (){
SetTimeout ( Function (){
VaR Content = Tinymce. getinstancebyid (editorid). getbody ();
VaR Editordocument = Document. All ? Content: Document. getelementbyid (editorid + " _ IFR " ). Contentdocument;
Addevent (editordocument, " Keydown " , Function (E) {editorkeydown (e )});
}, 1000 );
});

Function Editorkeydown (E)
{

VaR Num = E. Which ? E. Which: E. keycode;
If (E. ctrlkey && Num =   83 )
{
// Postarticle (); simulate ajax to save the article
Inserttoeditor ( " <Br/> saving... " );
SetTimeout ( Function (){
Inserttoeditor ( " <Br/> saved successfully !!! " );
}, 1000 );
If (Document. All)
{
Return   False ;
} Else E. preventdefault ();
}
}

Function Inserttoeditor (content)
{
Tinymce.exe ccommand ( ' Mceinsertcontent ' , False , Content );
}

Function Addevent (target, eventtype, func ){
If (Target. attachevent)
{
Target. attachevent ( " On " + Eventtype, func );

} Else   If (Target. addeventlistener)
{
Target. addeventlistener (eventtype, func, False );
}
Return   This ;
}
< / SCRIPT>

Tinymce. the init method does not need to be mentioned. The textare editor and the addevent method are first defined later, which is used separately to reuse and be compatible with all browsers, it should be noted that the associated event within FF needs to pass an event object, and IE can be directly obtained without passing the event, adding parameters for passing the event for compatibility, then, judge and obtain the key pressed by the keyboard. If CTRL is pressed and S (keycode = 83) is pressed, save the key. Here, we use setTimeout to simulate Ajax. Save the key, the reason for listening to keydown events is that keydown is triggered first in three events: keydown, keypress, and keyup, in addition, this event can only prevent event bubbles and default behaviors (within ff). This event also provides the most detailed information for getting the keyboard keys, other times may not be obtained (within ff), and some articles about JS events may be written later. Next, let's take a look at the most critical code in keydown, if (document. all) return false; this is the browser that determines whether it is the IE kernel, but the formal judgment should not be like this. It is written in this way to simplify it. Return false is the most common method to block events in IE. It is not described here. The following sentence is about processing non-ie kernel browsers. The E. preventdefault () method is used to prevent the default behavior of events. This method is actually a stranger and has been introduced as early as in jquery:

Use the preventdefault () method to cancel the default action. In some standard DOM browsers, if you dynamically Add the submit event of the associated form, it is not acceptable to write only the return false event. In ff, the submit event will still be added with preventdefault () method To prevent form submission.

Jquery code:

$ ("Form"). BIND ("Submit", function (event ){
Event. preventdefault ();
});

the default event behavior is canceled by using the preventdefault () method. This should be available in all Dom browsers that support WSC, but I have not tested it in Safari or opera, but at least in ff2.0 and Google browsers. Ff and Google Chrome press Ctrl + S on the page. By default, the "Save webpage" dialog box is displayed. The "preventdefault ()" dialog box can be used to prevent cancellation. Is it amazing. In this case, the event handling wit in the browser is first passed to the webpage and then passed to the browser, so the browser can use JavaScript to prevent default events in the webpage. However, it should be noted that FF seems that the event of the associated body is invalid, and the input text object of the associated non-text or textare is invalid. pressing CTRL + S is still the dialog box for the stored webpage, it is a bit strange, as if Ctrl + S is only a special shortcut key reserved for text or textare, and finally the Document Object of the Framework is associated with contentdocument . As long as the event can be associated and the default behavior of pressing CTRL + s can be canceled, the custom method can be executed by pressing CTRL + S in the editor, I am using Ajax to request the server to save the content in the editor, and can save the content without pressing CTRL + s in a timely manner without waiting for PostBack to return to the server, avoid the loss of writing articles in general without saving them instantly.

Others can be saved as long as the IFRAME editor uses this method by pressing CTRL + S. However, at the end of the writing, I tell you that it is not necessary to display Ctrl + S for saving, because the tinymce Online Editor provides a ready-made save plug-in, which is useful in our garden. Plugins: "safari, pagebreak, style, layer, table, save, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template, insertcode, uploadimage ", where Save is saved, press Ctrl + S to specify a save in the editor, and the post will be automatically sent back, but the page is refreshed -_-. The tinymce editor is easy to use and user-friendly. Even this function is provided in advance. However, I implemented it myself. I may be able to use other editors next time. I hope it will be useful to you.

This article is the author Jonllen It is provided as "the status quo" without any guarantee and has not been granted any rights. Original article addressHttp://www.jonllen.com/Article.aspx? Aid = 16