Online Web Editor

Source: Internet
Author: User

Bkheditor is an online web editor that has nothing to do with the browser, server, pure client, and the most simplified integration method. Bkheditor was just launched and won the praise of "cool" from bloggers. This document is used to describe the integration method in detail to make it easier for friends to understand and use it.

1. obtain and install the SDK
: Http://www.bokehou.com/tools/bkheditor/demo.html
Download Method: Download bkheditor.zip of 600k, and decompress it to get the bkheditor folder.
Installation Method: copy the bkheditor folder to any location on your website (bkheditor/demo.html is directly available ).

2. Import the "bkheditor. js" script file on your webpage,CodeFor example:

< Script Type = "Text/JavaScript" SRC = "X/y/z/bkheditor. js" > </ Script >

3. Generate the editor method directly at the desired webpage location. The Code is as follows:

< Div >
< Input Type = "Hidden" ID = "Hiddenid" Value = "<Font color = 'red'> initial HTML text 1 </font>"   />
< Script Type = "Text/JavaScript" >
Bkh_makeeditor ( " Hiddenid " , False, 1, 2 );
</ Script >
</ Div >

Bkh_makeeditor ("hiddenid", false) comes from "bkheditor. js" and is used to generate the editor,
1st parameter hiddenid: indicates the ID of a hidden field. The editor uses this parameter to access HTML data. When using a server control, make sure that this parameter is the clientid of the control. The first parameter bshowall: True indicates that it is initialized to a full-featured editor, and false indicates that it is initialized to a simple editor. The third parameter iheightindex is an integer between 1 and 5 to initialize the height of the editor, and the fourth parameter iwidthindex is an integer between 1 and 5 to initialize the width of the editor.
Advantage: users can directly view the editor, which is more intuitive.
Disadvantage: whether users do not edit the content, they need to import the editor, which is not conducive to improving the page performance.

4. Use the editor method as a dialog box. The Code is as follows::

< Button Onclick = "Bkh_openeditor ('tentid ')" > Open Editor </ Button >
< Div ID = "Contentid" Style = "Width: 480px; Height: 200px; overflow: Scroll; Border: # cccccc 1px solid ;"   >
< Font Color = 'Red' > Initial HTML text 3 </ Font >
</ Div >

Bkh_openeditor ('contentid') comes from "bkheditor. js" and is used to open the editor for the content area,
Contentid: the ID of a block with the "innerhtml" attribute. It is used by the editor to access HTML data. When using a server control, make sure that this parameter is the clientid of the control.
Advantage: You can only import the editor when you need to edit it, which is good for the page performance.
Disadvantage: You can only view the content directly, but not the editor directly. The editor is not intuitive when you open it.

5. other instructions
for integration methods, see the content of the "bkheditor/demo.html" file. Bkheditor also provides some necessary interfaces, such as "file browsing ", for details about how to use each interface, see the "readme.txt" file for each interface in the "bkheditor/Editor/dialog/interface" directory.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.