Author: ruizhi date :2009-03-15
call javascript method:
------------------------------------
<script. type="text/javascript" src="FCKeditor/fckeditor.js"> </ scrīpt>
<textarea name="content" cols="80" rows="4">
</ textarea>
<script. type="text/javascript">
var FCKeditor = new FCKeditor ( "content");
oFCKeditor.BasePath = "FCKeditor /";
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = "Default";
oFCKeditor.ReplaceTextarea ();
</ script>
------------------------------------
If you want to use the database to read from the text data or the background documents from txt / html text data.
Just ------------------------------------
<textarea name="content" cols="80" rows="4">
</ textarea>
------------------------------------
Added to the display of the contents of their corresponding field can formbean ------------------------------------
<textarea name="content" cols="80" rows="4">
<c:out value="${contentData}" />
</ textarea>
------------------------------------
This content will be displayed in the edit box of the FCKeditor, click on the submit button can be in the background after the java action corresponding parameters to be content in the page content is the content of FCKeditor data. Can struts / jsf used.
====================================
FCKeditor as a result of the thin, so often the object will be reported to the lack of support for such errors, as long as FCKeditor / editor / lang added corresponding to the js language file. If the page failed to load (FCKeditor is not defined) is also possible to invoke FCKeditor / fckeditor.js file path wrong!
FCKeditor thin on the main points are as follows:
1. The FCKeditor directory and all subdirectories under the "_" underscore at the beginning of the folder to delete
2.FCKeditor only the root fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml, delete all the remaining
3. The editor / filemanager / upload directory empty files and folders
4. / Editor / filemanager / browser / default / connectors / delete all the files under the
5. Can also editor / skins directory to delete the skin file, leaving only a set default skin (if you do not need the skin for any)
6. Can also editor / lang directory to delete files, only the en.js, fcklanguagemanager.js, zh-cn.js, zh.js file
7. Javascrīpt If you are using to call the load FCKeditor, there would be no need to configure fckeditor in the web.xml file of the tag.
8. There is another problem has just started using FCKeditor often encounter people how to control it on the toolbar with the size and elements, in fact, very simple.
In using such a label fckconfig.js [] per line divided by the number of elements, so that they can control the length and size of the toolbar, and specific examples see: fckconfig.js in toolbarset [ "Default"]
====================================
Fckconfig.js with some of the options to control the function of control of toolbarset achieve cutting functions:
1): the abolition of the hyperlink of the browser server and upload function, as follows:
------------------------------------
FCKConfig.LinkBrowser = true;
FCKConfig.LinkUpload = true;
Read:
FCKConfig.LinkBrowser = false;
FCKConfig.LinkUpload = false;
------------------------------------
2): Cancel image link in the browser and upload the server functions, as follows:
------------------------------------
FCKConfig.ImageUpload = true;
FCKConfig.ImageBrowser = true;
Read:
FCKConfig.ImageUpload = false;
FCKConfig.ImageBrowser = false;
------------------------------------
3): Dlg Button in the abolition of advanced features as follows:
FCKConfig.LinkDlgHideAdvanced = false;
FCKConfig.ImageDlgHideAdvanced = false;
Read:
FCKConfig.ImageDlgHideAdvanced = true;
FCKConfig.LinkDlgHideTarget = true;
------------------------------------
Introduced under a FCKeditor server upload and browsing functions, and how to connect it to achieve ultra-dynamic, forward to the servlet, after calling the server to filter after the action
How to achieve the corresponding users to browse a list of their own to achieve the picture!
====================================
FCKeditor integration can be achieved java servlet file upload and read a list of server-side functionality to provide two FCKeditor own servlet to upload files to achieve the respective functions, and read features server-side file list, the two servlet are:
com.fredck.FCKeditor.connector.ConnectorServlet (read list)
com.fredck.FCKeditor.uploader.SimpleUploaderServlet (Upload Files)
1. Browse the list of server-side file ------------------------------------
web.xml file, such as: ConnectorServlet of configuration options:
<init-param>
<param-name> baseDir </ param-name>
<param-value> / UserFiles / </ param-value>
</ init-param>
Mean, in the browser configuration baseDir server all the files inside the specified directory structure and list.
BaseDir If you did not configure, Connector will automatically create a default folder
UserFiles, corresponding ConnectorServlet in the init () method in the code are as follows:
------------------------------------
baseDir = getInitParameter ( "baseDir");
if (baseDir == null)
baseDir = "/ UserFiles /";
------------------------------------
Would also like to talk about that, FCKeditor call server of the client's servlet approach is adopted to achieve the ideological Ajax. When you click the Browse Server (browser server) will be triggered when an asynchronous call javascrīpt + xmlhttp response, the servlet will be the background to complete the request of the events you want, and then the data to xml the way back to the client to resolve. Obviously, you want to achieve to a database or other request for a list of the file system, you need only modify
ConnectorServlet two private methods: getFolders and getFiles
It to you to specify the list of files where you can get, so your file can be any directory you specify. Say one more thing, many people would like to know how personal blog system file after the realization of the corresponding users to browse their list, my approach is very simple to establish your user name folder, you can upload it to your upload directory folder, browsing can be browsed through the procedures specified in the corresponding folder under the user can, at this time you want to modify the path to Connectorservlet!
------------------------------------
2. HyperConnect ------------------------------------ re-positioning of
FCKeditor can be inserted ultra-connected, the realization of the preview of the document, as long as we can make a little change our editor FCKeditor Arbitrary File System support for any file under the client browser and download the save! FCKeditor have provided a hyperlink URL is relative, as long as we modify ConnectorServlet pass the address to the client when it rewritten into an absolute URL and then filter through our own realization of the servlet to redirect to a download / access to documents of the struts action methods can be achieved on the client to connect to the super-file to download and browse! You talk about specific practices:
1): to amend ConnectorServlet to the client javascrīpt transmission path, the code is as follows:
String currentUrl = "http://" + request.getserver + request.getServerPort + request.getContextPath + resourcePath;
ConnectorServlet the code above in the doGet () inside the assembly! In the call CreateCommonXml () private method into the time parameters:
myEl.setAttribute ( "path", currentPath);
myEl.setAttribute ( "url", currentUrl);
Remind resourcePath for web.xml configuration file in a ConnectorServlet initialization parameter configuration, use filter to achieve a moment of super-connectivity on the extraction of URL re-positioning of the configuration parameters to determine, configuration is as follows:
<init-param>
<param-name> resourcePath </ param-name>
<param-value> / fileSystem / </ param-value>
</ init-param>
2): establishment of your filter servlet, to achieve the interception of the URL, the URL meet the requirements of the re-location to your action in response to your
3): the achievement of your action to achieve the corresponding documents can upload and download!
4): the expansion of functions - to achieve the encrypted URL of the URL in connection with a string of characters, the last several as a checksum algorithm that do not meet the requirements of the URL to connect, filter will be refused re-positioning to a specific action. In addition the expansion of the use of their own type of writing can also be connected to achieve ultra-limit file types, such as ultra-You can only connect JPG | GIF | DOC | TXT | HTML suffix, such as files of several of the other documents specified, even if you super-connected also allows you to browse and download, these can be by modifying the web.xml in the servlet configuration file corresponds to the initialization parameters.
3. Javascrīpt modify page ------------------------------------
Browse the corresponding server html / javascrīpt related documents: browser.html and the corresponding frmresourcelist.html message you want to you can append the string in the file name back in the GetFileRowHtml () function to achieve the javascrīpt of the file name the interception, so that client will only show the file name, and you can get the database file that uniquely identifies that any information you want you can ConnectorServlet by modifying the method of private getFiles () to achieve, as long as the modified page frmresurcelist.html The GetFileRowHtml () in the variable fileName can be imported. You can also click to select the document in time for the realization of a Ajax call your own, all depend on the item you need!
4. Javascrīpt I am not a expert, in fact, if I understand a little more javascrīpt client may modify the code after the function of a more dizzy. Can be better tailored to complete the FCKeditor.
-------------------------------------
5. Attention to points -------------------------------------
No matter how other people modify things, be sure to respect the spirit of open source!
Well a lot of people configure the upload feature FCKeditor often encountered after the xmlhttp request 404 error, followed by a string of the path is actually a servlet-mapping your path does not agree with me as long as the xmlhttp request errot 404 followed by the path, copy to your web.xml in red correspond to the location of the text, as follows:
<servlet-mapping>
<servlet-name> Connector </ servlet-name>
<url-pattern> / FCKeditor / editor / filemanager / browser / default / connectors / jsp / connector </ url-pattern>
</ servlet-mapping>
Do not forget SimpleUploader the servlet-mapping changes also do the same!
There is an error http 500 error, this may be the URL of your request does not, it should be and the FCKeditor does not matter!
======================================
fckconfig.js the total profile, the available records of this open file will be saved as modified utf-8 encoding format. Find:
--------------------------------------
FCKConfig.TabSpaces = 0;
Read:
FCKConfig.TabSpaces = 1;
Region that is in the editor can use the Tab key.
If your editor is also used in the future, then site, for example, or a diary for the reply message when this would have to consider the safety and
Do not use in front of millions of Default of the toolbar, or click Custom functions, either on the system has been defined by Basic,
That is, the basic toolbar, find:
--------------------------------------
FCKConfig.ToolbarSets [ "Basic"] = [
[ 'Bold', 'Italic','-',' OrderedList', 'UnorderedList','-',/*' Link',*/' Unlink','-',' Style', 'FontSize', ' TextColor ',' BGColor','-',
'Smiley', 'SpecialChar', 'Replace', 'Preview']];
This is the turn of the Basic, the function of removing image, add a link function to remove, because images and links, and flash and video function button can be added to allow direct access to front pages and upload files, fckeditor region also supports the editing of the mouse right key features.
FCKConfig.ContextMenu = [ 'Generic',/*' Link',*/' Anchor',/*' Image',*/' Flash', 'Select', 'Textarea', 'Checkbox', 'Radio', ' TextField ',' HiddenField ',
/ * 'ImageButton',*/' Button', 'BulletedList', 'NumberedList', 'TableCell', 'Table', 'Form'];
This is also the right mouse button to turn of the "links, images, FLASH, the image button" feature are removed.
Find:
FCKConfig.FontNames = 'Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana';
We added some commonly used fonts
FCKConfig.FontNames = 'Song; bold; Lishu; italics _GB2312; Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana';
Add files / TestFCKeditor / test.jsp:
----------------------------------------
<% @ Page language = "java" import = "com.fredck.FCKeditor .*"%>
<% @ Taglib uri = "/ TestFCKeditor" prefix = "FCK"%>
<script. type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"> </ script>
<% --
Three types of method calls FCKeditor
1.FCKeditor custom label (header files must be added <% @ taglib uri = "/ TestFCKeditor" prefix = "FCK"%>)
Scripting language 2.script call (script file must be cited <script. type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"> </ script>)
3.FCKeditor API call (the first document to be added <% @ page language = "java" import = "com.fredck.FCKeditor .*"%>)
-%>
<% --
<form. action="show.jsp" method="post" target="_blank">
<FCK: editor
width = "700" height = "500" skinPath = "/ TestFCKeditor / FCKeditor / editor / skins / silver /"
toolbarSet = "Default">
Content
</ FCK: editor>
<input type="submit" value="Submit">
</ form>
-%>
<form. action="show.jsp" method="post" target="_blank">
<table border="0" width="700">
<tr>
<td>
<textarea%; HEIGHT: 400px"> input </ textarea>
<script. type="text/javascript">
var FCKeditor = new FCKeditor ( 'content?;
oFCKeditor.BasePath = "/ TestFCKeditor / FCKeditor /";
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = "Default";
oFCKeditor.ReplaceTextarea ();
</ script>
<input type="submit" value="Submit">
</ td>
</ tr>
</ table>
</ form>
<% --
<form. action="show.jsp" method="post" target="_blank">
<%
FCKeditor oFCKeditor;
oFCKeditor = new FCKeditor (request, "content");
oFCKeditor.setBasePath ( "/ TestFCKeditor / FCKeditor /");
oFCKeditor.setValue ( "input");
out.println (oFCKeditor.create ());
%>
<br>
<input type="submit" value="Submit">
</ form>
-%>
Add files / TestFCKeditor / show.jsp:
<%
String content = request.getParameter ( "content");
out.print (content);
%>
====================================
1, the right time to open the editor ------------------------------------
Very often, we do not need to open the page directly opened when the editor, and in the open when it is used, so have a good user experience, on the other hand, can be eliminated when FCK loading speed on the open page impact, click on "Open Editor" button to open the editor after the interface.
Principle:
Use JAVASCRIPT version of FCK, when a page is loaded (not open FCK), to create a TextArea hidden domain, the TextArea
The name and ID to the FCK and to create the same instance name, then click the "Open Editor" button, by calling for some function, the use of
FCK's ReplaceTextarea () method to create a FCKeditor, the code is as follows:
------------------------------------
<script. type="text/javascript">
<! --
function showFCK () (
var FCKeditor = new FCKeditor ( 'fbContent');
oFCKeditor.BasePath = '/ FCKeditor /';
oFCKeditor.ToolbarSet = 'Basic';
oFCKeditor.Width ='100% ';
oFCKeditor.Height ='200 ';
oFCKeditor.ReplaceTextarea ();
)
/ / ->
</ script>
<textarea name = "fbContent"
2, the API to use FCKeditor
-------------------------------------
FCKeditor editor, provides a very rich API, for the End User wants to achieve a lot of custom features such as the basic data validation and how to use JS to submit a time when the current editor to determine whether there is the content of the region, FCK The API provides a GetLength () method;
Another example how to script to insert the contents of FCK in the use of InsertHTML (), etc.;
Also, customization features, the intermediate steps may have to implement some of the embedded operating FCK, then use ExecuteCommand () method.
API detailed list, see the FCKeditor in Wiki. The common API, please see the FCK compression bag of _samples/html/sample08.html. Do not paste the code here.
3, Article Editor outreach (number of editors to edit articles share the same domain)
--------------------------------------
This feature is only available version 2.3 and previous versions of FCKeditor to use the same number of pages, then editor, was a creation, now have this outreach function, then the trouble would not only make tools be an appropriate location on the back can be unrestricted editor to create the domain.
To achieve this functionality, the need to define the page as a tool of the container: <div, and then the container in accordance with the id attribute set.
JAVASCRIPT code:
--------------------------------------
<div
FCKeditor 1:
<script. type="text/javascript">
<! --
/ / Automatically calculates the editor base path based on the _samples directory.
/ / This is usefull only for these samples. A real application should use something like this:
/ / OFCKeditor.BasePath = '/ fckeditor /'; / / '/ fckeditor /' is the default value.
var sBasePath = document.location.pathname.substring (0, document.location.pathname.lastIndexOf ( '_samples'));
var FCKeditor = new FCKeditor ( 'FCKeditor_1');
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height = 100;
oFCKeditor.Config [ 'ToolbarLocation'] = 'Out: parent (xToolbar)';
oFCKeditor.Value = 'This is some <strong> sample text </ strong>. You are using FCKeditor.';
oFCKeditor.Create ();
/ / ->
</ script>
<br />
FCKeditor 2:
<script. type="text/javascript">
<! --
FCKeditor = new FCKeditor ( 'FCKeditor_2');
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height = 100;
oFCKeditor.Config [ 'ToolbarLocation'] = 'Out: parent (xToolbar)';
oFCKeditor.Value = 'This is some <strong> sample text </ strong>. You are using FCKeditor.';
oFCKeditor.Create ();
/ / ->
</ script>
-------------------------------------
DEMO this section please refer to the detailed _samples/html/sample11.html, _samples/html/sample11_frame.html
4, document management functions, file upload permissions problem -------------------------------------
FCKeditor has been part of the document management security is a noteworthy, but a lot of people did not notice the place, although in all Release versions of FCKeditor has a function there is a file type filter, but she did not consider another Question: Who in the end allowed to upload? Who can visit the server document in the end?
FCKeditor just before the start, I had this problem, better NetRube (FCKeditor in FCKeditor ASP version of culture as well as the author of From the procedure) in time to remind me, is to amend the FCK upload process, in which authority to determine and then in the corresponding fckconfig.js some of the features removed. However, subsequent versions of the escalating FCK per liter we have to change a configuration procedure fckconfig.js, I find that annoying, it's no better way to control the configuration you? In fact, we do have.
In fckconfig.js inside, whether or not to open on the server to upload and browser settings, FCKeditor in the creation, through the creation of procedures to determine whether there From browsing the editor. First of all, I fckconfig.js inside in all the upload and browse the whole set up is set to false, then the code I use is as follows:
JAVASCRIPT version:
-------------------------------------
<script. type="text/javascript">
var FCKeditor = new FCKeditor ( 'fbContent');
<% If power = powercode then%>
oFCKeditor.Config [ 'LinkBrowser'] = true;
oFCKeditor.Config [ 'ImageBrowser'] = true;
oFCKeditor.Config [ 'FlashBrowser'] = true;
oFCKeditor.Config [ 'LinkUpload'] = true;
oFCKeditor.Config [ 'ImageUpload'] = true;
oFCKeditor.Config [ 'FlashUpload'] = true;
<% End if%>
oFCKeditor.ToolbarSet = 'Basic';
oFCKeditor.Width ='100% ';
oFCKeditor.Height ='200 ';
oFCKeditor.Value ='';
oFCKeditor.Create ();
</ script>
-------------------------------------
Add text next to the button -------------------------------------
Open the editor / js / two js files
fckeditorcode_gecko.js
fckeditorcode_ie.js
The first is the non-ie browsers support the second document is a support of the search ie browser FCKToolbarButton, we can see many statements like this:
case 'Save': B = new FCKToolbarButton ( 'Save', FCKLang.Save, null, null, true, null, 3); break;
'Save' is the English name of the button
FCKToolbarButton the four parameters are:
Button command name, the button label text, buttons, tooltips, button style, the buttons can be seen in source code mode, the button drop-down menu in which the first four parameters can be set to enable the button next to FCK_TOOLBARITEM_ICONTEXT text appears, attention is not in quotation marks.
For example:
case 'Preview': B = new FCKToolbarButton ( 'Preview', FCKLang.Preview, null, FCK_TOOLBARITEM_ICONTEXT, true, null, 5);
So that we can use our regular pattern of three kinds of source code, preview, full screen text editor with a button.
To explain the working principle of style fck -------------------------------------
fck the style settings related to the two documents, one is your definition of good style sheet document. css, another is to tell how to use style sheets fck the xml files, one can not do the two documents.
css file is not required, but need you in the application of the page editor to insert a link to the style sheet document. This style can be displayed.
fckstyles.xml directory at the same level with the editor of the directory. The document defines the style that you can use those tags in there.
This is the xml style fck own definition:
<? xml version = "1.0" encoding = "utf-8"?>
<Styles>
<Style Name="Image on Left" element="img">
<Attribute Name="style" value="padding: 5px; margin-right: 5px" />
<Attribute Name="border" value="2" />
<Attribute Name="align" value="left" />
</ Style>
<Style Name="Image on Right" element="img">
<Attribute Name="style" value="padding: 5px; margin-left: 5px" />
<Attribute Name="border" value="2" />
<Attribute Name="align" value="right" />
</ Style>
<Style Name="Custom Bold" element="span">
<Attribute Name="style" value="font-weight: bold;" />
</ Style>
<Style Name="Custom Italic" element="em" />
<Style Name="Title" element="span">
<Attribute Name="class" value="Title" />
</ Style>
<Style Name="Code" element="span">
<Attribute Name="class" value="Code" />
</ Style>
<Style Name="Title H3" element="h3" />
<Style Name="Custom Ruler" element="hr">
<Attribute Name="size" value="1" />
<Attribute Name="color" value="#ff0000" />
</ Style>
</ Styles>
<style> Each style will generate a menu item. name is displayed in the menu name in the text; element of the definition of style can be applied to the kind of html tag, <Attribute> designated name of the label which will be modified to apply the style attribute, value is the modified value.
Look at this:
<Style Name="Title" element="span">
<Attribute Name="class" value="Title" />
</ Style>
If you selected text in fck "Classic Forum" column script production and prospects "FCKeditor combat skills - 1" edit post "application of the style is the original text will become <span classic Forum" column script production and prospects "FCKeditor combat skills - 1 "to edit the post </ span>
Note: If the editor was editing the whole page, and then the whole page inside the style sheet also needs to insert a link to show style.
============================================
FCKeditor JavaScript. API (translation finishing)
Original Address: http://wiki.fckeditor.net/Developer% 27s_Guide/Javascript_API
--------------------------------------------
FCK editor is loaded, it will register a global object of FCKeditorAPI.
FCKeditorAPI object during the page load is not valid until the completion of page load. If you need to know the interactive FCK Editor has completed loading, you can use "FCKeditor_OnComplete" function.
<script. type="text/javascript">
function FCKeditor_OnComplete (editorInstance) (
FCKeditorAPI.GetInstance ( 'FCKeditor1'). Commands.GetCommand ( 'FitWindow'). Execute ();
)
</ script>
On the current page FCK Editor was examples:
var Editor = FCKeditorAPI.GetInstance ( 'InstanceName');
FCK Editor from the pop-up window in FCK Editor was examples:
var Editor = window.parent.InnerDialogLoaded (). FCK;
Page from the framework of the sub-frames access to other sub-frames in the FCK editor instance:
var Editor = window.FrameName.FCKeditorAPI.GetInstance ( 'InstanceName');
Pop-up window from the page to obtain the parent window of the FCK editor instance:
var Editor = opener.FCKeditorAPI.GetInstance ( 'InstanceName');
Access to the contents of FCK Editor:
oEditor.GetXHTML (formatted); / / formatted as: true | false, whether the HTML format that can also be removed:
oEditor.GetXHTML ();
Setting FCK Editor Content:
oEditor.SetHTML ( "content", false); / / The second parameter to: true | false, whether or not to WYSIWYG mode and its contents. This method is commonly used in the "set initial value" or "reset form" operator.
Insert the contents of the FCK Editor:
oEditor.InsertHtml ( "html"); / / "html" for HTML text content to check whether the FCK Editor to change:
oEditor.IsDirty ();
FCK editor in addition to call the FCK Editor toolbar command:
Command as follows:
--------------------------------------------
DocProps, Templates, Link, Unlink, Anchor, BulletedList, NumberedList, About, Find, Replace, Image, Flash, SpecialChar, Smiley, Table, TableProp, TableCellProp, UniversalKey, Style, FontName, FontSize, FontFormat, Source, Preview, Save, NewPage, PageBreak, TextColor, BGColor, PasteText, PasteWord, TableInsertRow, TableDeleteRows, TableInsertColumn, TableDeleteColumns, TableInsertCell, TableDeleteCells, TableMergeCells, TableSplitCell, TableDelete, Form, Checkbox, Radio, TextField, Textarea, HiddenField, Button, Select, ImageButton, SpellCheck, FitWindow, Undo, Redo
--------------------------------------------
Use are as follows:
--------------------------------------------
oEditor.Commands.GetCommand ( 'FitWindow'). Execute ();
call javascript method:
------------------------------------
<script. type="text/javascript" src="FCKeditor/fckeditor.js"> </ scrīpt>
<textarea name="content" cols="80" rows="4">
</ textarea>
<script. type="text/javascript">
var FCKeditor = new FCKeditor ( "content");
oFCKeditor.BasePath = "FCKeditor /";
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = "Default";
oFCKeditor.ReplaceTextarea ();
</ script>
------------------------------------
If you want to use the database to read from the text data or the background documents from txt / html text data.
Just ------------------------------------
<textarea name="content" cols="80" rows="4">
</ textarea>
------------------------------------
Added to the display of the contents of their corresponding field can formbean ------------------------------------
<textarea name="content" cols="80" rows="4">
<c:out value="${contentData}" />
</ textarea>
------------------------------------
This content will be displayed in the edit box of the FCKeditor, click on the submit button can be in the background after the java action corresponding parameters to be content in the page content is the content of FCKeditor data. Can struts / jsf used.
====================================
FCKeditor as a result of the thin, so often the object will be reported to the lack of support for such errors, as long as FCKeditor / editor / lang added corresponding to the js language file. If the page failed to load (FCKeditor is not defined) is also possible to invoke FCKeditor / fckeditor.js file path wrong!
FCKeditor thin on the main points are as follows:
1. The FCKeditor directory and all subdirectories under the "_" underscore at the beginning of the folder to delete
2.FCKeditor only the root fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml, delete all the remaining
3. The editor / filemanager / upload directory empty files and folders
4. / Editor / filemanager / browser / default / connectors / delete all the files under the
5. Can also editor / skins directory to delete the skin file, leaving only a set default skin (if you do not need the skin for any)
6. Can also editor / lang directory to delete files, only the en.js, fcklanguagemanager.js, zh-cn.js, zh.js file
7. Javascrīpt If you are using to call the load FCKeditor, there would be no need to configure fckeditor in the web.xml file of the tag.
8. There is another problem has just started using FCKeditor often encounter people how to control it on the toolbar with the size and elements, in fact, very simple.
In using such a label fckconfig.js [] per line divided by the number of elements, so that they can control the length and size of the toolbar, and specific examples see: fckconfig.js in toolbarset [ "Default"]
====================================
Fckconfig.js with some of the options to control the function of control of toolbarset achieve cutting functions:
1): the abolition of the hyperlink of the browser server and upload function, as follows:
------------------------------------
FCKConfig.LinkBrowser = true;
FCKConfig.LinkUpload = true;
Read:
FCKConfig.LinkBrowser = false;
FCKConfig.LinkUpload = false;
------------------------------------
2): Cancel image link in the browser and upload the server functions, as follows:
------------------------------------
FCKConfig.ImageUpload = true;
FCKConfig.ImageBrowser = true;
Read:
FCKConfig.ImageUpload = false;
FCKConfig.ImageBrowser = false;
------------------------------------
3): Dlg Button in the abolition of advanced features as follows:
FCKConfig.LinkDlgHideAdvanced = false;
FCKConfig.ImageDlgHideAdvanced = false;
Read:
FCKConfig.ImageDlgHideAdvanced = true;
FCKConfig.LinkDlgHideTarget = true;
------------------------------------
Introduced under a FCKeditor server upload and browsing functions, and how to connect it to achieve ultra-dynamic, forward to the servlet, after calling the server to filter after the action
How to achieve the corresponding users to browse a list of their own to achieve the picture!
====================================
FCKeditor integration can be achieved java servlet file upload and read a list of server-side functionality to provide two FCKeditor own servlet to upload files to achieve the respective functions, and read features server-side file list, the two servlet are:
com.fredck.FCKeditor.connector.ConnectorServlet (read list)
com.fredck.FCKeditor.uploader.SimpleUploaderServlet (Upload Files)
1. Browse the list of server-side file ------------------------------------
web.xml file, such as: ConnectorServlet of configuration options:
<init-param>
<param-name> baseDir </ param-name>
<param-value> / UserFiles / </ param-value>
</ init-param>
Mean, in the browser configuration baseDir server all the files inside the specified directory structure and list.
BaseDir If you did not configure, Connector will automatically create a default folder
UserFiles, corresponding ConnectorServlet in the init () method in the code are as follows:
------------------------------------
baseDir = getInitParameter ( "baseDir");
if (baseDir == null)
baseDir = "/ UserFiles /";
------------------------------------
Would also like to talk about that, FCKeditor call server of the client's servlet approach is adopted to achieve the ideological Ajax. When you click the Browse Server (browser server) will be triggered when an asynchronous call javascrīpt + xmlhttp response, the servlet will be the background to complete the request of the events you want, and then the data to xml the way back to the client to resolve. Obviously, you want to achieve to a database or other request for a list of the file system, you need only modify
ConnectorServlet two private methods: getFolders and getFiles
It to you to specify the list of files where you can get, so your file can be any directory you specify. Say one more thing, many people would like to know how personal blog system file after the realization of the corresponding users to browse their list, my approach is very simple to establish your user name folder, you can upload it to your upload directory folder, browsing can be browsed through the procedures specified in the corresponding folder under the user can, at this time you want to modify the path to Connectorservlet!
------------------------------------
2. HyperConnect ------------------------------------ re-positioning of
FCKeditor can be inserted ultra-connected, the realization of the preview of the document, as long as we can make a little change our editor FCKeditor Arbitrary File System support for any file under the client browser and download the save! FCKeditor have provided a hyperlink URL is relative, as long as we modify ConnectorServlet pass the address to the client when it rewritten into an absolute URL and then filter through our own realization of the servlet to redirect to a download / access to documents of the struts action methods can be achieved on the client to connect to the super-file to download and browse! You talk about specific practices:
1): to amend ConnectorServlet to the client javascrīpt transmission path, the code is as follows:
String currentUrl = "http://" + request.getserver + request.getServerPort + request.getContextPath + resourcePath;
ConnectorServlet the code above in the doGet () inside the assembly! In the call CreateCommonXml () private method into the time parameters:
myEl.setAttribute ( "path", currentPath);
myEl.setAttribute ( "url", currentUrl);
Remind resourcePath for web.xml configuration file in a ConnectorServlet initialization parameter configuration, use filter to achieve a moment of super-connectivity on the extraction of URL re-positioning of the configuration parameters to determine, configuration is as follows:
<init-param>
<param-name> resourcePath </ param-name>
<param-value> / fileSystem / </ param-value>
</ init-param>
2): establishment of your filter servlet, to achieve the interception of the URL, the URL meet the requirements of the re-location to your action in response to your
3): the achievement of your action to achieve the corresponding documents can upload and download!
4): the expansion of functions - to achieve the encrypted URL of the URL in connection with a string of characters, the last several as a checksum algorithm that do not meet the requirements of the URL to connect, filter will be refused re-positioning to a specific action. In addition the expansion of the use of their own type of writing can also be connected to achieve ultra-limit file types, such as ultra-You can only connect JPG | GIF | DOC | TXT | HTML suffix, such as files of several of the other documents specified, even if you super-connected also allows you to browse and download, these can be by modifying the web.xml in the servlet configuration file corresponds to the initialization parameters.
3. Javascrīpt modify page ------------------------------------
Browse the corresponding server html / javascrīpt related documents: browser.html and the corresponding frmresourcelist.html message you want to you can append the string in the file name back in the GetFileRowHtml () function to achieve the javascrīpt of the file name the interception, so that client will only show the file name, and you can get the database file that uniquely identifies that any information you want you can ConnectorServlet by modifying the method of private getFiles () to achieve, as long as the modified page frmresurcelist.html The GetFileRowHtml () in the variable fileName can be imported. You can also click to select the document in time for the realization of a Ajax call your own, all depend on the item you need!
4. Javascrīpt I am not a expert, in fact, if I understand a little more javascrīpt client may modify the code after the function of a more dizzy. Can be better tailored to complete the FCKeditor.
-------------------------------------
5. Attention to points -------------------------------------
No matter how other people modify things, be sure to respect the spirit of open source!
Well a lot of people configure the upload feature FCKeditor often encountered after the xmlhttp request 404 error, followed by a string of the path is actually a servlet-mapping your path does not agree with me as long as the xmlhttp request errot 404 followed by the path, copy to your web.xml in red correspond to the location of the text, as follows:
<servlet-mapping>
<servlet-name> Connector </ servlet-name>
<url-pattern> / FCKeditor / editor / filemanager / browser / default / connectors / jsp / connector </ url-pattern>
</ servlet-mapping>
Do not forget SimpleUploader the servlet-mapping changes also do the same!
There is an error http 500 error, this may be the URL of your request does not, it should be and the FCKeditor does not matter!
======================================
fckconfig.js the total profile, the available records of this open file will be saved as modified utf-8 encoding format. Find:
--------------------------------------
FCKConfig.TabSpaces = 0;
Read:
FCKConfig.TabSpaces = 1;
Region that is in the editor can use the Tab key.
If your editor is also used in the future, then site, for example, or a diary for the reply message when this would have to consider the safety and
Do not use in front of millions of Default of the toolbar, or click Custom functions, either on the system has been defined by Basic,
That is, the basic toolbar, find:
--------------------------------------
FCKConfig.ToolbarSets [ "Basic"] = [
[ 'Bold', 'Italic','-',' OrderedList', 'UnorderedList','-',/*' Link',*/' Unlink','-',' Style', 'FontSize', ' TextColor ',' BGColor','-',
'Smiley', 'SpecialChar', 'Replace', 'Preview']];
This is the turn of the Basic, the function of removing image, add a link function to remove, because images and links, and flash and video function button can be added to allow direct access to front pages and upload files, fckeditor region also supports the editing of the mouse right key features.
FCKConfig.ContextMenu = [ 'Generic',/*' Link',*/' Anchor',/*' Image',*/' Flash', 'Select', 'Textarea', 'Checkbox', 'Radio', ' TextField ',' HiddenField ',
/ * 'ImageButton',*/' Button', 'BulletedList', 'NumberedList', 'TableCell', 'Table', 'Form'];
This is also the right mouse button to turn of the "links, images, FLASH, the image button" feature are removed.
Find:
FCKConfig.FontNames = 'Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana';
We added some commonly used fonts
FCKConfig.FontNames = 'Song; bold; Lishu; italics _GB2312; Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana';
Add files / TestFCKeditor / test.jsp:
----------------------------------------
<% @ Page language = "java" import = "com.fredck.FCKeditor .*"%>
<% @ Taglib uri = "/ TestFCKeditor" prefix = "FCK"%>
<script. type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"> </ script>
<% --
Three types of method calls FCKeditor
1.FCKeditor custom label (header files must be added <% @ taglib uri = "/ TestFCKeditor" prefix = "FCK"%>)
Scripting language 2.script call (script file must be cited <script. type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"> </ script>)
3.FCKeditor API call (the first document to be added <% @ page language = "java" import = "com.fredck.FCKeditor .*"%>)
-%>
<% --
<form. action="show.jsp" method="post" target="_blank">
<FCK: editor
width = "700" height = "500" skinPath = "/ TestFCKeditor / FCKeditor / editor / skins / silver /"
toolbarSet = "Default">
Content
</ FCK: editor>
<input type="submit" value="Submit">
</ form>
-%>
<form. action="show.jsp" method="post" target="_blank">
<table border="0" width="700">
<tr>
<td>
<textarea%; HEIGHT: 400px"> input </ textarea>
<script. type="text/javascript">
var FCKeditor = new FCKeditor ( 'content?;
oFCKeditor.BasePath = "/ TestFCKeditor / FCKeditor /";
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = "Default";
oFCKeditor.ReplaceTextarea ();
</ script>
<input type="submit" value="Submit">
</ td>
</ tr>
</ table>
</ form>
<% --
<form. action="show.jsp" method="post" target="_blank">
<%
FCKeditor oFCKeditor;
oFCKeditor = new FCKeditor (request, "content");
oFCKeditor.setBasePath ( "/ TestFCKeditor / FCKeditor /");
oFCKeditor.setValue ( "input");
out.println (oFCKeditor.create ());
%>
<br>
<input type="submit" value="Submit">
</ form>
-%>
Add files / TestFCKeditor / show.jsp:
<%
String content = request.getParameter ( "content");
out.print (content);
%>
====================================
1, the right time to open the editor ------------------------------------
Very often, we do not need to open the page directly opened when the editor, and in the open when it is used, so have a good user experience, on the other hand, can be eliminated when FCK loading speed on the open page impact, click on "Open Editor" button to open the editor after the interface.
Principle:
Use JAVASCRIPT version of FCK, when a page is loaded (not open FCK), to create a TextArea hidden domain, the TextArea
The name and ID to the FCK and to create the same instance name, then click the "Open Editor" button, by calling for some function, the use of
FCK's ReplaceTextarea () method to create a FCKeditor, the code is as follows:
------------------------------------
<script. type="text/javascript">
<! --
function showFCK () (
var FCKeditor = new FCKeditor ( 'fbContent');
oFCKeditor.BasePath = '/ FCKeditor /';
oFCKeditor.ToolbarSet = 'Basic';
oFCKeditor.Width ='100% ';
oFCKeditor.Height ='200 ';
oFCKeditor.ReplaceTextarea ();
)
/ / ->
</ script>
<textarea name = "fbContent"
2, the API to use FCKeditor
-------------------------------------
FCKeditor editor, provides a very rich API, for the End User wants to achieve a lot of custom features such as the basic data validation and how to use JS to submit a time when the current editor to determine whether there is the content of the region, FCK The API provides a GetLength () method;
Another example how to script to insert the contents of FCK in the use of InsertHTML (), etc.;
Also, customization features, the intermediate steps may have to implement some of the embedded operating FCK, then use ExecuteCommand () method.
API detailed list, see the FCKeditor in Wiki. The common API, please see the FCK compression bag of _samples/html/sample08.html. Do not paste the code here.
3, Article Editor outreach (number of editors to edit articles share the same domain)
--------------------------------------
This feature is only available version 2.3 and previous versions of FCKeditor to use the same number of pages, then editor, was a creation, now have this outreach function, then the trouble would not only make tools be an appropriate location on the back can be unrestricted editor to create the domain.
To achieve this functionality, the need to define the page as a tool of the container: <div, and then the container in accordance with the id attribute set.
JAVASCRIPT code:
--------------------------------------
<div
FCKeditor 1:
<script. type="text/javascript">
<! --
/ / Automatically calculates the editor base path based on the _samples directory.
/ / This is usefull only for these samples. A real application should use something like this:
/ / OFCKeditor.BasePath = '/ fckeditor /'; / / '/ fckeditor /' is the default value.
var sBasePath = document.location.pathname.substring (0, document.location.pathname.lastIndexOf ( '_samples'));
var FCKeditor = new FCKeditor ( 'FCKeditor_1');
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height = 100;
oFCKeditor.Config [ 'ToolbarLocation'] = 'Out: parent (xToolbar)';
oFCKeditor.Value = 'This is some <strong> sample text </ strong>. You are using FCKeditor.';
oFCKeditor.Create ();
/ / ->
</ script>
<br />
FCKeditor 2:
<script. type="text/javascript">
<! --
FCKeditor = new FCKeditor ( 'FCKeditor_2');
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height = 100;
oFCKeditor.Config [ 'ToolbarLocation'] = 'Out: parent (xToolbar)';
oFCKeditor.Value = 'This is some <strong> sample text </ strong>. You are using FCKeditor.';
oFCKeditor.Create ();
/ / ->
</ script>
-------------------------------------
DEMO this section please refer to the detailed _samples/html/sample11.html, _samples/html/sample11_frame.html
4, document management functions, file upload permissions problem -------------------------------------
FCKeditor has been part of the document management security is a noteworthy, but a lot of people did not notice the place, although in all Release versions of FCKeditor has a function there is a file type filter, but she did not consider another Question: Who in the end allowed to upload? Who can visit the server document in the end?
FCKeditor just before the start, I had this problem, better NetRube (FCKeditor in FCKeditor ASP version of culture as well as the author of From the procedure) in time to remind me, is to amend the FCK upload process, in which authority to determine and then in the corresponding fckconfig.js some of the features removed. However, subsequent versions of the escalating FCK per liter we have to change a configuration procedure fckconfig.js, I find that annoying, it's no better way to control the configuration you? In fact, we do have.
In fckconfig.js inside, whether or not to open on the server to upload and browser settings, FCKeditor in the creation, through the creation of procedures to determine whether there From browsing the editor. First of all, I fckconfig.js inside in all the upload and browse the whole set up is set to false, then the code I use is as follows:
JAVASCRIPT version:
-------------------------------------
<script. type="text/javascript">
var FCKeditor = new FCKeditor ( 'fbContent');
<% If power = powercode then%>
oFCKeditor.Config [ 'LinkBrowser'] = true;
oFCKeditor.Config [ 'ImageBrowser'] = true;
oFCKeditor.Config [ 'FlashBrowser'] = true;
oFCKeditor.Config [ 'LinkUpload'] = true;
oFCKeditor.Config [ 'ImageUpload'] = true;
oFCKeditor.Config [ 'FlashUpload'] = true;
<% End if%>
oFCKeditor.ToolbarSet = 'Basic';
oFCKeditor.Width ='100% ';
oFCKeditor.Height ='200 ';
oFCKeditor.Value ='';
oFCKeditor.Create ();
</ script>
-------------------------------------
Add text next to the button -------------------------------------
Open the editor / js / two js files
fckeditorcode_gecko.js
fckeditorcode_ie.js
The first is the non-ie browsers support the second document is a support of the search ie browser FCKToolbarButton, we can see many statements like this:
case 'Save': B = new FCKToolbarButton ( 'Save', FCKLang.Save, null, null, true, null, 3); break;
'Save' is the English name of the button
FCKToolbarButton the four parameters are:
Button command name, the button label text, buttons, tooltips, button style, the buttons can be seen in source code mode, the button drop-down menu in which the first four parameters can be set to enable the button next to FCK_TOOLBARITEM_ICONTEXT text appears, attention is not in quotation marks.
For example:
case 'Preview': B = new FCKToolbarButton ( 'Preview', FCKLang.Preview, null, FCK_TOOLBARITEM_ICONTEXT, true, null, 5);
So that we can use our regular pattern of three kinds of source code, preview, full screen text editor with a button.
To explain the working principle of style fck -------------------------------------
fck the style settings related to the two documents, one is your definition of good style sheet document. css, another is to tell how to use style sheets fck the xml files, one can not do the two documents.
css file is not required, but need you in the application of the page editor to insert a link to the style sheet document. This style can be displayed.
fckstyles.xml directory at the same level with the editor of the directory. The document defines the style that you can use those tags in there.
This is the xml style fck own definition:
<? xml version = "1.0" encoding = "utf-8"?>
<Styles>
<Style Name="Image on Left" element="img">
<Attribute Name="style" value="padding: 5px; margin-right: 5px" />
<Attribute Name="border" value="2" />
<Attribute Name="align" value="left" />
</ Style>
<Style Name="Image on Right" element="img">
<Attribute Name="style" value="padding: 5px; margin-left: 5px" />
<Attribute Name="border" value="2" />
<Attribute Name="align" value="right" />
</ Style>
<Style Name="Custom Bold" element="span">
<Attribute Name="style" value="font-weight: bold;" />
</ Style>
<Style Name="Custom Italic" element="em" />
<Style Name="Title" element="span">
<Attribute Name="class" value="Title" />
</ Style>
<Style Name="Code" element="span">
<Attribute Name="class" value="Code" />
</ Style>
<Style Name="Title H3" element="h3" />
<Style Name="Custom Ruler" element="hr">
<Attribute Name="size" value="1" />
<Attribute Name="color" value="#ff0000" />
</ Style>
</ Styles>
<style> Each style will generate a menu item. name is displayed in the menu name in the text; element of the definition of style can be applied to the kind of html tag, <Attribute> designated name of the label which will be modified to apply the style attribute, value is the modified value.
Look at this:
<Style Name="Title" element="span">
<Attribute Name="class" value="Title" />
</ Style>
If you selected text in fck "Classic Forum" column script production and prospects "FCKeditor combat skills - 1" edit post "application of the style is the original text will become <span classic Forum" column script production and prospects "FCKeditor combat skills - 1 "to edit the post </ span>
Note: If the editor was editing the whole page, and then the whole page inside the style sheet also needs to insert a link to show style.
============================================
FCKeditor JavaScript. API (translation finishing)
Original Address: http://wiki.fckeditor.net/Developer% 27s_Guide/Javascript_API
--------------------------------------------
FCK editor is loaded, it will register a global object of FCKeditorAPI.
FCKeditorAPI object during the page load is not valid until the completion of page load. If you need to know the interactive FCK Editor has completed loading, you can use "FCKeditor_OnComplete" function.
<script. type="text/javascript">
function FCKeditor_OnComplete (editorInstance) (
FCKeditorAPI.GetInstance ( 'FCKeditor1'). Commands.GetCommand ( 'FitWindow'). Execute ();
)
</ script>
On the current page FCK Editor was examples:
var Editor = FCKeditorAPI.GetInstance ( 'InstanceName');
FCK Editor from the pop-up window in FCK Editor was examples:
var Editor = window.parent.InnerDialogLoaded (). FCK;
Page from the framework of the sub-frames access to other sub-frames in the FCK editor instance:
var Editor = window.FrameName.FCKeditorAPI.GetInstance ( 'InstanceName');
Pop-up window from the page to obtain the parent window of the FCK editor instance:
var Editor = opener.FCKeditorAPI.GetInstance ( 'InstanceName');
Access to the contents of FCK Editor:
oEditor.GetXHTML (formatted); / / formatted as: true | false, whether the HTML format that can also be removed:
oEditor.GetXHTML ();
Setting FCK Editor Content:
oEditor.SetHTML ( "content", false); / / The second parameter to: true | false, whether or not to WYSIWYG mode and its contents. This method is commonly used in the "set initial value" or "reset form" operator.
Insert the contents of the FCK Editor:
oEditor.InsertHtml ( "html"); / / "html" for HTML text content to check whether the FCK Editor to change:
oEditor.IsDirty ();
FCK editor in addition to call the FCK Editor toolbar command:
Command as follows:
--------------------------------------------
DocProps, Templates, Link, Unlink, Anchor, BulletedList, NumberedList, About, Find, Replace, Image, Flash, SpecialChar, Smiley, Table, TableProp, TableCellProp, UniversalKey, Style, FontName, FontSize, FontFormat, Source, Preview, Save, NewPage, PageBreak, TextColor, BGColor, PasteText, PasteWord, TableInsertRow, TableDeleteRows, TableInsertColumn, TableDeleteColumns, TableInsertCell, TableDeleteCells, TableMergeCells, TableSplitCell, TableDelete, Form, Checkbox, Radio, TextField, Textarea, HiddenField, Button, Select, ImageButton, SpellCheck, FitWindow, Undo, Redo
--------------------------------------------
Use are as follows:
--------------------------------------------
oEditor.Commands.GetCommand ( 'FitWindow'). Execute ();