JavaScript calling method:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script. type=”text/javascript” src=”FCKeditor/”></scrīpt>
<textarea name=”content” cols=”80″ rows=”4″>
</textarea>
<script. type=”text/javascript”>
var FCKeditor = new FCKeditor(”content”);
= “FCKeditor/”;
= 400;
= “Default”;
();
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
If you want to use text data read from the database or txt/html text data from the background from the file.
As long as it is
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<textarea name=”content” cols=”80″ rows=”4″>
</textarea>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Just add the corresponding fields of the formbean for your display content
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<textarea name=”content” cols=”80″ rows=”4″>
<c:out value=”${contentData}” />
</textarea>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
In this way, the content will be displayed in the FCKeditor edit box. After clicking the submit button, you can get the content in the content parameter in the FCKeditor on the page in the corresponding java action in the background. Can be used in struts/jsf.
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Since FCKeditor is slimming down, errors such as lack of object support are often reported. Just add the corresponding js language file to FCKeditor/editor/lang. If the page loading fails (FCKeditor is not defined), there is another possibility that the FCKeditor/file path is incorrect!
The key points about FCKeditor to lose weight are as follows:
1. Delete all folders starting with the "_" underline in the FCKeditor directory and subdirectories
Only keep, , , and delete the rest in the root directory
3. Clear the files and folders in the editor/filemanager/upload directory
4. Delete all files under /editor/filemanager/browser/default/connectors/
5. You can also delete the skin files in the editor/skins directory, leaving only a default set of skins (if you don't need to change your skin)
6. You can also delete files in the editor/lang directory, and only retain, , , , files
7. If you are using javascrīpt to call loading FCKeditor, then you do not need to configure the tag file of fckeditor in it.
8. There is another question. People who are just starting to use FCKeditor often encounter how to control the size and element arrangement of its toolbar. It is actually very simple.
Use such a label[] to divide the number of elements in each row, so that the length and size of the toolbar can be controlled. For specific examples, see toolbarset["Default"]
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Use some options in this to control the functions of the controls in toolbarset and implement functional cropping:
1): Cancel the browsing server and upload functions in the hyperlink. The method is as follows:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
= true;
= true;
Change to:
= false;
= false;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
2): Cancel the browsing server and upload functions in the image link. The method is as follows:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
= true;
= true;
Change to:
= false;
= false;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
3): Cancel advanced functions in Dlg Button, as follows:
= false ;
= false ;
Change to:
= true ;
= true ;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
The next article introduces the upload and browsing server functions of FCKeditor, and how to implement dynamics in it
Super connection, forward to the servlet and filter to call the server's action
How to implement the corresponding user browsing their own pictures list!
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
FCKeditor integrates java servlets to realize file upload and server-side list reading functions FCKeditor itself provides two servlets to implement file upload function and read server-side file list function. These two servlets are:
(Read the file list)
(Implement file upload)
1. Browse the server-side file list
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
In the file, for example: Configuration options in ConnectorServlet:
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</param-value>
</init-param>
It means that the baseDir configuration on the browsing server specifies the list of all files and their directory structures.
If your baseDir is not configured, Connector will automatically create a default folder
UserFiles, the code in the init() method in the corresponding ConnectorServlet is as follows:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
baseDir = getInitParameter(”baseDir”);
if (baseDir == null)
baseDir = “/UserFiles/”;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
I also want to say that the client of FCKeditor calls the server's servlet method using the Ajax idea to implement it. When you click on the browser server (browser server), an asynchronous javascript + xmlhttp call response will be triggered. The servlet in the background will complete the event you want to request, and then the data will be returned to the client in the form of XML for parsing. Obviously, if you want to implement the database or other file system request list, you just need to modify it.
Two private methods in ConnectorServlet: getFolders and getFiles
Just let it go to the place you specified to get a list of files, so that your files can be placed in any directory you specified. To put it more, many people want to know how to upload files in the personal blog system and browse their own lists. My approach is very simple. Create a folder with your username. You can upload it to your directory folder. You can browse the folder under the corresponding user through the program. At this time, you need to modify the path in the Connectorservlet!
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
2.Hyperconnection relocation problem
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKeditor can insert a hyperconnection to implement the preview function of files. As long as we change it slightly, we can make the FCKeditor editor support client browsing, downloading and saving of any file under any file system! FCKeditor originally provided a relative URL hyperlink. As long as we modify the address passed to the client in the ConnectorServlet, we rewritten it into an absolute URL and then redirect the struts action method to download/browse files through our own filter servlet to realize the download and browse of the hyperconnected file in the client! Let me tell you about the specific method:
1): Modify the path passed by ConnectorServlet to the client javasscript, the code is as follows:
String currentUrl = “http://” + + + + resourcePath;
Please assemble the above code in doGet() of ConnectorServlet! When calling CreateCommonXml() private method, the parameters are passed in:
(”path”,currentPath);
(”url”,currentUrl);
Remind resourcePath is an initialization parameter configuration in the ConnectorServlet in the configuration file. When using filter to relocate the hyperconnection, the configuration parameter in the URL is extracted to judge. The configuration is as follows:
<init-param>
<param-name>resourcePath</param-name>
<param-value>/fileSystem/</param-value>
</init-param>
2): Create your filter servlet, implement the intercept of the URL, and relocate the URL that meets the requirements into your corresponding action.
3): Just implement your corresponding action to implement the upload and download functions of files!
4): Extended function - implements encryption of URLs, add a string of characters to the connected URL, and the last few digits are used as algorithm verification. For URL connections that do not meet the requirements, filter will refuse to relocate to the specified action. In addition, using the extended class you wrote, you can also limit the file types of hyperconnections. For example, you can only hyperconnect files with several suffix names such as JPG|GIF|DOC|TXT|HTML, etc., and let you browse and download other files even if you specify hyperconnections. These can be achieved by modifying the initialization parameters of the corresponding servlet configuration file.
3. Page javascrīpt modification
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
The corresponding html/javascript related files corresponding to the browsing server function are: and corresponding information you want to pass. You can append the file name after the file name string and implement intercepting the file name in the javascript function of GetFileRowHtml(). In this way, the client will only display the file name, and you can get the database unique identifier of the file. Any information you want can be implemented by modifying the private method getFiles() in the ConnectorServlet. Just modify the variable fileName in GetFileRowHtml() on the page. You can also implement your own Ajax call when you click to select the file, everything depends on your project needs!
4. I am not a javascript expert. In fact, if I know more about javascript, I may make more dazzling functions after modifying the client's code. It can better complete the FCKeditor cropping.
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
5. Pay attention
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
No matter how you modify other people’s things, please respect the spirit of open source!
Many people often encounter xmlhttp request 404 error after configuring the upload function of FCKeditor. The following is a string of paths. In fact, the path in your servlet-mapping is wrong. You just copy the path followed by xmlhttp request error 404 to the corresponding red text in your location, as follows:
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
Don't forget that the SimpleUploader's servlet-mapping also needs to make the same modifications!
Another error is the http 500 error. This may be because your URL request is incorrect, and it should have nothing to do with FCKeditor!
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
The total configuration file can be opened with the record book. After modification, save the file in utf-8 encoding format. turn up:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
= 0;
Change to:
= 1;
That is, the Tab key can be used in the editor domain.
If your editor is still used in the front desk of the website, such as when using a message book or a diary reply, you have to consider security.
Don't use Default's toolbar in the front desk. You either customize the functions or use Basic already defined by the system.
That is the basic toolbar, find:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
[”Basic”] = [
['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-',
‘Smiley','SpecialChar','Replace','Preview'] ];
This is a modified Basic. It removes the image function and the link function, because the image and link, the flash and image button addition functions can allow the foreground page to directly access and upload files. Fckeditor also supports the right mouse button function in the editing domain.
= ['Generic',/*'Link',*/'Anchor',/*'Image',*/'Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField',
/*'ImageButton',*/'Button','BulletedList','NumberedList','TableCell','Table','Form'];
This is also a modified way to remove the "link, image, FLASH, image button" function of the right mouse button.
turn up:
= ‘Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';
Add several fonts we use frequently
= ‘Song font; bold font; official script; regular font_GB2312; Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana';
Add file /TestFCKeditor/:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<%@ page language=”java” import=”.*” %>
<%@ taglib uri=”/TestFCKeditor” prefix=”FCK” %>
<script. type=”text/javascript” src=”/TestFCKeditor/FCKeditor/”></script>
<%–
Three methods call FCKeditor
Custom tags (the header file must be added <%@ taglib uri=”/TestFCKeditor” prefix=”FCK %> )
Script language call (must reference script file <script.type="text/javascript" src="/TestFCKeditor/FCKeditor/"></script> )
API call (the header file must be added <%@ page language=”java” import=”.*” %> )
–%>
<%–
<form. action=”” method=”post” target=”_blank”>
<FCK:editor id=”content” basePath=”/TestFCKeditor/FCKeditor/”
width=”700″ height=”500″ skinPath=”/TestFCKeditor/FCKeditor/editor/skins/silver/”
toolbarSet = “Default”>
content
</FCK:editor>
<input type=”submit” value=”Submit”>
</form>
–%>
<form. action=”” method=”post” target=”_blank”>
<table border=”0″ width=”700″>
<tr>
<td>
<textarea id=”content” name=”content” style=”WIDTH: 100%; HEIGHT: 400px”>input</textarea>
<script. type=”text/javascript”>
var FCKeditor = new FCKeditor('content? ;
= “/TestFCKeditor/FCKeditor/” ;
= 400;
= “Default” ;
();
</script>
<input type=”submit” value=”Submit”>
</td>
</tr>
</table>
</form>
<%–
<form. action=”” method=”post” target=”_blank”>
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, “content” ) ;
( “/TestFCKeditor/FCKeditor/” ) ;
( “input” );
( () ) ;
%>
<br>
<input type=”submit” value=”Submit”>
</form>
–%>
Add file /TestFCKeditor/:
<%
String content = (”content”);
(content);
%>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
1. Open the editor at the right time
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Many times, we do not need to open the editor directly when opening the page, but only open it when used. This will have a good user experience. On the other hand, it can eliminate the impact of FCK on the page opening speed when loading, and open the editor interface after clicking the "Open Editor" button.
Implementation principle:
Using JAVASCRIPT version of FCK, when the page loads (the FCK is not opened), create a hidden TextArea field, this TextArea
The name and ID of the created FCK instance name should be consistent with the name of the created FCK instance. Then, when clicking the "Open Editor" button, use a function by calling a function.
FCK's ReplaceTextarea() method is used to create FCKeditor, the code is as follows:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script. type=”text/javascript”>
<!–
function showFCK(){
var FCKeditor = new FCKeditor( ‘fbContent' ) ;
= ‘/FCKeditor/' ;
= ‘Basic' ;
= ‘100%' ;
= ‘200′ ;
() ;
}
//–>
</script>
<textarea name=”fbContent” id=”fbContent”></textarea>
2. Use FCKeditor's API
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKeditor editor provides a very rich API for implementing many functions that you want to customize for End User, such as the most basic data verification, how to use JS to determine whether there is content in the current editor area when submitting, FCK API provides the GetLength() method;
For example, how to insert content into the FCK through scripts, use InsertHTML(), etc.;
Also, when the user customizes the function, the intermediate step may require some embedded operations of FCK, so use the ExecuteCommand() method.
For a detailed API list, please check the FCKeditor wiki. For common APIs, please check _samples/html/ in the FCK compression package. I won't post the code here.
3. Outreach edit bar (multiple edit fields share one edit bar)
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
This function was only provided by version 2.3. If the previous version of FCKeditor had to use multiple editors on the same page, they had to create one by one. Now with this outreach function, there is no need to be so troublesome. You just need to put the toolbar in an appropriate position, and you can create editing domains without limits later.
To implement this function, you need to first define a container for the toolbar in the page: <div id="xToolbar"></div>, and then set it according to the id attribute of this container.
JAVASCRIPT implementation code:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<div id=”xToolbar”></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:
// = ‘/fckeditor/'; // ‘/fckeditor/' is the default value.
var sBasePath = (0,('_samples'));
var FCKeditor = new FCKeditor( ‘FCKeditor_1′ );
= sBasePath;
= 100;
[ ‘ToolbarLocation' ] = ‘Out:parent(xToolbar)';
= ‘This is some <strong>sample text</strong>. You are using FCKeditor.';
();
//–>
</script>
<br />
FCKeditor 2:
<script. type=”text/javascript”>
<!–
FCKeditor = new FCKeditor( ‘FCKeditor_2′ );
= sBasePath;
= 100;
[ ‘ToolbarLocation' ] = ‘Out:parent(xToolbar)';
= ‘This is some <strong>sample text</strong>. You are using FCKeditor.';
();
//–>
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
For details of this section, please refer to _samples/html/, _samples/html/sample11_frame.html
4. File management function and file upload permission issues
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
The security of FCKeditor's file management part is worth noting, but many people have not noticed it. Although one of the functions that FCKeditor has always existed in various Release versions is to filter the uploaded file types, she has not considered another question: Who is allowed to upload? Who can browse server files?
I had this problem when I first started using FCKeditor. Fortunately, NetRube (the author of the FCKeditor Chinese Culture and FCKeditor ASP upload program) promptly reminded me that the method is to modify the FCK upload program, make permission judgments in it, and then remove some corresponding functions in it. But with the continuous upgrade of the FCK version, I have to change the configuration program every time I upgrade. I feel bored, so I can't control this configuration better? In fact, there is.
In it, there are settings on whether to open the upload and browse server. When creating FCKeditor, the program determines whether to create an editor with upload and browse function. First, I set all upload and browsing settings to false in it, and then the code I use is as follows:
JAVASCRIPT version:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script. type=”text/javascript”>
var FCKeditor = new FCKeditor( ‘fbContent' );
<% if power = powercode then %>
['LinkBrowser'] = true;
['ImageBrowser'] = true;
['FlashBrowser'] = true;
['LinkUpload'] = true;
['ImageUpload'] = true;
['FlashUpload'] = true;
<% end if %>
= ‘Basic';
= ‘100%';
= ‘200′;
= ‘';
();
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Add text next to the button
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Open editor/js/ two js files
fckeditorcode_gecko.js
fckeditorcode_ie.js
The first one is to support non-IE browsers
The second file supports IE browser
Searching for FCKToolbarButton, you can see many statements like this:
case ‘Save':B = new FCKToolbarButton('Save', , null, null, true, null, 3); break;
‘Save’ is the English name of the button
The four parameters of FCKToolbarButton are:
Button command name, button label text, button tooltips, button style, whether the button is visible in source code mode, button drop-down menu, set the 4th parameter to FCK_TOOLBARITEM_ICONTEXT to make text appear next to the button, note that there are no quotes.
For example:
case ‘Preview':B = new FCKToolbarButton('Preview', , null, FCK_TOOLBARITEM_ICONTEXT, true, null, 5);
In this way, we can add text to the source code, preview, and full-screen editing buttons that we often use.
Explain how fck style works
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
The style setting of fck involves two files, one is the stylesheet file.css you defined, and the other is the xml file that tells fck stylesheets how to use. Both files are indeed indispensable.
The location of the css file is not required, but you need to insert a link to the stylesheet file on the page of the application editor. This way the style can be displayed.
In a directory of the same level as the editor directory. This file defines which styles can be used in those tags.
This is the style XML definition that comes with fck:
<?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>
Each <style> will generate a style menu item in the future. The name name is the text displayed in the menu; element defines which html tag the style can be applied to, the name of <Attribute> specifies which attribute of the tag will be modified to apply the style, and the value is the modified value.
Look at this:
<Style name=”Title” element=”span”>
<Attribute name=”class” value=”Title” />
</Style>
If you selected the text in fck "Classic Forum" Front Desk Production and Script Column 》 FCKeditor Practical Skills - 1 》 Edit Posts "Apply this style, the original text will become <span class="Title">Classic Forum" Front Desk Production and Script Column 》 FCKeditor Practical Skills - 1 》 Edit Posts</span>
Note: If the editor is in the full page editing state, then the stylesheet link is also required to insert the style in the entire page to display the style.
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
FCKeditor JavaScript. API (translation and compilation)
Original address:/Developer%27s_Guide/Javascript_API
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
After the FCK editor is loaded, a global FCKeditorAPI object will be registered.
The FCKeditorAPI object is invalid during page loading until the page loading is complete. If you need to interactively know that the FCK editor has been loaded, you can use the FCKeditor_OnComplete function.
<script. type=”text/javascript”>
function FCKeditor_OnComplete(editorInstance) {
('FCKeditor1′).('FitWindow').Execute();
}
</script>
Obtain an FCK editor instance on the current page:
var Editor = ('InstanceName');
Obtain an FCK editor instance from the pop-up window of the FCK editor:
var Editor = ().FCK;
Get an FCK editor instance for other subframes from the subframes of the frame page:
var Editor = ('InstanceName');
Get the FCK editor instance of the parent window from the page popup:
var Editor = ('InstanceName');
Get the contents of the FCK editor:
(formatted); // formatted is: true|false, indicating whether to be taken out in HTML format
Also available:
();
Set the contents of the FCK editor:
("content", false); // The second parameter is: true|false, whether to set its content in the form of what you see, that is, what you get. This method is commonly used for "Set Initial Value" or "Form Reset" operations.
Insert content into the FCK editor:
("html"); // "html" is HTML text
Check if the FCK editor content has changed:
();
Call the FCK Editor toolbar command outside the FCK Editor:
The command list is 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
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
How to use it is as follows:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
('FitWindow').Execute();
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script. type=”text/javascript” src=”FCKeditor/”></scrīpt>
<textarea name=”content” cols=”80″ rows=”4″>
</textarea>
<script. type=”text/javascript”>
var FCKeditor = new FCKeditor(”content”);
= “FCKeditor/”;
= 400;
= “Default”;
();
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
If you want to use text data read from the database or txt/html text data from the background from the file.
As long as it is
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<textarea name=”content” cols=”80″ rows=”4″>
</textarea>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Just add the corresponding fields of the formbean for your display content
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<textarea name=”content” cols=”80″ rows=”4″>
<c:out value=”${contentData}” />
</textarea>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
In this way, the content will be displayed in the FCKeditor edit box. After clicking the submit button, you can get the content in the content parameter in the FCKeditor on the page in the corresponding java action in the background. Can be used in struts/jsf.
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Since FCKeditor is slimming down, errors such as lack of object support are often reported. Just add the corresponding js language file to FCKeditor/editor/lang. If the page loading fails (FCKeditor is not defined), there is another possibility that the FCKeditor/file path is incorrect!
The key points about FCKeditor to lose weight are as follows:
1. Delete all folders starting with the "_" underline in the FCKeditor directory and subdirectories
Only keep, , , and delete the rest in the root directory
3. Clear the files and folders in the editor/filemanager/upload directory
4. Delete all files under /editor/filemanager/browser/default/connectors/
5. You can also delete the skin files in the editor/skins directory, leaving only a default set of skins (if you don't need to change your skin)
6. You can also delete files in the editor/lang directory, and only retain, , , , files
7. If you are using javascrīpt to call loading FCKeditor, then you do not need to configure the tag file of fckeditor in it.
8. There is another question. People who are just starting to use FCKeditor often encounter how to control the size and element arrangement of its toolbar. It is actually very simple.
Use such a label[] to divide the number of elements in each row, so that the length and size of the toolbar can be controlled. For specific examples, see toolbarset["Default"]
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Use some options in this to control the functions of the controls in toolbarset and implement functional cropping:
1): Cancel the browsing server and upload functions in the hyperlink. The method is as follows:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
= true;
= true;
Change to:
= false;
= false;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
2): Cancel the browsing server and upload functions in the image link. The method is as follows:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
= true;
= true;
Change to:
= false;
= false;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
3): Cancel advanced functions in Dlg Button, as follows:
= false ;
= false ;
Change to:
= true ;
= true ;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
The next article introduces the upload and browsing server functions of FCKeditor, and how to implement dynamics in it
Super connection, forward to the servlet and filter to call the server's action
How to implement the corresponding user browsing their own pictures list!
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
FCKeditor integrates java servlets to realize file upload and server-side list reading functions FCKeditor itself provides two servlets to implement file upload function and read server-side file list function. These two servlets are:
(Read the file list)
(Implement file upload)
1. Browse the server-side file list
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
In the file, for example: Configuration options in ConnectorServlet:
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</param-value>
</init-param>
It means that the baseDir configuration on the browsing server specifies the list of all files and their directory structures.
If your baseDir is not configured, Connector will automatically create a default folder
UserFiles, the code in the init() method in the corresponding ConnectorServlet is as follows:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
baseDir = getInitParameter(”baseDir”);
if (baseDir == null)
baseDir = “/UserFiles/”;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
I also want to say that the client of FCKeditor calls the server's servlet method using the Ajax idea to implement it. When you click on the browser server (browser server), an asynchronous javascript + xmlhttp call response will be triggered. The servlet in the background will complete the event you want to request, and then the data will be returned to the client in the form of XML for parsing. Obviously, if you want to implement the database or other file system request list, you just need to modify it.
Two private methods in ConnectorServlet: getFolders and getFiles
Just let it go to the place you specified to get a list of files, so that your files can be placed in any directory you specified. To put it more, many people want to know how to upload files in the personal blog system and browse their own lists. My approach is very simple. Create a folder with your username. You can upload it to your directory folder. You can browse the folder under the corresponding user through the program. At this time, you need to modify the path in the Connectorservlet!
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
2.Hyperconnection relocation problem
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKeditor can insert a hyperconnection to implement the preview function of files. As long as we change it slightly, we can make the FCKeditor editor support client browsing, downloading and saving of any file under any file system! FCKeditor originally provided a relative URL hyperlink. As long as we modify the address passed to the client in the ConnectorServlet, we rewritten it into an absolute URL and then redirect the struts action method to download/browse files through our own filter servlet to realize the download and browse of the hyperconnected file in the client! Let me tell you about the specific method:
1): Modify the path passed by ConnectorServlet to the client javasscript, the code is as follows:
String currentUrl = “http://” + + + + resourcePath;
Please assemble the above code in doGet() of ConnectorServlet! When calling CreateCommonXml() private method, the parameters are passed in:
(”path”,currentPath);
(”url”,currentUrl);
Remind resourcePath is an initialization parameter configuration in the ConnectorServlet in the configuration file. When using filter to relocate the hyperconnection, the configuration parameter in the URL is extracted to judge. The configuration is as follows:
<init-param>
<param-name>resourcePath</param-name>
<param-value>/fileSystem/</param-value>
</init-param>
2): Create your filter servlet, implement the intercept of the URL, and relocate the URL that meets the requirements into your corresponding action.
3): Just implement your corresponding action to implement the upload and download functions of files!
4): Extended function - implements encryption of URLs, add a string of characters to the connected URL, and the last few digits are used as algorithm verification. For URL connections that do not meet the requirements, filter will refuse to relocate to the specified action. In addition, using the extended class you wrote, you can also limit the file types of hyperconnections. For example, you can only hyperconnect files with several suffix names such as JPG|GIF|DOC|TXT|HTML, etc., and let you browse and download other files even if you specify hyperconnections. These can be achieved by modifying the initialization parameters of the corresponding servlet configuration file.
3. Page javascrīpt modification
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
The corresponding html/javascript related files corresponding to the browsing server function are: and corresponding information you want to pass. You can append the file name after the file name string and implement intercepting the file name in the javascript function of GetFileRowHtml(). In this way, the client will only display the file name, and you can get the database unique identifier of the file. Any information you want can be implemented by modifying the private method getFiles() in the ConnectorServlet. Just modify the variable fileName in GetFileRowHtml() on the page. You can also implement your own Ajax call when you click to select the file, everything depends on your project needs!
4. I am not a javascript expert. In fact, if I know more about javascript, I may make more dazzling functions after modifying the client's code. It can better complete the FCKeditor cropping.
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
5. Pay attention
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
No matter how you modify other people’s things, please respect the spirit of open source!
Many people often encounter xmlhttp request 404 error after configuring the upload function of FCKeditor. The following is a string of paths. In fact, the path in your servlet-mapping is wrong. You just copy the path followed by xmlhttp request error 404 to the corresponding red text in your location, as follows:
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
Don't forget that the SimpleUploader's servlet-mapping also needs to make the same modifications!
Another error is the http 500 error. This may be because your URL request is incorrect, and it should have nothing to do with FCKeditor!
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
The total configuration file can be opened with the record book. After modification, save the file in utf-8 encoding format. turn up:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
= 0;
Change to:
= 1;
That is, the Tab key can be used in the editor domain.
If your editor is still used in the front desk of the website, such as when using a message book or a diary reply, you have to consider security.
Don't use Default's toolbar in the front desk. You either customize the functions or use Basic already defined by the system.
That is the basic toolbar, find:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
[”Basic”] = [
['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-',
‘Smiley','SpecialChar','Replace','Preview'] ];
This is a modified Basic. It removes the image function and the link function, because the image and link, the flash and image button addition functions can allow the foreground page to directly access and upload files. Fckeditor also supports the right mouse button function in the editing domain.
= ['Generic',/*'Link',*/'Anchor',/*'Image',*/'Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField',
/*'ImageButton',*/'Button','BulletedList','NumberedList','TableCell','Table','Form'];
This is also a modified way to remove the "link, image, FLASH, image button" function of the right mouse button.
turn up:
= ‘Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';
Add several fonts we use frequently
= ‘Song font; bold font; official script; regular font_GB2312; Arial; Comic Sans MS; Courier New; Tahoma; Times New Roman; Verdana';
Add file /TestFCKeditor/:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<%@ page language=”java” import=”.*” %>
<%@ taglib uri=”/TestFCKeditor” prefix=”FCK” %>
<script. type=”text/javascript” src=”/TestFCKeditor/FCKeditor/”></script>
<%–
Three methods call FCKeditor
Custom tags (the header file must be added <%@ taglib uri=”/TestFCKeditor” prefix=”FCK %> )
Script language call (must reference script file <script.type="text/javascript" src="/TestFCKeditor/FCKeditor/"></script> )
API call (the header file must be added <%@ page language=”java” import=”.*” %> )
–%>
<%–
<form. action=”” method=”post” target=”_blank”>
<FCK:editor id=”content” basePath=”/TestFCKeditor/FCKeditor/”
width=”700″ height=”500″ skinPath=”/TestFCKeditor/FCKeditor/editor/skins/silver/”
toolbarSet = “Default”>
content
</FCK:editor>
<input type=”submit” value=”Submit”>
</form>
–%>
<form. action=”” method=”post” target=”_blank”>
<table border=”0″ width=”700″>
<tr>
<td>
<textarea id=”content” name=”content” style=”WIDTH: 100%; HEIGHT: 400px”>input</textarea>
<script. type=”text/javascript”>
var FCKeditor = new FCKeditor('content? ;
= “/TestFCKeditor/FCKeditor/” ;
= 400;
= “Default” ;
();
</script>
<input type=”submit” value=”Submit”>
</td>
</tr>
</table>
</form>
<%–
<form. action=”” method=”post” target=”_blank”>
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, “content” ) ;
( “/TestFCKeditor/FCKeditor/” ) ;
( “input” );
( () ) ;
%>
<br>
<input type=”submit” value=”Submit”>
</form>
–%>
Add file /TestFCKeditor/:
<%
String content = (”content”);
(content);
%>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
1. Open the editor at the right time
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Many times, we do not need to open the editor directly when opening the page, but only open it when used. This will have a good user experience. On the other hand, it can eliminate the impact of FCK on the page opening speed when loading, and open the editor interface after clicking the "Open Editor" button.
Implementation principle:
Using JAVASCRIPT version of FCK, when the page loads (the FCK is not opened), create a hidden TextArea field, this TextArea
The name and ID of the created FCK instance name should be consistent with the name of the created FCK instance. Then, when clicking the "Open Editor" button, use a function by calling a function.
FCK's ReplaceTextarea() method is used to create FCKeditor, the code is as follows:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script. type=”text/javascript”>
<!–
function showFCK(){
var FCKeditor = new FCKeditor( ‘fbContent' ) ;
= ‘/FCKeditor/' ;
= ‘Basic' ;
= ‘100%' ;
= ‘200′ ;
() ;
}
//–>
</script>
<textarea name=”fbContent” id=”fbContent”></textarea>
2. Use FCKeditor's API
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKeditor editor provides a very rich API for implementing many functions that you want to customize for End User, such as the most basic data verification, how to use JS to determine whether there is content in the current editor area when submitting, FCK API provides the GetLength() method;
For example, how to insert content into the FCK through scripts, use InsertHTML(), etc.;
Also, when the user customizes the function, the intermediate step may require some embedded operations of FCK, so use the ExecuteCommand() method.
For a detailed API list, please check the FCKeditor wiki. For common APIs, please check _samples/html/ in the FCK compression package. I won't post the code here.
3. Outreach edit bar (multiple edit fields share one edit bar)
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
This function was only provided by version 2.3. If the previous version of FCKeditor had to use multiple editors on the same page, they had to create one by one. Now with this outreach function, there is no need to be so troublesome. You just need to put the toolbar in an appropriate position, and you can create editing domains without limits later.
To implement this function, you need to first define a container for the toolbar in the page: <div id="xToolbar"></div>, and then set it according to the id attribute of this container.
JAVASCRIPT implementation code:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<div id=”xToolbar”></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:
// = ‘/fckeditor/'; // ‘/fckeditor/' is the default value.
var sBasePath = (0,('_samples'));
var FCKeditor = new FCKeditor( ‘FCKeditor_1′ );
= sBasePath;
= 100;
[ ‘ToolbarLocation' ] = ‘Out:parent(xToolbar)';
= ‘This is some <strong>sample text</strong>. You are using FCKeditor.';
();
//–>
</script>
<br />
FCKeditor 2:
<script. type=”text/javascript”>
<!–
FCKeditor = new FCKeditor( ‘FCKeditor_2′ );
= sBasePath;
= 100;
[ ‘ToolbarLocation' ] = ‘Out:parent(xToolbar)';
= ‘This is some <strong>sample text</strong>. You are using FCKeditor.';
();
//–>
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
For details of this section, please refer to _samples/html/, _samples/html/sample11_frame.html
4. File management function and file upload permission issues
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
The security of FCKeditor's file management part is worth noting, but many people have not noticed it. Although one of the functions that FCKeditor has always existed in various Release versions is to filter the uploaded file types, she has not considered another question: Who is allowed to upload? Who can browse server files?
I had this problem when I first started using FCKeditor. Fortunately, NetRube (the author of the FCKeditor Chinese Culture and FCKeditor ASP upload program) promptly reminded me that the method is to modify the FCK upload program, make permission judgments in it, and then remove some corresponding functions in it. But with the continuous upgrade of the FCK version, I have to change the configuration program every time I upgrade. I feel bored, so I can't control this configuration better? In fact, there is.
In it, there are settings on whether to open the upload and browse server. When creating FCKeditor, the program determines whether to create an editor with upload and browse function. First, I set all upload and browsing settings to false in it, and then the code I use is as follows:
JAVASCRIPT version:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script. type=”text/javascript”>
var FCKeditor = new FCKeditor( ‘fbContent' );
<% if power = powercode then %>
['LinkBrowser'] = true;
['ImageBrowser'] = true;
['FlashBrowser'] = true;
['LinkUpload'] = true;
['ImageUpload'] = true;
['FlashUpload'] = true;
<% end if %>
= ‘Basic';
= ‘100%';
= ‘200′;
= ‘';
();
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Add text next to the button
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Open editor/js/ two js files
fckeditorcode_gecko.js
fckeditorcode_ie.js
The first one is to support non-IE browsers
The second file supports IE browser
Searching for FCKToolbarButton, you can see many statements like this:
case ‘Save':B = new FCKToolbarButton('Save', , null, null, true, null, 3); break;
‘Save’ is the English name of the button
The four parameters of FCKToolbarButton are:
Button command name, button label text, button tooltips, button style, whether the button is visible in source code mode, button drop-down menu, set the 4th parameter to FCK_TOOLBARITEM_ICONTEXT to make text appear next to the button, note that there are no quotes.
For example:
case ‘Preview':B = new FCKToolbarButton('Preview', , null, FCK_TOOLBARITEM_ICONTEXT, true, null, 5);
In this way, we can add text to the source code, preview, and full-screen editing buttons that we often use.
Explain how fck style works
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
The style setting of fck involves two files, one is the stylesheet file.css you defined, and the other is the xml file that tells fck stylesheets how to use. Both files are indeed indispensable.
The location of the css file is not required, but you need to insert a link to the stylesheet file on the page of the application editor. This way the style can be displayed.
In a directory of the same level as the editor directory. This file defines which styles can be used in those tags.
This is the style XML definition that comes with fck:
<?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>
Each <style> will generate a style menu item in the future. The name name is the text displayed in the menu; element defines which html tag the style can be applied to, the name of <Attribute> specifies which attribute of the tag will be modified to apply the style, and the value is the modified value.
Look at this:
<Style name=”Title” element=”span”>
<Attribute name=”class” value=”Title” />
</Style>
If you selected the text in fck "Classic Forum" Front Desk Production and Script Column 》 FCKeditor Practical Skills - 1 》 Edit Posts "Apply this style, the original text will become <span class="Title">Classic Forum" Front Desk Production and Script Column 》 FCKeditor Practical Skills - 1 》 Edit Posts</span>
Note: If the editor is in the full page editing state, then the stylesheet link is also required to insert the style in the entire page to display the style.
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
FCKeditor JavaScript. API (translation and compilation)
Original address:/Developer%27s_Guide/Javascript_API
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
After the FCK editor is loaded, a global FCKeditorAPI object will be registered.
The FCKeditorAPI object is invalid during page loading until the page loading is complete. If you need to interactively know that the FCK editor has been loaded, you can use the FCKeditor_OnComplete function.
<script. type=”text/javascript”>
function FCKeditor_OnComplete(editorInstance) {
('FCKeditor1′).('FitWindow').Execute();
}
</script>
Obtain an FCK editor instance on the current page:
var Editor = ('InstanceName');
Obtain an FCK editor instance from the pop-up window of the FCK editor:
var Editor = ().FCK;
Get an FCK editor instance for other subframes from the subframes of the frame page:
var Editor = ('InstanceName');
Get the FCK editor instance of the parent window from the page popup:
var Editor = ('InstanceName');
Get the contents of the FCK editor:
(formatted); // formatted is: true|false, indicating whether to be taken out in HTML format
Also available:
();
Set the contents of the FCK editor:
("content", false); // The second parameter is: true|false, whether to set its content in the form of what you see, that is, what you get. This method is commonly used for "Set Initial Value" or "Form Reset" operations.
Insert content into the FCK editor:
("html"); // "html" is HTML text
Check if the FCK editor content has changed:
();
Call the FCK Editor toolbar command outside the FCK Editor:
The command list is 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
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
How to use it is as follows:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
('FitWindow').Execute();
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－