FCKeditor 2.6.5 ASP Environment Installation Configuration usage Instructions _ Web Editor

Source: Internet
Author: User
Tags character set file upload relative
(1) Streamlining, "throat", a lot of documents is also a hidden danger. FCKeditor support a variety of server scripting language, when the actual use of the time we can not use so many files, we need to be streamlined according to their needs.
For ASP systems:

FCKeditor root directory, only keep "fckeditor.asp,fckconfig.js,fckeditor.js,fckpackager.xml,fckstyles.xml,
Fcktemplates.xml "These files as well as the editor directory. Deletes the sample directory "_samples".
Only the "ASP" directory is retained under the "Fckeditor\editor\filemanager\connectors" directory, and other directories and files are deleted.

(2) Modify the file upload using the Script Program (language).

The default FCKeditor file upload program for ASP, if it is used in ASP system, then no longer need to modify.

If it is used in the PHP system, you need to make the following changes, open the Fckconfig.js
Found it:
var _filebrowserlang ge = ASP
var _quickuploadlang ge = ASP
Change into:
var _filebrowserlang ge = php
var _quickuploadlang ge = php

(3) Open File upload, modify file upload directory.

For ASP systems:
Open fckeditor\editor\filemanager\connectors\asp\config.asp
Enable File Upload:

Found it:
Configisenabled = False

Change into:
configisenabled = TR

Set up upload directory:

Found it:
Configuserfilespath = "/admin/uppic/"
Change into:
Configuserfilespath = "Custom Path"

For PHP Systems:
Open fckeditor/editor/filemanager/browser/default/connectors/php/config.php
Enable File Upload:

Found it:
$Config [Enabled] = False

Change into:
$Config [Enabled] = tr

Set up upload directory:

Found it:
$Config [Userfilespath] =/userfiles/
Change into:
$Config [Userfilespath] = Custom Path

(4) Modify the upload file naming method.

FCKeditor upload file, file name with the original filename, if you want to adopt a custom file naming method (such as, then name), you can modify the following
Party:

For ASP systems:
Open fckeditor\sample\edit\editor\filemanager\connectors\asp\commands.asp

Found it:
sFileName = Sanitizefilename (sfilename)

Change the sentence to a custom file naming format, for example:

