CKEditor + SWFUpload powerful Editor

Source: Internet
Author: User
Tags bbcode

CKEditor + SWFUpload powerful Editor

The powerful functions of CKEditor burst tables are obvious to all. It is called the most powerful online editor. You only need to copy files to the project and add references, in a piece of code, you can turn an ordinary textarea into a gorgeous editor.

The so-called one copy, one drag, one change will be done

However, normal CKEditor generates dangerous symbols such as <,>. When using, you must set the ValidateRequest attribute of the tag in the header of the page to false.

Configure requestValidateMode = "2.0" for the httpRuntime node in the WebConfig file. Otherwise, an error is returned.

In this way, although the function is implemented, it may cause XSS cross-site scripting attacks, which is very dangerous.

Therefore, the common CKEditor is generally used by the website administrator (=. = The Administrator should not do some dangerous things)

The UBB compiler is used for users.

Many UBB compilers can be found on the Internet, but this function is integrated in CKEditor, so it is easy to use.

Enter the topic

CKEditor3.6.5 (the function of UBB is not found in the latest CKEditor version = is it depressing that the wrong package is not found ):

Download CKEditor3.6.5 and the files to be used on the following pages:

------------------------------------------ Split line ------------------------------------------

Free in

The username and password are both

The specific download directory is available in/July 6,/July 7,/CKEditor + SWFUpload, which provides a powerful Editor/

For the download method, see

------------------------------------------ Split line ------------------------------------------


The procedure is as follows:


2. you must have a textarea text field on your page. After obtaining the id (Here we use editor1 as an example), add a js Code after this text field, or in window. the same is added to onload ().

3.on the bbcode.htm page, right-click the source and find the js Code behind textarea.

Here, I will post it to the public (say hello to everyone. =)

<Script type = "text/javascript">
// <! [CDATA [

// Replace the <textarea id = "editor"> with an CKEditor
// Instance, using the "bbcode" plugin, shaping some of
// Editor configuration to fit BBCode environment.
CKEDITOR. replace ('editor1 ',
ExtraPlugins: 'bbcode ',
// Remove unused plugins.
RemovePlugins: 'bidi, button, dialogadvtab, div, filebrowser, flash, format, forms, horizontalrule, iframe, indent, justify, liststyle, pagebreak, showborders, stylescombo, table, tabletools, templates ',
// Width and height are not supported in the BBCode format, so object resizing is disabled.
DisableObjectResizing: true,
// Define font sizes in percent values.
FontSize_sizes: "30/30%; 50/50%; 100/100%; 120/120%; 150/150%; 200/200%; 300/300% ",
['Source', '-', 'save', 'newpage', '-', 'undo ', 'redo'],
['Find ', 'replace', '-', 'selectall', 'removeformat'],
['Link', 'unlink', 'image', 'smiley ', 'specialchar'],
['Bold ', 'italic', 'underline'],
['Numberlist', 'bulletedlist', '-', 'blockquote'],
// Strip CKEditor smileys to those commonly used in BBCode.
Comment ',
Comment ',
'Cry_smile.gif ', 'kiss.gif'
'Smiel', 'sad ', 'wink', 'laugh', 'cheeky ', 'blup', 'surprise ',
'Enabled', 'angel', 'Cool ', 'crying', 'Kiss'


4. Now you have to replace CKEDITOR. replace ('editor1', this editor1 with the id of the custom text field.

Now, open the test page again to see if textarea has become an UBB compiler.

Note that textarea is replaced with an editor instead of a text field.

You cannot use window, getElementById ("editor1"). value; or $ ("# editor1"). val () to obtain the input value.

Instead, use

Var oEditor = CKEDITOR. instances. editor1;

OEditor. getData ();

This method is used to obtain

Settings are controlled through oEditor. setData ();

Enter a few words, add a dot style, and then convert it to the source code mode. The legendary ubb code appears ~

Finally, because many js files are referenced in my project and are required, I don't know how to drop them .. CKEDITOR keeps reporting errors, and there are more than one.

Finally, I had to try another package, but it was amazing to use it, but there was always a NotSupportedError error,

Alas, in the end, I went crazy and clicked in the browser, so the message was not displayed... No worries

Hope you know what is going on. Please educate me !!

CKEditor usage

CKEditor works with KCFinder to remotely manage images and publish images and texts.

For more details, please continue to read the highlights on the next page:

  • 1
  • 2
  • 3
  • Next Page
[Content navigation]
Page 1: CKEditor Configuration Page 7: SWFUpload Configuration
Page 1: image receiving process in the background

Related Article

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: 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.