WYSIWYG text editor is now circulating on the internet has been a lot of, and are relatively good, personally, I have used the following:
· The first contact is ewebeditor, used in my graduation design, it was by the way, for such things also have no understanding, now this editor has been quite fierce;
· Later, the work used Fckedier, the reason is very simple, This text editor already has a corresponding ASP.net server-side control. Encapsulation is very good, but after all, is a packaged control, there are certain limitations, and the current text editor has been completely revised, and now the name is Ckedier, now the company's project is also used this, for the same reason, there are encapsulation , strong enough, but these two text editors I personally do not like, the reason can not say, may be too large, for too large things I generally do not love;
· In the previous company with two projects, in the project used Kindeditor, this is seen on the Zcool, quite small and beautiful, plug-in interface also do well, then the project is to use ASP.net MVC, so the server-side control has nothing to worry about, and is the project of their own, must want to do some of their own attempts to come to the conclusion that this is a good text editor, and her name as amiable.
· Forget to see xheditor there, is a new WYSIWYG text editor, feel smaller than Kindediter, based on jquery, but the common features are, and the plug-in interface is very good (perhaps other better but I do not know ^), API documentation is also very good, basically do not need to think how to understand, provide a few sets of skin also do very good and concise, very good and interface collocation, as a kind of try me to use in the background of their own this blog. Before using the version of 1.0, found in the chrome1.7+ version of the file can not upload the bug, yesterday in a group of people asked this text edit the plug-in how to do, give people the answer after their own official website to see, found that there are updates, and has fixed this bug (the uploaded picture filename is in Chinese as if there is still a problem ...). , previously not very concerned about the bug has also been fixed, so also made a decisive update (there would have been thinking about the kindediter, now it seems not).
about Xheditor:
Official home: http://xheditor.com/
Demo Demo: Http://xheditor.com/demo
API Documentation: Http://xheditor.com/manual
PS: Use this editor, combined with another component Syntaxhighlighter (a JS component for highlighting code text) I made a simple plugin, that is, you can insert a piece of code in the text editing, and then highlight the code. The plain thing is to enter the string and then make the necessary changes to the string and insert it into the text editor where the cursor is located--! , using xheditor provided by the plug-in interface, 32 can handle the birds, the plug-in code is as follows:
1, the first definition of plug-in style, specifically, is to define a CSS class, the code is roughly as follows:
CSS code that defines plug-in styles
Copy Code code as follows:
<style type= "Text/css" >
. Coderplugin {<br>/* Define the picture of the plugin button, find one yourself.
Background:transparent URL (.. /.. /images/scriptcode.png) no-repeat 16px 16px;
BACKGROUND-POSITION:2PX 2px;
}
</style>
2, then the definition of plug-ins, first determine the name of the plug-in (here named Higlighe), and then define the relevant parameters to create (see Xheditor API document), which has a name of C parameter, refers to the plug-in CssClass, The above definition of the class here is used, the name of E is the focus of the parameters, the implementation of the logic of Plug-ins, in which often need to call to the Xheditor API, so write side check is the code, roughly as follows:
Define JavaScript code for Plug-ins
Copy Code code as follows:
Custom Plug-ins for text editors
var coderplugin = {
Highlight: {
C: ' Coderplugin ',
T: ' Insert code ',
S:null,
H:1,
E:function () {
var _this = this;
var selecthtml = "<select id= ' xhecodelanguages ' >";
selecthtml + = "<option value= ' C # ' >C#</option>";
selecthtml + = "<option value= ' JavaScript ' >JS</option>";
selecthtml + = "<option value= ' css ' >CSS</option>";
selecthtml + = "<option value= ' sql ' >SQL</option>";
selecthtml + = "<option value= ' html ' >HTML</option>";
selecthtml + = "<option value= ' xml ' >XML</option>";
selecthtml = "</select>";
var jTest = $ (' <div><b> Please enter code </b> ' + selecthtml + ' </div><div><textarea id= " Xhetestinput "style=" width:480px;height:320px; " ></textarea></div><div style= "text-align:right;" ><input type= "button" id= "Xhesave" value= "to Determine"/></div> ");
var jtestinput = $ (' #xheTestInput ', jTest), Jsave = $ (' #xheSave ', jTest);
Jsave.click (function () {
var inputcode = Jtestinput.val ();
Inputcode = "<div style= ' border:solid #ccc 1px;width:98%;overflow:auto; ' > "
+ "<div style= ' background-color: #ddd;" Border-bottom:solid 1px #ccc; Line-height:1.5em; text-indent:0.5em; ' > "+ $ (" #xheCodeLanguages "). Val () + code </div>
+ "<pre class= ' brush:" + $ ("#xheCodeLanguages"). Val () + "' >"
+ Inputcode.replace (/</g, "<"). Replace (/>/g, ">")
+ "</pre>"
+ "</div>";
_this.loadbookmark ();
_this.pastehtml (Inputcode);
_this.hidepanel ();
return false;
});
_this.showdialog (jTest);
}
}
};
3, the use of custom plug-ins, here as long as the xheditor of a parameter to assign value, we define a good plug-in to the past OK, the code is roughly as follows (here only the parameters to invoke Plug-ins, generally will not only set this parameter, will set the file upload related parameters):
Invoke JavaScript code for custom Plug-ins
Copy Code code as follows:
$ ("#yourTextarea"). Xheditor ({
Plugins:coderplugin
});
4, finished, use the approximate effect as follows:
After all, it is a relatively young text editor, but the personal favorite is based on the jquery development of this (there may be a lot of people do not like this), look forward to this component constantly improve!
