FCKeditor编辑器的小贴士

 从子窗口选择图片插到到父窗口FCKeditor编辑器中

第一，从子窗口选择一张图片

//获取要插入的图片的地址
function getPic(num) {
    var src=document.getElementById("pic"+num).src;
    window.returnValue=src;
    window.close();
}

由于在选择图片页面上的图片是动态生成的，所以这里使用("pic"+num）可以保证ID的唯一性。

第二，在父窗口获取传过来的值

function selPic(){
                var InsertValue=window.showModalDialog("selectPic.jsp",window,"dialogWidth:520px;dialogHeight:410px;help:no;maximize:no;minimize:no;scroll:aotu;status:no;resizable:no");
                var oEditor = FCKeditorAPI.GetInstance("content") ;
                if (oEditor.EditMode!= FCK_EDITMODE_WYSIWYG){
                    oEditor.SwitchEditMode();
                    alert('对不起，必须在编辑模式下进行插入操作！');
                }
                else{
                 var icon=document.createElement("img");
                 icon.src=InsertValue;
                 icon.alt="";
                 icon.width="200";
                 icon.heigth="200";
                 icon.border="0";
                 oEditor.InsertHtml(icon);
             }
            }

j假如使用上面的方法是不能把图片插入文本框的。为什么呢？根本原因我也不知道。

不过在FCKeditor手册中提到oEditor.InsertHtml(“a”);这里的a是html.经过简单的验证，这是的a只能是字符串或HTML。

所以这里的图片对象我们这样来定义。

 function selPic(){
                var InsertValue=window.showModalDialog("selectPic.jsp",window,"dialogWidth:520px;dialogHeight:410px;help:no;maximize:no;minimize:no;scroll:aotu;status:no;resizable:no");
                var oEditor = FCKeditorAPI.GetInstance("content") ;
                if (oEditor.EditMode!= FCK_EDITMODE_WYSIWYG){
                    oEditor.SwitchEditMode();
                    alert('对不起，必须在编辑模式下进行插入操作！');
                }
                else{
                    var html=html+"<img src='"+InsertValue+"' alt='你选择插入的图片' width='200' heigth='200' border='0'>";
                   oEditor.InsertHtml(html);
               }
           }

结果ＯＫ。

自动换行

找到fckeditor/editor/css/fck_editorarea.css文件进行修改
body, td
{
font-family: 宋体,黑体,隶书,楷体_GB2312,Arial, Verdana, Sans-Serif;
font-size: 16px;
width:750px;//编辑区大小
word-break:break-all;//自动换行
}

获取焦点

function getContentValue()
{
var oEditor =FCKeditorAPI.GetInstance("ctl00_ContentPlaceHolder1_FCKeditor1");
var Content=oEditor.GetXHTML();
if(Content=="")
{
alert("您还没有写留言哦！");
oEditor.Focus();//获取焦点
return false;
}
}

三种方法调用FCKeditor
1.FCKeditor自定义标签 (必须加头文件  <%@ taglib uri="/FCKeditor" prefix="FCK" %> )
2.script脚本语言调用 (必须引用 脚本文件 <script type="text/javascript" src="/FCKeditor/fckeditor.js"></script> )
3.FCKeditor API 调用 (必须加头文件 <%@ page language="java" import="com.fredck.FCKeditor.*" %> )
--%>
<%--
<form action="show.jsp" method="post" target="_blank">
 <FCK:editor id="content" basePath="/FCKeditor/"
       width="700"
       height="500"
       skinPath="/FCKeditor/editor/skins/silver/"
       toolbarSet = "Default"
 >
 input
        </FCK:editor>
<input type="submit" value="Submit">
</form>
--%>

<form action="show.jsp" 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 oFCKeditor = new FCKeditor('content') ;
 oFCKeditor.BasePath = "/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( "/FCKeditor/" ) ;
oFCKeditor.setValue( "input" );
out.println( oFCKeditor.create() ) ;
%>
<br>
<input type="submit" value="Submit">
</form>
--%>

  添加文件/FCKeditor/show.jsp:
<%
String content = request.getParameter("content");
out.print(content);
%>

 

<script language=”javascript” src=”fckeditor/fckeditor.js” type=”text/javascript”></script>

1.实例化

<script type=”text/javascript”>
var oFCKeditor = new FCKeditor( ‘TxtFileds’ ) ;
oFCKeditor.BasePath = ‘fckeditor/’ ;
oFCKeditor.ToolbarSet = ‘Default’ ;
oFCKeditor.Width = ‘100%’ ;
oFCKeditor.Height = ‘400′ ;
oFCKeditor.Value = ” ;
oFCKeditor.Create() ;
</script>

2.向编辑器中插入数据

function InsertEditor(InsertValue)
{
var oEditor = FCKeditorAPI.GetInstance(’TxtFileds’) ;
if (oEditor.EditMode != FCK_EDITMODE_WYSIWYG ){
oEditor.SwitchEditMode();
alert(’对不起，必须在编辑模式下进行插入操作！’);
}
else{
oEditor.InsertHtml(InsertValue);
}
}

图片上传功能和高级选项给去掉

由于项目有专门的图片管理系统，所以要把把图片上传对话框中的浏览器服务器中的图片上传功能和高级选项给去掉。

这个修改是不能再fckeditor中的配置文件中得以实现的，要先找到editor/dialog/fck_image.html，去掉这个页面中对应的div，这样在选择链接和高级选项时，下面的内容就不出现了。然后清除对话框中的标签还没有去掉。我们还需要去修改ediotr/fck_image/fck_image.js,注释掉不用的js语句就可以实现我们的功能了。

 

 

 

// 获取编辑器中HTML内容
function getEditorHTMLContents(EditorName) {
    var oEditor = FCKeditorAPI.GetInstance(EditorName);
    return(oEditor.GetXHTML(true));
}

// 获取编辑器中文字内容
function getEditorTextContents(EditorName) {
    var oEditor = FCKeditorAPI.GetInstance(EditorName);
    return(oEditor.EditorDocument.body.innerText);
}

// 设置编辑器中内容
function SetEditorContents(EditorName, ContentStr) {
    var oEditor = FCKeditorAPI.GetInstance(EditorName) ;
    oEditor.SetHTML(ContentStr) ;
}

FCKeditorAPI是FCKeditor加载后注册的一个全局对象，利用它我们就可以完成对编辑器的各种操作。

在当前页获得 FCK 编辑器实例：
var Editor = FCKeditorAPI.GetInstance('InstanceName');

从 FCK 编辑器的弹出窗口中获得 FCK 编辑器实例：
var Editor = window.parent.InnerDialogLoaded().FCK;

从框架页面的子框架中获得其它子框架的 FCK 编辑器实例：
var Editor = window.FrameName.FCKeditorAPI.GetInstance('InstanceName');

从页面弹出窗口中获得父窗口的 FCK 编辑器实例：
var Editor = opener.FCKeditorAPI.GetInstance('InstanceName');

获得 FCK 编辑器的内容：
oEditor.GetXHTML(formatted); // formatted 为：true|false，表示是否按HTML格式取出
也可用：
oEditor.GetXHTML();

设置 FCK 编辑器的内容：
oEditor.SetHTML("content", false);

// 第二个参数为：true|false，是否以所见即所得方式设置其内容。此方法常用于"设置初始值"或"表单重置

插入内容到 FCK 编辑器：
oEditor.InsertHtml("html"); // "html"为HTML文本

检查 FCK 编辑器内容是否发生变化：
oEditor.IsDirty();

在 FCK 编辑器之外调用 FCK 编辑器工具条命令：
命令列表如下：
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

使用方法如下：
oEditor.Commands.GetCommand('FitWindow').Execute();

= FCKConfig.BasePath + 'plugins/'  
// FCKConfig.Plugins.Add( 'placeholder', 'en,it' ) ;


如何让编辑器一打开的时候，编辑工具条不出现，等点“展开工具栏”时才出现

 

打开fckconfig.js，找到FCKConfig.ToolbarStartExpanded = true ;true改成false

使用自己的表情图标，打开fckcofnig.js到最底部那一段

FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;//表情图标路径
FCKConfig.SmileyImages = ['regular_smile.gif','sad_smile.gif','wink_smile.gif'] ;//表情图片文件名
FCKConfig.SmileyColumns = 8 ;     //表情添加窗口最每行的表情数

//弹出的模态窗口的宽和高
FCKConfig.SmileyWindowWidth    = 320 ;
FCKConfig.SmileyWindowHeight = 240 ;

文件上传管理部分:
在fckconfig.js找到
FCKConfig.LinkBrowser = true ;
FCKConfig.ImageBrowser = true ;
FCKConfig.FlashBrowser = true ;

 

如果考虑到安全需要把它们设置为false

ConfigUserFilesPath = "/UserFiles/";上传文件的总目录