Dim rndstr
Randomize
Rndstr = Cstr (Fix (9000*rnd () +1000) produces a random number
sFileName =year (date) &month (date) &day (date) &hour (time) &minute (time) &second & "." &
**tension

For PHP Systems:
Open fckeditor\editor\editor\filemanager\connectors\php\commands.php

Found it:
$sOriginalFileName = $sFileName;

Precede the sentence by adding:

Initialize seed
$sstr =split ("", Microtime (), 5);
$seed = $sstr [0]*10000;
Initializing random number generators with seeds
Srand ($seed);
Generate random numbers within a specified range
$random =rand (1000,10000);
The file name that is synthesized immediately
$sFileName = Date ("Ymdhis", Time ()). $random. ". $**tension;


(5) FCKeditor the method of reference in the program.

For ASP systems:
Need to include the following header file
<!--#incl? File= "Fckeditor/fckeditor.asp"-->
Add the following code in the location where the editor is located:
<%
Dim Ofckeditor
Set ofckeditor = New FCKeditor
Ofckeditor.basepath = "/fckeditor/" The path must be relative to the site root directory, set the error editor
Will not display

ofckeditor.toolbarset= "Default"
Ofckeditor.width = "98%"
ofckeditor.height= "500px"

Ofckeditor.val = "" Set default value
Ofckeditor.create the ID of the "shangpin_description" editor, which is equivalent to the name attribute value of the input label, here is
Shangpin_description
%>

For PHP:
Add the following code in the location where the editor is located:
<?php
Incl? ("fckeditor/fckeditor.php"); Header file
$oFCKeditor = new FCKeditor ("Shangpin_description"); The ID of the editor, equivalent to the input label
Name property value, this is Shangpin_description
$oFCKeditor->basepath= "/fckeditor/"; Set FCKeditor path

$oFCKeditor->toolbarset = "Default";
$oFCKeditor->width= "98%";
$oFCKeditor->height= "500px";

$oFCKeditor->val= ""; Set default values
$oFCKeditor->create ();
?>

(6) Get the data in the FCKeditor.

For server-side scripting, get the editor ID as the Name property value of the input label, for example:

Reqst in ASP ("Shangpin_description"), $_reqst["Shangpin_description" in PHP

JS in the use of Fckeditorapi.getinstance (shangpin_description). getxhtml (TR) gets the corresponding value of shangpin_description





ASP configuration for CKEditor

Search on the internet for a long time finally found! O (∩_∩) o haha ~
First, the use of methods:

1. Introduction of CKEditor Core file in page
<script type= "Text/javascript" src= "Ckeditor/ckeditor.js" ></script>

2. Insert HTML controls where you use the editor <textarea>

<textarea id= "TextArea1" cols= "rows=" "2" class= "CKEditor" ></textarea>

If it is a asp.net environment, you can also use server-side controls <TextBox>

<asp:textbox id= "tbcontent" runat= "Server" textmode= "MultiLine" class= "CKEditor" ></asp:TextBox>

Note Add class= "CKEditor" to the control.

3, replace the corresponding control into editor code

<script type= "Text/javascript" >
Ckeditor.replace (' TextArea1 ');
If you are using a server-side control in a asp.net environment <TextBox>
Ckeditor.replace (' tbcontent ');
If the <TextBox> control is in the master page, write this
Ckeditor.replace (' <%=tbcontent.clientid.replace "(" _ "," $ ")%> ');
</script>

4. Configuration Editor

The CKEditor configuration is centralized in the Ckeditor/config.js file, and the following are some common configuration parameters:

Interface language, default to ' en '

Config.language = ' ZH-CN ';

Set width height

Config.width = 400;

Config.height = 400;

Editor style, there are three kinds: ' Kama ' (default), ' office2003 ', ' v2 '

Config.skin = ' v2 ';

Background color

Config.uicolor = ' #FFF ';

Toolbars (base ' basic ', almighty ' full ', custom) plugins/toolbar/plugin.js

Config.toolbar = ' Basic ';

Config.toolbar = ' full ';

This will match:
Config.toolbar_full = [
[' Source ', '-', ' Save ', ' newpage ', ' Preview ', '-', ' Templates '],
[' Cut ', ' Copy ', ' Paste ', ' pastetext ', ' Pastefromword ', '-', ' Print ', ' spellchecker ', ' Scayt '],
[' Undo ', ' Redo ', '-', ' find ', ' Replace ', '-', ' selectall ', ' Removeformat '],
[' Form ', ' Checkbox ', ' Radio ', ' TextField ', ' Textarea ', ' Select ', ' Button ', ' ImageButton ', ' HiddenField '],
'/',
[' Bold ', ' italic ', ' underline ', ' Strike ', '-', ' subscript ', ' superscript '],
[' Numberedlist ', ' bulletedlist ', '-', ' outdent ', ' Indent ', ' Blockquote '],
[' Justifyleft ', ' justifycenter ', ' justifyright ', ' Justifyblock '],
[' Link ', ' Unlink ', ' Anchor '],
[' Image ', ' Flash ', ' Table ', ' horizontalrule ', ' smiley ', ' Specialchar ', ' pagebreak '],
'/',
[' Styles ', ' Format ', ' Font ', ' fontsize '],
[' TextColor ', ' bgcolor ']
];

Whether the toolbar can be shrunk
Config.toolbarcancollapse = true;

The location of the toolbar
config.toolbarlocation = ' top ';//optional: Bottom

Whether the toolbar is expanded by default
Config.toolbarstartupexpanded = true;

Cancel the drag to resize feature plugins/resize/plugin.js
config.resize_enabled = false;

Change the maximum height of the size

Config.resize_maxheight = 3000;

Change the maximum width of the size
Config.resize_maxwidth = 3000;

Change the minimum height of the size
Config.resize_minheight = 250;

Change the minimum width of the size
Config.resize_minwidth = 750;
Whether to automatically update data within an element when submitting a form that contains this editor
Config.autoupdateelement = true;

Whether the setting uses an absolute or relative directory, and a null relative directory
Config.basehref = ' '

Z-index Value of Editor
Config.basefloatzindex = 10000;

Set shortcut keys
Config.keystrokes = [
[CKEditor. ALT + 121/*f10*/, ' toolbarfocus '],//Get focus
[CKEditor. ALT + 122/*f11*/, ' elementspathfocus '],//element focus

[CKEditor. SHIFT + 121/*f10*/, ' ContextMenu '],//Text menu

[CKEditor. CTRL +/*z*/, ' undo '],//Undo
[CKEditor. CTRL +/*y*/, ' redo '],//Redo
[CKEditor. CTRL + CKEditor. SHIFT +/*z*/, ' redo '],//

[CKEditor. CTRL +/*l*/, ' link ',//link

[CKEditor. CTRL +/*b*/, ' bold '],//Bold
[CKEditor. CTRL +/*i*/, ' italic '],//Italic
[CKEditor. CTRL +/*u*/, ' underline '],//Underline

[CKEditor. ALT + 109/*-*/, ' Toolbarcollapse ']
]

Setting a shortcut key may conflict with the browser shortcut key plugins/keystrokes/plugin.js.
Config.blockedkeystrokes = [
CKEditor. CTRL +/*b*/,
CKEditor. CTRL +/*i*/,
CKEditor. CTRL +/*u*/
]

Sets the value plugins/colorbutton/plugin.js of the background color of the elements in the edit.
Config.colorbutton_backstyle = {
element: ' Span ',
Styles: {' background-color ': ' # (color) '}
}

Sets the value of the foreground color plugins/colorbutton/plugin.js
Config.colorbutton_colors = ' 000,800000,8b4513,2f4f4f,008080,000080,4b0082,696969,b22222,a52a2a,daa520,

006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,

A9a9a9,ffa07a,ffa500,ffff00,00ff00,afeeee,add8e6,dda0dd,d3d3d3,fff0f5,

Faebd7,ffffe0,f0fff0,f0ffff,f0f8ff,e6e6fa,fff '

Whether to display the "other colors" option when you select a color plugins/colorbutton/plugin.js
Config.colorbutton_enablemore = False

The foreground color default value of the block is set Plugins/colorbutton/plugin.js
Config.colorbutton_forestyle = {
element: ' Span ',
Styles: {' color ': ' # (color) '}
};

The CSS file you need to add here adds an absolute path to use relative paths and Web sites
Config.contentscss = './contents.css ';

Text direction
config.contentslangdirection = ' RTL '; From left to right

CKEditor configuration file If you do not want to configure a blank
Ckeditor.replace (' myfiled ', {customconfig: './config.js '});

Background color Plugins/dialog/plugin.js The interface edit box
Config.dialog_backgroundcovercolor = ' rgb (255, 254, 253) '; can set reference
Config.dialog_backgroundcovercolor = ' white '//default

The opacity value of the background should be between: 0.0~1.0 Plugins/dialog/plugin.js
config.dialog_backgroundcoveropacity = 0.5

The adsorption distance of the border when moving or changing elements: pixel Plugins/dialog/plugin.js
Config.dialog_magnetdistance = 20;

Whether to reject local spelling checker and prompt defaults to deny current Firefox only and Safari support Plugins/wysiwygarea/plugin.js.
Config.disablenativespellchecker = True

Perform table editing functions such as adding rows or columns currently only Firefox supports Plugins/wysiwygarea/plugin.js
Config.disablenativetablehandles = true; Default is not open

Whether to turn on the size of the picture and table function config.disableobjectresizing = true;
Config.disableobjectresizing = false//default to open

Set HTML Document type
Config.doctype = ' <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" ";

Do you want to render the editing area Plugins/editingblock/plugin.js
Config.editingblock = true;

Labels generated by carriage returns in the editor
Config.entermode = CKEditor. enter_p; Optional: Ckeditor.enter_br or Ckeditor.enter_div

Whether to use HTML entities for output Plugins/entities/plugin.js
Config.entities = true;

Define more entities Plugins/entities/plugin.js
config.entities_additional = ' #39 '; Where the # replaces &

Whether to convert some characters that are difficult to display to the corresponding HTML character plugins/entities/plugin.js
Config.entities_greek = true;

Convert some Latin characters to HTML plugins/entities/plugin.js
Config.entities_latin = true;

Convert some special characters to ASCII character Furu "This is Chinese: Chinese." Convert to ' This is Chinese: Chinese. ' Plugins/entities/plugin.js
Config.entities_processnumerical = false;

Add New Component
Config.extraplugins = ' Myplugin '; Non-default only example

Use high-color plugins/find/plugin.js when searching
Config.find_highlight = {
element: ' Span ',
Styles: {' background-color ': ' #ff0 ', ' Color ': ' #00f '}
};

Default font name Plugins/font/plugin.js
Config.font_defaultlabel = ' Arial ';

Font editing character set can add commonly used Chinese characters: XXFarEastFont-Arial, italics, boldface, etc. plugins/font/plugin.js
Config.font_names = ' Arial; Times New Roman; Verdana ';

Default style for text plugins/font/plugin.js
Config.font_style = {
element: ' Span ',
Styles: {' font-family ': ' # (family) '},
Overrides: [{element: ' font ', attributes: {' face ': null}}]
};

Font default size Plugins/font/plugin.js
Config.fontsize_defaultlabel = ' 12px ';

Optional font size for font editing plugins/font/plugin.js
config.fontsize_sizes = ' 8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/ 26px;28/28px;36/36px;48/48px;72/72px '

The style to use when setting the font size plugins/font/plugin.js
Config.fontsize_style = {
element: ' Span ',
Styles: {' font-size ': ' # (Size) '},
Overrides: [{element: ' font ', attributes: {' size ': null}}]
};

Whether to force copied content to remove the format plugins/pastetext/plugin.js
Config.forcepasteasplaintext =false//No removal

Whether to force "&" instead of "&" Plugins/htmldataprocessor/plugin.js
Config.forcesimpleampersand = false;

Format the address label Plugins/format/plugin.js
Config.format_address = {element: ' address ', attributes: {class: ' Styledaddress '}};

Automatic formatting of div tags plugins/format/plugin.js
Config.format_div = {element: ' div ', attributes: {class: ' Normaldiv '}};

Automatically format the H1 label Plugins/format/plugin.js
Config.format_h1 = {element: ' H1 ', attributes: {class: ' ContentTitle1 '}};

Automatically format the H2 label Plugins/format/plugin.js
Config.format_h2 = {element: ' H2 ', attributes: {class: ' ContentTitle2 '}};

Automatically format the H3 label Plugins/format/plugin.js
Config.format_h1 = {element: ' H3 ', attributes: {class: ' ContentTitle3 '}};

Automatically format the H4 label Plugins/format/plugin.js
Config.format_h1 = {element: ' H4 ', attributes: {class: ' ContentTitle4 '}};

Automatically format the H5 label Plugins/format/plugin.js
Config.format_h1 = {element: ' h5 ', attributes: {class: ' ContentTitle5 '}};

Automatically format the H6 label Plugins/format/plugin.js
Config.format_h1 = {element: ' h6 ', attributes: {class: ' ContentTitle6 '}};

Automatic formatting of P tags plugins/format/plugin.js
Config.format_p = {element: ' P ', attributes: {class: ' Normalpara '}};

Automatically format the pre label Plugins/format/plugin.js
Config.format_pre = {element: ' Pre ', attributes: {class: ' Code '}};

Display plugins/format/plugin.js on the toolbar with a semicolon-delimited label name
Config.format_tags = ' P;h1;h2;h3;h4;h5;h6;pre;address;div ';

Whether to use full HTML editing mode if used, its source code will contain:Config.fullpage = false;

Whether to ignore null characters in a paragraph if not ignored, the character will be represented as "" Plugins/wysiwygarea/plugin.js
Config.ignoreemptyparagraph = true;

Whether to clear both sides of the <a> label when clearing the link properties in the Picture property box Plugins/image/plugin.js
Config.image_removelinkbyemptyurl = true;

A comma-delimited set of label names displayed in a hierarchical nesting in the lower-left corner of the plugins/menu/plugin.js.
config.menu_groups = ' Clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image, Flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea ';

Delay when displaying submenus, units: Ms Plugins/menu/plugin.js
Config.menu_submenudelay = 400;

When you execute the new command, the contents of the editor Plugins/newpage/plugin.js
config.newpage_html = ';

When you copy text from Word in, do you want to format text to remove it plugins/pastefromword/plugin.js
Config.pastefromwordignorefontface = true; Default to ignore formatting

Whether to use Config.pastefromwordkeepsstructure = false;

Do you want to remove formatting when you paste content from Word plugins/pastefromword/plugin.js
Config.pastefromwordremovestyle = false;

Corresponds to the type of background language to format the HTML content of the output, which defaults to null
Config.protectedSource.push (/<\?[ \S\S]*?\?&GT;/G); PHP Code
Config.protectedSource.push (//g); ASP Code
Config.protectedSource.push (/(]+>[\s|\s]*?<\/asp:[^\>]+>) | (]+\/>)/gi); asp.net Code

Label inserted when entering: Shift+enter
Config.shiftentermode = CKEditor. enter_p; Optional: Ckeditor.enter_br or Ckeditor.enter_div

An optional expression replaces the character plugins/smiley/plugin.js.
Config.smiley_descriptions = [
':) ', ':(', ';) ', ':D ', ':/', ':P ',
'', '', '', '', '', '',
'', ';(', '', '', '', '',
', ': Kiss ', '];

The corresponding expression picture plugins/smiley/plugin.js
Config.smiley_images = [
' Regular_smile.gif ', ' sad_smile.gif ', ' wink_smile.gif ', ' teeth_smile.gif ', ' confused_smile.gif ', ' tounge_smile.gif ' ,
' Embaressed_smile.gif ', ' omg_smile.gif ', ' whatchutalkingabout_smile.gif ', ' angry_smile.gif ', ' angel_smile.gif ', ' Shades_smile.gif ',
' Devil_smile.gif ', ' cry_smile.gif ', ' lightbulb.gif ', ' thumbs_down.gif ', ' thumbs_up.gif ', ' heart.gif ',
' Broken_heart.gif ', ' kiss.gif ', ' envelope.gif '];

The address of the expression plugins/smiley/plugin.js
Config.smiley_path = ' plugins/smiley/images/';

When the page is loaded, the edit box gets the focus immediately plugins/editingblock/plugin.js plugins/editingblock/plugin.js.
Config.startupfocus = false;

When loading, in what way edit source and WYSIWYG "source" and "WYSIWYG" plugins/editingblock/plugin.js.
Config.startupmode = ' WYSIWYG ';

Displays the border of the frame body when loading plugins/showblocks/plugin.js
Config.startupoutlineblocks = false;

Whether to load the style file plugins/stylescombo/plugin.js.
Config.stylescombo_stylesset = ' default ';
The following are optional
Config.stylescombo_stylesset = ' mystyles ';
Config.stylescombo_stylesset = ' mystyles:/editorstyles/styles.js ';
Config.stylescombo_stylesset = ' mystyles:http://www.example.com/editorstyles/styles.js ';

Index value at start
Config.tabindex = 0;

When the User Types tab, the number of spaces the editor passes, () is 0 o'clock, and the focus moves out of the edit box plugins/tab/plugin.js
config.tabspaces = 0;

The template plugins/templates/plugin.js is used by default.
config.templates = ' default ';

A comma-delimited template file plugins/templates/plugin.js.
Config.templates_files = [' Plugins/templates/templates/default.js ']

Whether the edit content will be replaced box is selected when the template is used Plugins/templates/plugin.js
Config.templates_replacecontent = true;

Theme
Config.theme = ' default ';

Number of record steps undone Plugins/undo/plugin.js
Config.undostacksize = 20;

Integrate Ckfinder in CKEditor, and note that Ckfinder's path selection is correct.
Ckfinder.setupckeditor (null, '/ckfinder/');
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: 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.