Today, the online editor was uploaded in the Asp environment, but it was invalid. I searched for a long time before I found this introduction. I am now backing up here. Friends who need it can refer to it (1) Simplify it. Too much words will lead to mistakes. Too much files is also a hidden danger. FCKEditor supports a variety of server scripting languages. When we actually use it, we can't use so many files at all. We need to streamline them according to our needs.
For ASP systems:
FCKEditor root directory, only retain fckeditor.asp, fckconfig.js, fckeditor.js, fckpackager.xml, fckstyles.xml,
fcktemplates.xml files and editor directory. Delete 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 script program (language) used to upload the file.
The default FCKEditor file upload program is asp. If it is used in the asp system, there is no need to modify it.
If it is used in PHP system, you need to make the following modifications and open fckconfig.js
turn up:
var _FileBrowserLang ge = asp
var _QuickUploadLang ge = asp
Change to:
var _FileBrowserLang ge = php
var _QuickUploadLang ge = php
(3) Turn on file upload and modify the file upload directory.
For ASP systems:
Open fckeditor/editor/filemanager/connectors/asp/config.asp
Enable file upload:
turn up:
ConfigIsEnabled = false
Change to:
ConfigIsEnabled = tr
Set up the upload and storage directory:
turn up:
ConfigUserFilesPath = /admin/uppic/
Change to:
ConfigUserFilesPath = Custom path
For PHP systems:
Open fckeditor/editor/filemanager/browser/default/connectors/php/config.php
Enable file upload:
turn up:
$Config[Enabled] = false
Change to:
$Config[Enabled] = tr
Set up the upload and storage directory:
turn up:
$Config[UserFilesPath] = /userfiles/
Change to:
$Config[UserFilesPath] = Custom path
(4) Modify the uploaded file naming method.
FCKEditor uploads files, the file name uses the original file name. If you want to use a custom file naming method (such as the name), you can modify it as follows
square:
For ASP systems:
Open fckeditor/sample/edit/edit/edit/filemanager/connectors/asp/commands.asp
turn up:
sFileName = SanitizeFileName( sFileName )
Change this sentence to a custom file naming format, for example:
dim RndStr
Randomize
RndStr = Cstr(Fix(9000*rnd()+1000)) generates a random number
sFileName =year(date)&month(Date)&day(Date)&hour(time)&minute(time)&second(time)&RndStr &. &
**tension
For PHP systems:
Open fckeditor/editor/editor/filemanager/connectors/php/commands.php
turn up:
$sOriginalFileName = $sFileName;
Included in front of this sentence:
// Initialize the seed
$sstr =split( ,microtime(),5);
$seed =$str[0]*10000;
// Initialize the random number generator using seed
srand($seed);
// Generate random numbers within the specified range
$random =rand(1000,10000);
// Synthesize the file name immediately
$sFileName = date(YmdHis, time()).$random...$**tension;
(5) How FCKEditor is referenced in the program.
For ASP systems:
Need to include the following header file
<!--#incl? file=fckeditor/fckeditor.asp-->
Add the following code to the editor location:
<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = /fckeditor/ This path must be relative to the root directory of the site. Set the error editor
Will not be displayed
oFCKeditor.ToolbarSet=Default
oFCKeditor.Width = 98%
oFCKeditor.Height= 500px
oFCKeditor.Val = Set default value
oFCKeditor.Create shangpin_description The id of the editor is equivalent to the name attribute value of the input tag, here is
shangpin_description
%>
For PHP:
Add the following code to the editor location:
<?php
incl?(fckeditor/fckeditor.php); // header file
$oFCKeditor = new FCKeditor(shangpin_description); // The editor's id is equivalent to the input tag
name attribute value, here is shangpin_description
$oFCKeditor->BasePath=/fckeditor/ ; //Set FCKeditor path
$oFCKeditor->ToolbarSet =Default;
$oFCKeditor->Width=98%;
$oFCKeditor->Height=500px;
$oFCKeditor->Val =; // Set the default value
$oFCKeditor->Create();
?>
(6) Get the data in FCKEditor.
For server-side scripting programs, just use the editor's id as the name attribute value of the input tag, for example:
Req st(shangpin_description) in ASP, $_REQ ST[shangpin_description] in PHP
Use FCKeditorAPI.GetInstance(shangpin_description).GetXHTML(tr) in JS to get the corresponding value of shangpin_description
ASP configuration of ckEditor
After searching online for a long time, I finally found it! O(∩_∩)O Haha~
1. How to use:
1. Introduce the ckeditor core file ckeditor.js in the page <head>
<script type=text/javascript src=ckeditor/ckeditor.js></script>
2. Insert HTML control <textarea> where you use the editor
<textarea id=TextArea1 cols=20 rows=2 class=ckeditor></textarea>
If it is an ASP.NET environment, the server-side control <TextBox> can also be used.
<asp:TextBox ID=tbContent runat=server TextMode=MultiLine class=ckeditor></asp:TextBox>
Note that class=ckeditor is added to the control.
3. Replace the corresponding control with editor code
<script type=text/javascript>
CKEDITOR.replace('TextArea1');
//If it is a server-side control <TextBox> used in ASP.NET environment
CKEDITOR.replace('tbContent');
//If the <TextBox> control is in the master page, write this way
CKEDITOR.replace('<%=tbContent.ClientID.Replace(_,$) %>');
</script>
4. Configure Editor
The configuration of ckeditor is concentrated in the ckeditor/config.js file. The following are some commonly used configuration parameters:
// Interface language, default to 'en'
config.language = 'zh-cn';
// Set width and height
config.width = 400;
config.height = 400;
// There are three types of editor styles: 'kama' (default), 'office2003', 'v2'
config.skin = 'v2';
// Background color
config.uiColor = '#FFF';
// Toolbar (basic 'Basic', all-round 'Full', custom) plugins/toolbar/plugin.js
config.toolbar = 'Basic';
config.toolbar = 'Full';
This will work with:
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']
];
//Can the toolbar be shrinkable
config.toolbarCanCollapse = true;
//The location of the toolbar
config.toolbarLocation = 'top';//Optional: bottom
//Whether the toolbar is expanded by default
config.toolbarStartupExpanded = true;
// Undrag drag to change the size function plugins/resize/plugin.js
config.resize_enabled = false;
//Change the maximum height of size
config.resize_maxHeight = 3000;
//Change the maximum width of size
config.resize_maxWidth = 3000;
//Change the minimum height of size
config.resize_minHeight = 250;
//Change the minimum width of size
config.resize_minWidth = 750;
// When submitting a form containing this editor, is it possible to update the data in the element automatically
config.autoUpdateElement = true;
// Set whether to use absolute or relative directories, empty or relative directories
config.baseHref = ''
// The z-index value of the editor
config.baseFloatZIndex = 10000;
//Set shortcut keys
config.keystrokes = [
[ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], //Get focus
[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //ElementsFocus
[ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //Text Menu
[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], //Revoke
[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //Redo
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], //
[ CKEDITOR.CTRL + 76 /*L*/, 'link' ], // Link
[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], //Bold
[ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], //Italic
[ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], //Underline
[ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]
]
//Setting shortcut keys may conflict with browser shortcut keys plugins/keystrokes/plugin.js.
config.blockedKeystrokes = [
CKEDITOR.CTRL + 66 /*B*/,
CKEDITOR.CTRL + 73 /*I*/,
CKEDITOR.CTRL + 85 /*U*/
]
//Set the value of the background color of the element in the edit plugins/colorbutton/plugin.js.
config.colorButton_backStyle = {
element : 'span',
styles : { 'background-color' : '#(color)' }
}
//Set the foreground color value 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 other color options when selecting color plugins/colorbutton/plugin.js
config.colorButton_enableMore = false
//The foreground color default value of the block is set to plugins/colorbutton/plugin.js
config.colorButton_foreStyle = {
element : 'span',
styles : { 'color' : '#(color)' }
};
//Add to add the CSS file you need to add here you can use the relative path and the absolute path of the website.
config.contentsCss = './contents.css';
//Text direction
config.contentsLangDirection = 'rtl'; //From left to right
//If you don't want to configure the configuration file, just leave it blank
CKEDITOR.replace( 'myfiled', { customConfig : './config.js' } );
//The background color of the interface editing box plugins/dialog/plugin.js
config.dialog_backgroundCoverColor = 'rgb(255, 254, 253)'; //Reference can be set
config.dialog_backgroundCoverColor = 'white' //Default
//The opacity value of the background should be between: 0.0 and 1.0 plugins/dialog/plugin.js
config.dialog_backgroundCoverOpacity = 0.5
//Unit adsorption distance unit of border when moving or changing elements: pixel plugins/dialog/plugin.js
config.dialog_magnetDistance = 20;
// Whether to reject local spell checking and prompts default to rejection Currently only firefox and safari support plugins/wysiwygarea/plugin.js.
config.disableNativeSpellChecker = true
//Table editing functions such as: Adding rows or columns is currently only supported by firefox for plugins/wysiwygarea/plugin.js
config.disableNativeTableHandles = true; //Default is not enabled
// Whether to enable the change size function of pictures and tables to config.disableObjectResizing = true;
config.disableObjectResizing = false //Default is enabled
//Set HTML document type
config.docType = '<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ;
//Whether to render the editing area plugins/editingblock/plugin.js
config.editingBlock = true;
//The tag generated by carriage return in the editor
config.enterMode = CKEDITOR.ENTER_P; //Optional: CKEDITOR.ENTER_BR or CKEDITOR.ENTER_DIV
//Whether to use HTML entities to output plugins/entities/plugin.js
config.entities = true;
//Define more entities plugins/entities/plugin.js
config.entities_additional = '#39'; // Where # replaces&
//Whether to convert some difficult-to-display characters to the corresponding HTML characters plugins/entities/plugin.js
config.entities_greek = true;
//Whether to convert some Latin characters to HTML plugins/entities/plugin.js
config.entities_latin = true;
//Whether to convert some special characters to ASCII characters, such as This is Chinese: Chinese. Convert to This is Chinese: Chinese. plugins/entities/plugin.js
config.entities_processNumerical = false;
//Add new components
config.extraPlugins = 'myplugin'; //Not default example only
//Use the highlight color plugins/find/plugin.js when searching
config.find_highlight = {
element : 'span',
styles : { 'background-color' : '#ff0', 'color' : '#00f' }
};
//The default font name plugins/font/plugin.js
config.font_defaultLabel = 'Arial';
//You can add commonly used Chinese characters when editing the character set: Song font, Kai font, bold font, and other plugins/font/plugin.js
config.font_names = 'Arial;Times New Roman;Verdana';
//The default style of text plugins/font/plugin.js
config.font_style = {
element : 'span',
styles : { 'font-family' : '#(family)' },
overrides : [ { element : 'font', attributes : { 'face' : null } } ]
};
//The default font size plugins/font/plugin.js
config.fontSize_defaultLabel = '12px';
//The font size optional when 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 plugins/font/plugin.js used when setting the font size
config.fontSize_style = {
element : 'span',
styles : { 'font-size' : '#(size)' },
overrides : [ { element : 'font', attributes : { 'size' : null } } ]
};
//Whether to force copy the content to remove the format plugins/pastetext/plugin.js
config.forcePasteAsPlainText =false //Not removed
//Whether to force & replace &plugins/htmldataprocessor/plugin.js
config.forceSimpleAmpersand = false;
//Format the address tag plugins/format/plugin.js
config.format_address = { element : 'address', attributes : { class : 'styledAddress' } };
//Automatically format the DIV tags plugins/format/plugin.js
config.format_div = { element : 'div', attributes : { class : 'normalDiv' } };
//Automatically format the H1 tag plugins/format/plugin.js
config.format_h1 = { element : 'h1', attributes : { class : 'contentTitle1' } };
//Automatically format the H2 tag plugins/format/plugin.js
config.format_h2 = { element : 'h2', attributes : { class : 'contentTitle2' } };
//Automatically format the H3 tag plugins/format/plugin.js
config.format_h1 = { element : 'h3', attributes : { class : 'contentTitle3' } };
//Automatically format the H4 tag plugins/format/plugin.js
config.format_h1 = { element : 'h4', attributes : { class : 'contentTitle4' } };
//Automatically format the H5 tag plugins/format/plugin.js
config.format_h1 = { element : 'h5', attributes : { class : 'contentTitle5' } };
//Automatically format the H6 tag plugins/format/plugin.js
config.format_h1 = { element : 'h6', attributes : { class : 'contentTitle6' } };
//Automatically format P tags plugins/format/plugin.js
config.format_p = { element : 'p', attributes : { class : 'normalPara' } };
//Automatically format the PRE tags plugins/format/plugin.js
config.format_pre = { element : 'pre', attributes : { class : 'code' } };
//Show plugins/format/plugin.js on the toolbar with semicolon-separated tag names on the toolbar
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
//If you use the complete html editing mode, the source code will include tags such as <html><body></body></html>, etc.
config.fullPage = false;
// Whether to ignore the empty characters in the paragraph. If not ignore them, the characters will represent plugins/wysiwygarea/plugin.js
config.ignoreEmptyParagraph = true;
//When clearing the link attributes in the picture properties box, do I clear the <a> tag plugins/image/plugin.js on both sides at the same time when clearing the link attributes in the picture properties box, Is it clearing the <a> tag plugins/image/plugin.js
config.image_removeLinkByEmptyURL = true;
//A set of comma-separated label names are displayed in the hierarchical nesting in the lower left corner 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 submenu, unit: ms plugins/menu/plugin.js
config.menu_subMenuDelay = 400;
//When executing a new command, the contents in the editor plugins/newpage/plugin.js
config.newpage_html = '';
//When copying text from word, whether to format the text and remove plugins/pastefromword/plugin.js
config.pasteFromWordIgnoreFontFace = true; //Default is ignored format
//Whether to use <h1><h2> and other tags to modify or replace the content pasted from the word document plugins/pastefromword/plugin.js
config.pasteFromWordKeepsStructure = false;
//Whether to remove the format plugins/pastefromword/plugin.js when pasting content from word
config.pasteFromWordRemoveStyle = false;
//Format the output HTML content according to the type of the background language, the default is empty
config.protectedSource.push( /</?[/s/S]*?/?>/g ); // PHP Code
config.protectedSource.push( //g ); // ASP Code
config.protectedSource.push( /(]+>[/s|/S]*?<//asp:[^/>]+>)|(]+///gi ); // ASP.Net Code
//The tag inserted when input: shift+Enter
config.shiftEnterMode = CKEDITOR.ENTER_P; //Optional: CKEDITOR.ENTER_BR or CKEDITOR.ENTER_DIV
//Optional emoticon substitute characters plugins/smiley/plugin.js.
config.smiley_descriptions = [
':)', ':(', ';)', ':D', ':/', ':P',
'', '', '', '', '', '', '',
'', ';(', '', '', '', '', '',
'', ':kiss', '' ];
//The corresponding expression pictures 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, does the edit box get the focus immediately plugins/editingblock/plugin.js plugins/editingblock/plugin.js.
config.startupFocus = false;
//How to edit the source code and WYSIWYG source and wysiwyg plugins/editingblock/plugin.js when loading.
config.startupMode ='wysiwyg';
//When loading, is it displayed the border of the frame 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';
//The starting index value
config.tabIndex = 0;
//When the user typed TAB, the number of spaces passed by the editor, ( ) When the value is 0, the focus will be moved out of the edit box plugins/tab/plugin.js
config.tabSpaces = 0;
//The default template plugins/templates/plugin.js is used.
config.templates = 'default';
//Comma-separated template file plugins/templates/plugin.js.
config.templates_files = [ 'plugins/templates/templates/default.js' ]
//When using templates, editing content will be replaced. Whether the box is selected for plugins/templates/plugin.js
config.templates_replaceContent = true;
//theme
config.theme = 'default';
//Revoked record steps plugins/undo/plugin.js
config.undoStackSize =20;
// Integrate CKFinder in CKEditor, note that the path selection of ckfinder must be correct.
//CKFinder.SetupCKEditor(null, '/ckfinder/');