[Phase 1] How to create your own website editor-challenge between CKEditor and UEditor

First, I would like to explain that due to frequent busy writing projects recently, I have never had time to sort out articles. Now I will share some of my experiences in the recent phase. This is the first phase. Next I will talk about ASP. NET Single-layer, three-layer, and multi-layer development enterprise site construction and specific requirements and operations, I hope you can learn something. PS: I support open source World and like everything about open source. If you like WindowsPhone development, you can talk about it in private. 650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029193423-0.gif "/>

Thank you, BKJIA's big blog manager, @ Li zijie @ Mi Jie @ mushroom sister. PS: they are very beautiful and very dedicated. 650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/20291924c-1.gif "/>

UEditor

First-1Go to the official website: http://ueditor.baidu.com/website/. click-here to download

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029191294-2.jpg "title =" NLL (WZ $ 1J2QQ ~ @~~ JHK) 0 ~ L.jpg "width =" 800 "height =" 600 "border =" 0 "hspace =" 0 "vspace =" 0 "style =" width: 800px; height: 600px; "/>

First-2.1,Here, you can select two download packages: UBuilder and Developer Edition.

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029195F4-3.jpg "title =" P3RN % Y44L5 ~ I _fnt0000000000009@8x.jpg "width =" 800 "height =" 600 "border =" 0 "hspace =" 0 "vspace =" 0 "style =" width: 800px; height: 600px; "/>

650) this. width = 650; "src ="/e/u/themes/default/images/spacer.gif "word_img =" file: // C: \ Users \ liangxiao \ AppData \ Roaming \ Tencent \ Users \ 729490254 \ QQ \ WinTemp \ RichOle \ regular "style =" url (/e/u/lang/zh-cn/images /localimage.png) no-repeat center; border: 1px solid # ddd "/> First-2.1,If you use this version, you can freely add or delete the effect in the editor you want.

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/20291a341-4.jpg "title =" lg9f21_al61_aex2_s1_1_0b21.jpg "/>

First-2.2,If you select the development edition, all the functions of the editor will be included. PS: the website encoding format and programming language options are as follows:

It is a different call of a js package, which is convenient for development and use. There is no big difference between others. PS: we can see from fireBug that BKJIA uses version 1.2.5.

It's just a matter of time. browser compatibility is not a joke. Be careful when you make a-year-old ship. 650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029194620-5.gif "/>

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029194443-6.jpg "title =" hvz5lda-f39i6y2f%r1j%0%72.jpg "/>

First-2.3,Due to the degree of freedom, I chose to use UBuilder to customize the desired features and click Download below.

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029193195-7.jpg "title =" (exc0v_rs1_1'k3lzww.m'iyl.jpg "/>

Second-1,Start new project development, as shown in,

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029192336-8.jpg "title =" _ 09 [THKQMY5HC (J] D ~ KS7UU.jpg "/>

Second-2,Since the following code is written, I will directly perform each step of the operation. You can follow the steps as follows,

650) this. length = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029194161-9.jpg "title =" B17XXFDMMMMXC5SB5W5B612.jpg "width =" 800 "height =" 600 "border =" 0 "hspace =" 0 "vspace =" 0 "style =" width: 800px; height: 600px; "/>

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029194G1-10.jpg "title =" 68l_btustme%2p_kne0mh%7.jpg "style =" width: 800px; height: 600px; "width =" 800 "height =" 600 "border =" 0 "hspace =" 0 "vspace =" 0 "/>

Second-3.1,Next, add the Ueditor package to the project, for example,

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029191135-11.jpg "title =" $ (] P %} 7F ~ S ~ '{Eif9s}v}57.jpg "/>

Second-3.2,Add a js reference in the head area. The PS: master page is shown in the following figure,

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">    <script src="ueditor/ueditor.config.js" type="text/javascript"></script>    <script src="ueditor/ueditor.all.js" type="text/javascript"></script></asp:Content>

Second-3.3,The next step is to write JavaScript, for example, PS: If you want to recognize the server control, you need to add the ClientID to convert it.

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/20291a935-12.jpg "title =" d1?%zn1'%eh%1@%]ypafpan.jpg "/>

Second-3.4,Now most of the operations have been basically completed. Here are some important points to note: I am working on. NET.

I don't know if the development language will have the same problem. Let's talk about it in. NET,

