Usage notes and Advanced Application Ideas of cuteeditor

Document directory

• Preface 〗
• I. First impression
• Ii. Simplest Configuration
• 3. Basic (common) Configuration
• 4. More configurations
• V. Other advanced application ideas
• Vi. Precautions

Preface 〗

The following discussion is based on cuteeditor6.0. Its case can be downloaded here to "cuteeditor6.0 multi-language edition (Integrated LIC file )". Cuteeditor6.0 and cuteeditor5.0 are different from each other. The tutorials on cuteeditor on the Internet mostly confuse the two, or the software version is not explicitly stated in the tutorials, which is easy to confuse readers.

For example, cuteeditor5.0 has been tested and found that files with file names containing Chinese characters can be uploaded by default. In cutesoft_client \ cuteeditor \ Configuration \ SECURITY \ default. the <Security name = "filenamepattern"/> node does not exist in the config file. In addition, cuteeditor5.0 does not support the automatic name of the uploaded file as the time format, because in cutesoft_client \ cuteeditor \ Configuration \ SECURITY \ default. the config file does not contain the <Security name = "usetimestamprenameuploadedfiles"> true </Security> node. It does not work if you add it. Finally, cuteeditor5.0 does not run very well in the Firefox browser, and the cursor cannot be located in the editor. The solution is to switch to the HTML view first, and then switch back to the normal view, click the cursor in the editor to position the cursor in the editor.

The front-end of cuteeditor6.0 page cannot use the script gethtml () to get the editor content, because gethtml () does not exist at all. It is neither defined in the current page script nor can be found in the external link script, and cuteeditor5.0 can (even if some script methods exist in cuteeditor5.0, they may not always work in different browsers ). The blog Park uses a newer version of cuteeditor. The Front-End Script verifies the content of the Editor only through non-empty verification. Its code is as follows:

If (document. getelementbyid ('ce _ editor_edit_editorbody_id ')! = NULL & document. getelementbyid ('ce _ editor_edit_editorbody_id '). value = '')
{
Alert ("Enter the content! ");
Return false;
}

I. First impression

The first impression is described in eight words, namely, "powerful functions, flexible configuration ".

Ii. Simplest Configuration

The simplest configuration is to use the default configuration. After downloading the editor from the Internet and then dropping the editor in the corresponding directory under the root directory of the website. This is very suitable for users who use cuteeditor for the first time. He often wants to see what cuteeditor looks like when it runs.

Now let's talk about the simplest configuration. The real code of cuteeditor actually exists in two folders. The compiled code contains the bin directory (cuteeditor. DLL, cuteeditor. imageeditor. DLL, netspell. spellchecker. DLL, cuteeditor. LIC ,*. another folder is cutesoft_client. Among them, netspell. spellchecker. dll in the bin directory and many DIC files are required for spelling. whether to use it or not is determined freely.

Assume that the root directory of your website is wwwroot, drop the above two folders to the wwwroot directory, and create a file folder named "uploads" under the wwwroot directory (case-insensitive, of course, usually this folder is already in the cuteeditor case package), this is the default folder for the editor to upload files. The final website directory structure looks like the following:

Wwwroot/bin/cuteeditor. dll
Cuteeditor. imageeditor. dll
......

Wwwroot/cutesoft_client/cuteeditor/
Wwwroot/cutesoft_client/cuteeditor/configuration/
......

Now, add the cuteeditor. dll in the bin directory to the vs toolbox for ease of use. You do not need to write your own code or set attributes. After opening vs, right-click the "General" tab in the toolbox and select "select items". In the displayed dialog box, select the "Browse" button to find the cuteeditor under the bin directory. after adding the DLL, return to the vs window and find that the toolbox has the following control list. In addition, cuteeditor. imageeditor. dll can also be added in.

Drag the editor control to the page and right-click to view the attributes and events of the editor, as shown in.

At this time, you even run the page without setting any properties, and you will find everything works. Return to the website directory and find two more files: 1. wwwroot/bin/app_licenses.dll, 2. wwwroot/licenses. licx. If you look at the name, you will know that it is a software authorization file. You don't need to worry about it. Remember to upload these two files together when uploading the website to the server.

Now let's talk about how to get and set the editor content on the server and client.

Server end 〗
Get: String editorcontent = This. editor1.text
Set: This. editor1.text = "editor content ...... "

Client 〗
Get: var editorcontent = Document. getelementbyid ('<% = editor1.clientid %>'). gethtml ()
Set: Document. getelementbyid ('<% = editor1.clientid %>'). sethtml ("editor content ...... ")

The gethtml () and sethtml () client script methods are passed in cuteeditor5.0. version 6.0 is not supported (the content in the previous section is described), but the document can be used in this way. getelementbyid ('<% = editor1.clientid %> '). value, so some characters of the obtained value are encoded, so this method is used to verify whether the content input is acceptable. The blog editor uses this method to verify that the value is not empty.

3. Basic (common) Configuration

The default configuration is obviously not applicable in many cases. Now I want to talk about cuteeditor File Upload control. Cuteeditor can upload different types of files (images, Flash, audio and video, document files, etc.), limit the size and format of a single file, and store different types of files in different folders, you can also control the size of each folder. For example, files such as slices are uploaded to the wwwroot/uploads folder by default. the maximum size of a single image is 200 kb, and the maximum size of an image is 100 MB.

