In the usual blog system, when we publish articles, in the database is generally not only the text of the article, but also the style of the article, and many times is the result of the WYSIWYG. This requires us to html+ text in this database , by looking for information, you can use a special text editor can be implemented, using the following methods:
FCKeditor is a WYSIWYG text editor that specializes in using open source code on a Web page. It is focused on lightweighting and does not require too complicated installation steps to be used. It can be combined with different programming languages such as PHP, JavaScript, ASP, ASP, ColdFusion, Java, and ABAP. "FCK" in the name "FCKeditor" is the name of the author of this editor Frederico Caldeira knabben abbreviation.
What is FCKeditor
FCKeditor is compatible with most Web browsers, such as Internet Explorer 5.5+ (Windows), Mozilla Firefox 1.0+, Mozilla 1.3+, and Netscape 7+. In the future version will also be added to Opera support.
FckEditor renamed CKEditor
The famous Open source Web page editing software, FCKeditor, was released in 09 and updated to 3.0 and renamed CKEditor. Originally called FCK, is because the original developer called Frederico Calderia Knabben, now called CK, meaning "Content and knowledge." Newer versions of the editor include: New user interface, a JavaScript API that supports plug-in, and support for the use of visually impaired people. "
According to the official explanation,CK was a complete rewrite of FCK 's code , and the work began in 2007, and several beta versions were published earlier this year. At this point, for you to serve for 6 years FCKeditor will be replaced by CKEditor.
Configure Chinese explanation
Autodetectlanguage=true/false Automatic Detection language
basehref= "" relative link to the base site
contentlangdirection= "Ltr/rtl" Default text direction
contextmenu= string array, right-click menu contents
Customconfigurationspath= "" Custom configuration file path and name
Debug=true/false whether the debug function is turned on, so that when Fckdebug.output () is called, the content is output in the debug window
Defaultlanguage= "" Default language
editorareacss= the style sheet file for the edit area
When Enablesourcexhtml=true/false is true, HTML is processed into XHTML when switching from a visual interface to a code page
Enablexhtml=true/false whether XHTML is allowed to replace HTML
Fillemptyblocks=true/false uses this feature to replace empty block-level elements with empty Glyd
Fontcolors= "" Sets the text color list when the color picker is displayed
fontformats= "" Setting the name displayed in the text Format list
fontnames= the font name in the Font list
fontsizes= "" Font Size list
Forcepasteasplaintext=true/false force Paste as plain text
Forcesimpleampersand=true/false if the & symbol is not converted to an XML entity
Formatindentator= "" When indenting code uses characters in the source format
Formatoutput=true/false If the code is automatically formatted when the content is output
Formatsource=true/false whether the code is automatically formatted when switching to Code view
Fullpage=true/false whether to allow editing of the entire HTML file, or only allow editing of the contents of the body
Geckousespan=true/false whether the span tag is allowed in place of the b,i,u tag
Iespelldownloadurl= "" Download the spelling checker URL
Imagebrowser=true/false whether to allow browsing server functionality
Imagebrowserurl= "" URL to run when browsing the server
imagebrowserwindowheight= "" Image browser window height
Imagebrowserwindowwidth= "" Image browser window width
Linkbrowser=true/false whether the server is allowed to be browsed when the link is inserted
Linkbrowserurl= "" The URL of the browse server when the link is inserted
linkbrowserwindowheight= "" Link target browser window height
Linkbrowserwindowwidth= "" Link target browser window width
Plugins=object Register Plugin
Pluginspath= "" Plugin folder
Showborders=true/false Merge Border
Skinpath= "" Skin folder location
smileycolumns=12 Number of Chart window columns
Smileyimages= an array of picture file names in the character array's image window
Smileypath= "" Symbol folder path
Smileywindowheight the height of the graphic character window
Smileywindowwidth window width
Spellchecker= "iespell/spellerpages" Setting the spelling checker
Startupfocus=true/false Focus to editor when Open
Stylesxmlpath= "" Setting the location of the XML file that defines the CSS style list
Tabspaces=4 the number of space characters produced by the TAB key
Toolbarcancollapse=true/false whether to allow expansion/collapse of toolbars
Toolbarsets=object allow use of toolbar collections
Toolbarstartexpanded=true/false Open is toolbar whether to expand
Usebroncarriagereturn=true/false whether to generate a BR mark or a P or div tag when you enter
Called in ASP dot net
Calling in ASP dot Net is actually very simple, FCKeditor has a fckeditor dor net (an ASP dot NET server control) that can be easily integrated with ASP dot net.
First go to fckeditor website to download fckeditor and FCKeditor dot NET server controls.
Follow these steps in the ASP dot net page that is called:
1 , for ASP dot NET application Add FCKeditor Dot Control the reference.
Method One, decompression fckeditor dot Net, in the Visual Sutdio toolbox right click → add items, in the Open dialog box click the "Browse" button to navigate to the extracted fckeditor dot net control/bin/release/2.0/ Under the FredCK.FCKeditorV2.dll file, click OK. At this point, FCKeditor will appear in the Toolbox in Visual Studio and will be used just like any other control.
Method Two, copy the FredCK.FCKeditorV2.dll file under/bin/release/2.0/to the Bin folder of the ASP dot NET application, and then add a registration directive in the. aspx page where you want to call FCKeditor <% @ Register assembly= "fredck.fckeditorv2" namespace= "Fredck.fckeditorv2" tagprefix= "FCKeditorV2"%> can be used.
<fckeditorv2:fckeditor id= "FCKeditor1" runat= "Server" >
</FCKeditorV2:FCKeditor>
However, if you access the page in this way, the FCKeditor area will have 404 (File not Found) error. This is because there is no resource file FCKeditor to use. Take a look at the next step:
2 , specifying the location of the resource file
Extract the downloaded FCKeditor to any location under your ASP dot NET application, such as FCKeditor in the application root directory. Then modify the declaration of the control in the page as:
<fckeditorv2:fckeditor id= "FCKeditor1" runat= "Server" basepath= "~/fckeditor/" >
</FCKeditorV2:FCKeditor>
The basepath here is used to specify the location of the FCKeditor resource file (which contains JavaScript scripts, PNG images used to display the FCKeditor toolbar), and the value depends on where you unzipped the FCKeditor.
When the above steps are complete, you will see the fckeditor in the. aspx page (Note: Google Chrome does not support the display of this control).
Called in PHP
<?php
function Fckeditor_iscompatiblebrowser ()
{
if (Isset ($_server)) {
$sAgent = $_server[' http_user_agent ');
}
else {
Global $HTTP _server_vars;
if (Isset ($HTTP _server_vars)) {
$sAgent = $HTTP _server_vars[' http_user_agent ');
}
else {
Global $HTTP _user_agent;
$sAgent = $HTTP _user_agent;
}
}
if (Strpos ($sAgent, ' MSIE ')!== false && Strpos ($sAgent, ' mac ') = = = False && Strpos ($sAgent, ' Opera ') = = = FALSE)
{
$iVersion = (float) substr ($sAgent, Strpos ($sAgent, ' MSIE ') + 5, 3);
Return ($iVersion >= 5.5);
}
else if (Strpos ($sAgent, ' gecko/')!== false)
{
$iVersion = (int) substr ($sAgent, Strpos ($sAgent, ' gecko/') + 6, 8);
Return ($iVersion >= 20030210);
}
else if (Strpos ($sAgent, ' opera/')!== false)
{
$fVersion = (float) substr ($sAgent, Strpos ($sAgent, ' opera/') + 6, 4);
Return ($fVersion >= 9.5);
}
else if (Preg_match ("| applewebkit/(/d+) |i ", $sAgent, $matches))
{
$iVersion = $matches [1];
Return ($matches [1] >= 522);
}
Else
return false;
}
Class FCKeditor
{
Public $InstanceName;
Public $BasePath;
Public $Width;
Public $Height;
Public $ToolbarSet;
Public $Value;
Public $Config;
Public function __construct ($instanceName)
{
$this->instancename = $instanceName;
$this->basepath = '. /common/editor/';
$this->width = ' 100% ';
$this->height = ' 400 ';
$this->toolbarset = ' Default ';
$this->value = ";
$this->config = Array ();
}
Public Function Create ()
{
echo $this->createhtml ();
}
Public Function createhtml ()
{
$HtmlValue = Htmlspecialchars ($this->value);
$Html = ";
if ($this->iscompatible ())
{
if (Isset ($_get[' Fcksource ')) && $_get[' fcksource '] = = "true")
$File = ' fckeditor.original.html ';
Else
$File = ' fckeditor.html ';
$Link = "{$this->basepath}editor/{$File}? instancename={$this->instancename} ";
if ($this->toolbarset! = ")
$Link. = "& toolbar={$this->toolbarset} ";
$Html. = "<input type=/" hidden/"id=/" {$this->instancename}/"name=/" {$this->instancename}/"value=/" {$ htmlvalue}/"style=/" display:none/"/>";
$Html. = "<input type=/" hidden/"id=/" {$this->instancename}___config/"value=/" ". $this->getconfigfieldstring (). "/" style=/"display:none/"/> ";
$Html. = "<iframe id=/" {$this->instancename}___frame/"src=/" {$Link}/"width=/" {$this->width}/"height=/" {$ this->height}/"frameborder=/" 0/"scrolling=/" no/"></iframe>";
}
Else
{
if (Strpos ($this->width, '% ') = = = = False)
$WidthCSS = $this->width. ' PX ';
Else
$WidthCSS = $this->width;
if (Strpos ($this->height, '% ') = = = = False)
$HeightCSS = $this->height. ' PX ';
Else
$HeightCSS = $this->height;
$Html. = "<textarea name=/" {$this->instancename}/"rows=/" 4/"cols=/" 40/"style=/" width: {$WidthCSS}; Height: {$HeightCSS}/">{$HtmlValue}</textarea>";
}
return $Html;
}
Public Function iscompatible ()
{
return Fckeditor_iscompatiblebrowser ();
}
Public Function getconfigfieldstring ()
{
$sParams = ";
$bFirst = true;
foreach ($this->config as $sKey = $sValue)
{
if ($bFirst = = False)
$sParams. = ' & ';
Else
$bFirst = false;
if ($sValue = = = True)
$sParams. = $this->encodeconfig ($sKey). ' =true ';
else if ($sValue = = = False)
$sParams. = $this->encodeconfig ($sKey). ' =false ';
Else
$sParams. = $this->encodeconfig ($sKey). ' = '. $this->encodeconfig ($sValue);
}
return $sParams;
}
Public Function Encodeconfig ($valueToEncode)
{
$chars = Array (
' & ' = '%26 ',
' = ' = ' = '%3d ',
' ' ' = ' = '%22 ');
Return Strtr ($valueToEncode, $chars);
}
}
$editor = new FCKeditor (' editor ');//content in $_post[' ... ' when receiving
$editor->basepath = ". /common/editor/";//fckeditor's Path
?>
Where need to call <?php $editor->create ();? >
The accepted file can be set in $editor = new FCKeditor (' editor ') with the $_post[' editor ' Call (editor)
Called in ASP
First include the main file at the top of the file
<!--#include file= ". /fckeditor.asp "-
Insert the contents of the text area where appropriate:
<%
Dim Ofckeditor
Set ofckeditor = New FCKeditor
Ofckeditor.toolbarset = "A" ' using the tool strip
Ofckeditor.width = "100%" ' width
Ofckeditor.height = "400" ' Height
Ofckeditor.value = ' source file
Ofckeditor.create "Content" text box name
%>
Called in the JSP
Web. XML Configuration:
FckEditor for Java version 2.4
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>
Net.fckeditor.connector.ConnectorServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>
/fckeditor/editor/filemanager/connectors/*
</url-pattern>
</servlet-mapping>
Use tags in JSP to invoke Demo:
<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%>
<%@ taglib uri= "http://java.fckeditor.net" prefix= "FCK"%>
<title>fckeditor Test </title>
<body style= "Text-align:center;" >
FCKeditor test
<form action= "showdata.jsp" method= "POST" >
<fck:editor instancename= "test" height= "400pt" >
<jsp:attribute name= "Value" > here is http://baike.baidu.com/"> Data test
</jsp:attribute>
</FCK:editor>
<input type= "Submit" value= "Submission"/>
<input type= "reset" value= "reset"/>
</form>
</body>
customizing toolbars
/* source= "page source code"
Docprops= "Page Properties"
Save= "Save"
Newpage= "New"
preview= "Preview"
templates= "Stencil"
Cut= "Cut"
copy= "Copy"
paste= "Paste"
pastetext= "Paste as unformatted text"
pasteword= "Paste Word format"
print= "Print"
spellcheck= "spell checker, to install plugins"
undo= "undo"
redo= "Redo"
Find= "Find"
Replace= "Replace"
Selectall= "Select All"
removeformat= "Clear format (clear the format of now text)"
Form= "form Fields"
checkbox= "Check"
Radio= "Single Choice"
Textfield= "Single line Text"
Textarea= "Multiline Text"
select= "List"
button= "button"
imagebutton= "Image Area"
Hiddenfield= "Hidden Fields"
Bold= "Bold"
italic= "Tilt"
Underline= "Underline"
Strikethrough= "Strikethrough"
subscript= "Subscript"
superscript= "Superscript"
orderedlist= "Delete/insert Item List"
unorderedlist= "Delete/Insert Bullets"
outdent= "Decrease Indent"
indent= "Increase Indent"
justifyleft= "Align Left"
justifycenter= "Center Alignment"
Justifyright= "right-justified"
Justifyfull= "Dispersed Alignment"
link= "Links"
unlink= "Delete Link"
anchor= "Insert/delete anchor point"
image= "Uploading Pictures"
Flash= "Uploading animations"
table= "Insert Table"
rule= "Inserting horizontal lines"
smiley= "Insert Expression"
Specialchar= "Inserting special characters"
pagebreak= "Insert Page Break"
Style= "Style"
fontformat= "Format"
Fontname= "Font"
fontsize= "Size"
textcolor= "Font Color"
bgcolor= "Background Color"
fitwindow= "Full Screen editing"
About= "About Us"
*/
That is, the FCKeditor general configuration file, located in the root directory of the Fckconfig.js file. Please follow the list below (whichever is FCKeditor version 2.0): Find the 20th line fckconfig.defaultlanguage = ' en ' and change to Fckconfig.defaultlanguage = ' ZH-CN '; Set default language to Simplified Chinese
Find line 40th fckconfig.tabspaces = 0; Change to fckconfig.tabspaces = 1; That is, you can use the TAB key within the editor domain.
If your editor is also used on the site's front desk, such as for message book or diary reply, then you have to consider the security, at the front desk must not use the default toolbar, or customize the function, or use the system already defined basic, that is, the basic toolbar ,
Find Line 64th:
fckconfig.toolbarsets["Basic"] = [
[' Bold ', ' Italic ', '-', ' orderedlist ', ' unorderedlist ', '-',/* ' Link ', */' Unlink ', '-', ' Style ', ' FontSize ', ' TextColor ', ' BGColor ', '-', ' Smiley ', ' Specialchar ', ' Replace ', ' Preview ']
] ;
This is my revised basic, the image function, remove the add link function, because the image and link and flash and image button Add function can let the front page directly access and upload files, if not changed directly to you upload a Trojan horse is not immediately finished?
An example of displaying a toolbar for all displays:
fckconfig.toolbarsets["Default"] = [//default toolbar name
[' Source ', ' docprops ', '-', ' Save ', ' NewPage ', ' Preview ', '-', ' Templates '],
[' Cut ', ' Copy ', ' Paste ', ' pastetext ', ' Pasteword ', '-', ' Print ', ' spellcheck '],
[' Undo ', ' Redo ', '-', ' Find ', ' Replace ', '-', ' selectall ', ' Removeformat '],
[' Form ', ' Checkbox ', ' Radio ', ' TextField ', ' Textarea ', ' Select ', ' Button ', ' ImageButton ', ' HiddenField '],
’/’,
[' Bold ', ' Italic ', ' underline ', ' strikethrough ', '-', ' subscript ', ' superscript '],
[' Orderedlist ', ' unorderedlist ', '-', ' outdent ', ' Indent '],
[' Justifyleft ', ' justifycenter ', ' justifyright ', ' justifyfull '],
[' Link ', ' Unlink ', ' Anchor '],
[' Image ', ' Flash ', ' Table ', ' Rule ', ' Smiley ', ' Specialchar ', ' pagebreak '],
’/’,
[' Style ', ' Fontformat ', ' fontname ', ' FontSize '],
[' TextColor ', ' BGColor '],
[' Fitwindow ', '-', ' about ']
] ;
Users configure themselves as needed
Official website
Http://www.fckeditor.net
Latest Version
At present FCKeditor has developed to 3.0, and renamed to CKEditor, the latest version is CKEditor 3.6.
CKEditor is a fully rewritten version of FCKeditor that loads faster and easier to use.
FCKeditor last version is 2.6.6
FCKeditor for Java latest version is 2.4
The following changes are relative to 2.3:
The integration pack is now managed by Maven 2 with complete documentation and reports.
Automatic creation of release distribution files (assemblies).
The library runs now from Servlet 2.4/jsp 2.0 and above.
A Complete structure and package review have been done. Base package moved from Com.fredck.FCKeditor to Net.fckeditor.
The Server Side integration requirements is completely fulfilled.
The Simpleuploaderservlet functionality have been merged into the Connectorservlet.
The JSP tag Library has been completely restructured.
A more complete and reliable browser detection code.
New Configuration handling:
★no configuration settings in the Web. XML anymore.
★the Configuration properties can be set in a common properties file or programmatically.
★ ' Convention over conversion ', just reset the properties which don ' t meet your requirements.
Introduced the State-of-the-art slf4j logging facade.
Pluggable interfaces has been introduced to extend the connectorservlet. This system provides session or request-based functionality.
JUnit test coverage on viable classes.
Clean and safe parameter handling and abstraction.
A lot of code performance improvements and tweaks.
How to store the database of blog system articles