1. Add this attribute to the master page to ensure that textarea does not only display the framework, for example,

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/202919A21-13.jpg "title =" $ GQOIS @ [D @ 0 $8 JUEP % J3 ~ 8B.jpg "/>

2. Write such content in Web. config-> <system. web>. Because Microsoft's updates are too fast, you still need to add the relevant attributes of the past.

Meet current needs.

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029195201-14.jpg "title =" _r%7%6j'%qtv788q2%p%nzg.jpg "/>

Second-4,Now let's write an alert to pop up the textarea value, for example, PS: For your convenience, I will write it below.

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029196124-15.jpg "title =" Z ~ 20179nb1_x1_l1n(mr12xwa1_sv.jpg "/>

Second-5.1,Okay. Now let's preview it. Can you see it?

650) this. length = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029195625-16.jpg "title =" dr4pv1_c4kx(s21_rp46wa%5n.jpg "width =" 800 "height =" 600 "border =" 0 "hspace =" 0 "vspace =" 0 "style =" width: 800px; height: 600px; "/>

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/20291a360-17.jpg "title =" GHIMD {~ S5) [_ 2 EVXA] ~ DFQT.jpg "/>

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/20291912N-18.jpg "title =" 6 }~ 21OLK ~ Vr1_1_cg(w4t1_x.jpg "/>

Second-5.2,It seems that there is no problem. You can try it. 650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/20291954M-19.gif "/>

CKEditor

CKEditor, formerly known as FKEditor, is used by most overseas website editors because of its good compatibility.

There are not many problems with any versions of browsers, so we suggest using CKEditor if you want to pursue stability. In this case, the relative configuration is simple.

There is a lot of code, and there is no need for too much reference to write code. It has been integrated for you, so you should be able to see it clearly. 650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029192454-20.gif "/>

Figure 1,

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029193128-21.jpg "title =" cg(%%%om'%90%%e%n%_b8y%c.jpg "/>

Figure 2,

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/202919C31-22.jpg "title =" 9rlykt1_1q0truk7q81_321m.jpg "/>

Figure 3,

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029193942-23.jpg "title =" 5 ~ YGU6395GMBD7@5C(X5K7S.jpg "/>

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029191609-24.jpg "title =" @0noj%3%8@v%awf(%kmtw%u.jpg "/>

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/202919D40-25.jpg "title =" %6y9%k_1%4%py%f'r%%%xa%c.jpg "/>

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/20291a4L-26.jpg "title = "~ M2ivq0''%9vp%r5n4_d%cy.jpg "/>

Select item> browse and find the frequently used CKEditor. NET. dll to add it to the toolbox,

650) this. length = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/20291923B-27.jpg "title =" mf0dd6jww1bjp0000000000006d7p00000000lr1.jpg "width =" 342 "height =" 200 "border =" 0 "hspace =" 0 "vspace =" 0 "style =" width: 342px; height: 200px; "/>

Drag to the design page, for example,

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029191609-28.jpg "title =" 7hwaqxbhwyw.z5ke8wp0z7@2.jpg "/>

This is the end. To set the value, enter CKEditorControl1.Text = "your value" on the cs interface ";

As shown below,

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029191R4-29.jpg "title =" 05BU870ST ~ L0000t7s0000u9au0000l3.jpg "/>

Summary:

1. I personally feel that Baidu's UEditor is indeed very good, and all aspects of the UI are better than CKEditor;

2. The disadvantage is that CKEditor has much better compatibility than UEditor, which is also important for developers, because after all, most leaders use IE X.0

If you don't think about it, you will get an error. It is futile to show anything beautiful.

3. When developers use Firefox for development, they should also use several browsers to test whether there will be errors and bugs. After all, Firefox can be fully enabled AT the field, and other browsers will

Some cannot afford it. 650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/20291aE5-30.gif "/>

4. You can also study the usage of deployment and development in the UEditor documentation to see how to solve compatibility issues.

5. The UEditor is not perfect for displaying the UI. If you are interested, refer to Twitter'sBootstrapTo make your website more beautiful and

Stability: foreigners are still very powerful.

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/20291921b-31.jpg "title =" '%e%%3%%2%7kp63n1ckf1%d.jpg "/>

In the next few issues, I will talk about some basic operations on building a site in asp.net. 650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029194620-5.gif "/> a few days ago also made a personal blog site, as follows,

Address: http://www.liujinlan.cc/

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029195156-33.jpg "title =" zr%wt%xur9%d%6(%6(v%a% I .jpg "/>

The basic layer-3 architecture is used. In the subsequent tutorial, I will give you a brief explanation, so that you can create your own blog website. Okay, let's get here today,

We will see you later. 650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/2029193132-34.gif "/>

This article is from the "Liang Xiao Technology Center" blog, please be sure to keep this source http://liangxiao.blog.51cto.com/3626612/1262108