These configuration nodes can be found at wwwroot \ cutesoft_client \ cuteeditor \ Configuration \ SECURITY \ default. modify the config file to open the file. According to the node name, you should know what attributes are configured for each node. If you are not clear, please refer to my reference document.

Because the files to be uploaded in the editor are image files, I configure and describe the following according to a news publishing editor.

<Security name = "overwriteexistinguploadedfile"> true </Security>
<Security name = "usetimestamprenameuploadedfiles"> true </Security>
<Security name = "imagegallerypath"> ~ /Admin/newsimages </Security>
<Security name = "maximagesize"> 1024 </Security>
<Security name = "maximagefoldersize"> 1024000 </Security>
<Security name = "imagefilters">
<Item>. jpg </item>
<Item>. JPEG </item>
<Item>. gif </item>
<Item>. PNG </item>
</Security>

The configuration above indicates that the maximum size of a single image that can be uploaded is 1024 K (1 m), and the total size of the image to be uploaded is 1024000 K (1G ), you can upload images in JPG, JPEG, GIF, and PNG formats to the wwwroot/admin/newsimages folder. Set usetimestamprenameuploadedfiles to true to enable the uploaded image to be automatically renamed to the time format on the server, such as 201720090711154023805.jpg, instead of the original name. If overwriteexistinguploadedfile is set to true, the file with the same name is overwritten. If this option is not enabled, there are two images with the same name on the local computer. In fact, the image content is different and cannot be uploaded simultaneously. The same applies to other types of files.

In addition, you can modify the following three common attributes in the cuteeditor property list:

(1) autoconfigure = "simple" editor toolbar button shows the complexity (How many) option, Here select simple, that is, the editor interface with fewer buttons.
(2) customculture = "ZH-CN" for multi-language versions, you can set it to the corresponding language, which is set to "Chinese ".
(3) themetype = "office2003_bluetheme": Set the editor style. You can understand it from the theme of the window system.

4. More configurations

At the beginning, I said that the configuration of cuteeditor is flexible and there are many configuration options. On the one hand, we can modify some configurations in the vs attribute bar, you can also dynamically change attributes in the CS code. This is for an editor instance. You can also change the configuration files in the wwwroot \ cutesoft_client \ cuteeditor \ configuration file, these are usually global. For example, you can save the specified image in wwwroot/admin/newsimages as shown in the preceding figure. In this way, you can use the editor in several places, and the images are saved in the following folder. How to change it? What are the attributes of cuteeditor? Refer to the official document. There are too many configurations. I just learned a little bit about it.

In addition, you can see three files under wwwroot \ cutesoft_client \ cuteeditor \ Configuration \ Security: Admin. config, default. config, and guest. config, which are prepared for different user roles. For the configuration file used by each editor instance, you can change the securitypolicyfile attribute value in the Properties window of the cuteeditor control. In practical applications, users of different membership levels are allocated with different configuration files on the same page. On the one hand, you can select to display the corresponding panel based on user permissions, each panel is placed in an editor instance that calls different configuration files. Another better way is to change the attribute value of securitypolicyfile in the code.

V. Other advanced application ideas

(1) assign an upload folder to each user.

For example, if you use the cuteeditor in a multi-user Blog system, you will need this solution. Cnblogs.com is a case of using the cuteeditor. The following code stores the uploaded files of each user in the subfolder named by the user name under the uploads directory:

String username = session ["username"]. tostring ();
Fullpath = server. mappath ("uploads \") + username;
If (! Directory. exists (fullpath ))
{
Directory. createdirectory (fullpath );
}
This. editor1.setsecuritygallerypath ("~ /Uploads/"+ username );

(2) allocate different sizes of File Upload space to users of different levels.

For example, the free size allocated to users by QQ mobile hard drive is of course different from the charge. In some multi-user blog systems, to encourage some active bloggers, you can open green channels for some users to provide larger file storage space. Cuteeditor can implement this function. The implementation idea is to create multiple configuration files under the wwwroot \ cutesoft_client \ cuteeditor \ Configuration \ Security folder (three configuration files exist by default), each file corresponds to a user permission, then, on the page of the editor, dynamically change the securitypolicyfile attribute of the editor, and set the attribute value to the name of the corresponding configuration file under the security directory.

Vi. Precautions

(1) The file with Chinese characters in the file name cannot be uploaded.

Edit cutesoft_client \ cuteeditor \ Configuration \ SECURITY \ default. config File, find the node <Security name = "filenamepattern"/> and change it to <Security name = "filenamepattern"> ^ [a-zA-Z0-9 \. _ \ s-\ u4e00-\ u9fa5] + $ </Security>, and then save it.

(2) Authorization issues.

If the editor you are using does not have a license file, an authorization prompt will appear, affecting your normal use, please purchase a license. I use a special edition. Of course, it cannot be used for commercial purposes. The license file is the "licenses. licx" file under the root directory.

(3) An error occurred in the dialog box for uploading images to the editor after theme is set.

This error is A. Net running error. Based on the error message, you can know that the

(4) permission issues with the uploads directory.

The write permission of the Everyone user is enabled for the folder where the editor uploads files on the server.