77家的会客厅2010

FCKeditor实战技巧-1，版本2.3.2
Weather:晴 ,东风 ３－４级 ,最高气温25 ℃
2006-09-21

'//--------------------------------------------------
'//原文：http://3rgb.com，作者：柠檬园主
'//转载请保留此信息
'//--------------------------------------------------

FCKeditor至今已经到了2.3.1版本了，对于国内的WEB开发者来说，也基本上都已经“闻风知多少”了，很多人将其融放到自己的项目中，更有很多大型的网站从中吃到了甜头。今天开始，我将一点点的介绍自己在使用FCKeditor过程中总结的一些技巧，当然这些其实是FCK本来就有的，只是很多人用FCK的时候没发现而已 :P

1、适时打开编辑器

很多时候，我们在打开页面的时候不需要直接打开编辑器，而在用到的时候才打开，这样一来有很好的用户体验，另一方面可以消除FCK在加载时对页面打开速度的影响，如图所示

点击“Open Editor"按钮后才打开编辑器界面

实现原理：使用JAVASCRIPT版的FCK，在页面加载时（未打开FCK），创建一个隐藏的TextArea域，这个TextArea的name和ID要和创建的FCK实例名称一致，然后点击"Open Editor"按钮时，通过调用一段函数，使用FCK的ReplaceTextarea()方法来创建FCKeditor，代码如下：

     <script type="text/javascript">
     <!--
     function showFCK(){
      var oFCKeditor = new FCKeditor( 'fbContent' ) ;
      oFCKeditor.BasePath = '/FCKeditor/' ;
      oFCKeditor.ToolbarSet = 'Basic' ;
      oFCKeditor.Width = '100%' ;
      oFCKeditor.Height = '200' ;
      oFCKeditor.ReplaceTextarea() ;
     }
     //-->
     </script>
     <textarea name="fbContent" id="fbContent">textarea>

2、使用FCKeditor 的 API

FCKeditor编辑器，提供了非常丰富的API，用于给End User实现很多想要定制的功能，比如最基本的数据验证，如何在提交的时候用JS判断当前编辑器区域内是否有内容，FCK的API提供了GetLength()方法；

再比如如何通过脚本向FCK里插入内容，使用InsertHTML()等；

还有，在用户定制功能时，中间步骤可能要执行FCK的一些内嵌操作，那就用ExecuteCommand()方法。

详细的API列表，请查看FCKeditor的Wiki。而常用的API，请查看FCK压缩包里的_samples/html/sample08.html。此处就不贴代码了。

3、外联编辑条（多个编辑域共用一个编辑条）

这个功能是2.3版本才开始提供的，以前版本的FCKeditor要在同一个页面里用多个编辑器的话，得一个个创建，现在有了这个外联功能，就不用那么麻烦了，只需要把工具条放在一个适当的位置，后面就可以无限制的创建编辑域了，如图

要实现这种功能呢，需要先在页面中定义一个工具条的容器：<div id="xToolbar"></div>，然后再根据这个容器的id属性进行设置。

ASP实现代码：

<div id="fckToolBar"></div>
<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
with oFCKeditor
.BasePath = fckPath
.Config("ToolbarLocation") = "Out:fckToolBar"

.ToolbarSet = "Basic"
.Width = "100%"
.Height = "200"

.Value = ""
.Create "jcontent"

.Height = "150"
.Value = ""
.Create "jreach"
end with
%>

JAVASCRIPT实现代码：

<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:
// oFCKeditor.BasePath = '/fckeditor/' ; // '/fckeditor/' is the default value.
var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf('_samples')) ;

var oFCKeditor = 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">
<!--
oFCKeditor = 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请参照_samples/html/sample11.html，_samples/html/sample11_frame.html

4、文件管理功能、文件上传的权限问题

一直以后FCKeditor的文件管理部分的安全是个值得注意，但很多人没注意到的地方，虽然FCKeditor在各个Release版本中一直存在的一个功能就是对上传文件类型进行过滤，但是她没考虑过另一个问题：到底允许谁能上传？到底谁能浏览服务器文件？

之前刚开始用FCKeditor时，我就出现过这个问题，还好NetRube（FCKeditor中文化以及FCKeditor ASP版上传程序的作者）及时提醒了我，做法是去修改FCK上传程序，在里面进行权限判断，并且再在fckconfig.js里把相应的一些功能去掉。但随之FCK版本的不断升级，每升一次都要去改一次配置程序fckconfig.js，我发觉厌烦了，就没什么办法能更好的控制这种配置么？事实上，是有的。

在fckconfig.js里面，有关于是否打开上传和浏览服务器的设置，在创建FCKeditor时，通过程序来判断是否创建有上传浏览功能的编辑器。首先，我先在fckconfig.js里面把所有的上传和浏览设置全设为false，接着我使用的代码如下：

ASP版本：

<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
with oFCKeditor
.BasePath = fckPath
.Config("ToolbarLocation") = "Out:fckToolBar"

if request.cookies(site_sn)("issuper")="yes" then
.Config("LinkBrowser") = "true"
.Config("ImageBrowser") = "true"
.Config("FlashBrowser") = "true"
.Config("LinkUpload") = "true"
.Config("ImageUpload") = "true"
.Config("FlashUpload") = "true"
end if
.ToolbarSet = "Basic"
.Width = "100%"
.Height = "200"

.Value = ""
.Create "jcontent"
%>

JAVASCRIPT版本：

      var oFCKeditor = 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() ;

 

Views(5594) | Comments(23) | In: web develop |
历史上的今天： [2008/09/21]厦门第一天
[2008/09/21]南方真热
[2005/09/21]误会
[2004/09/21]PHOTOSHOP的通道技巧z
[2004/09/21]人们浏览网页时的视线轨迹, 人类的阅读视线变换
[2004/09/21]使Win2003能使用CDONTS邮件发送组件

[FCKeditor实战技巧-1，版本2.3.2]的回复

Shutra 于 2006-09-21 14:35:23 发表 | IP:222.66.131.*
Javascript的修改不能提高文件管理部分的安全吧？
柠檬园主 于 2006-09-21 16:35:29 发表 | IP:210.83.202.*
哈哈，已经改好了。
ak 于 2006-09-28 10:33:45 发表 | IP:222.218.155.*
fckeditor 用半角 空格进行填充排版后，显示的时候界面会撑大，该怎样解决？
4#   柠檬园主 于 2006-09-28 11:40:45 发表 | IP:210.83.202.*

那不是FCK的问题了，界面会被撑大是因为半角字符的问题，可以用全角的啊，那样就没问题了。

或是你的界面用CSS界定一下，定死宽度，就不会撑开了。比如

p {width: 500px; overflow-x:auto;}

5#   ak 于 2006-09-28 14:14:49 发表 | IP:222.218.168.*
谢谢园主回复，用p {width: 500px; overflow-x:auto;}只是下面多了条滚动条，并没有使半角的空格自动换行，还有其他好的办法吗？
6#   柠檬园主 于 2006-09-28 14:57:33 发表 | IP:210.83.202.*
要自动换行的话，现在能实现的只有用表格。用其它的元素（div,p...）都不行。
7#   ak 于 2006-09-28 16:09:58 发表 | IP:222.218.168.*

嘿嘿，我用表格属性搞好了，谢谢园主

8#   chinaoy 于 2006-09-29 12:18:33 发表 | IP:125.92.180.*
请问一下园主，如何点页面其他地方的一个链接之后在FCK的文本框里显示一段文字？
9#   柠檬园主 于 2006-09-29 15:56:02 发表 | IP:210.83.202.*

使用FCK的API，一个叫InsertHTML()的方法，如下面的代码

 

function InsertHTML(str)
{
 // 获取实例对象的API.
 var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
 // 检查编辑状态.
 if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG )
 {
  // 插入HTML代码.
  oEditor.InsertHtml( str ) ;
 }
 else
  alert( '不能在代码状态下插入!' ) ;
}

然后再在那个链接上加上这个方法就可以了。比如：

<a href="#" onclick="InsertHTML('要插入显示的文字');return false;">Link</a>

10#   chinaoy 于 2006-09-29 16:20:22 发表 | IP:125.92.180.*
原来如此，非常感谢园主的指点！
11#   chinaoy 于 2006-09-29 18:13:54 发表 | IP:125.92.180.*

再请教一个问题，我用了自己的表情图标，因为有好几行，超出了自定义高度，用IE点开的时候，没有显示滚动条，但用FireFox却能显示滚动条，你这里的也是一样。

12#   柠檬园主 于 2006-09-29 22:43:03 发表 | IP:221.201.144.*
这个就不用那么较真儿啦，可以把弹出窗口的宽度适当的放大一些的嘛，在fckconfig.js最后面可以设置弹出窗口的大小的。
13#   菜鸟学ASP 于 2006-10-08 22:41:39 发表 | IP:222.79.79.*

园主,问你一个问题，可以帮一下吗？我是个菜鸟，正在学ASP。

我现在用这个FCKeditor，但我不知道怎么用这个引用和编辑自己的帖子。可以说一下吗？

14#   柠檬园主 于 2006-10-09 09:36:10 发表 | IP:210.83.202.*
你可以看一下以我前写的两篇，点击这里
15#   菜鸟学FCKEDITOR 于 2006-10-09 16:21:56 发表 | IP:59.36.116.*

请问一下园主，如何解决这个问题。
错误是“页面无法HTTP 错误 404 - 找不到文件。
<!--#include virtual="/FCKeditor/fckeditor.asp" -->
<div id="fckToolBar"></div>
<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
with oFCKeditor
.BasePath = fckPath
.Config("ToolbarLocation") = "Out:fckToolBar"

.ToolbarSet = "Basic"
.Width = "100%"
.Height = "200"

.Value = ""
.Create "jcontent"

.Height = "150"
.Value = ""
.Create "jreach"
end with
%>
我的FCKeditor文件夹是放跟目录下的。

16#   柠檬园主 于 2006-10-09 17:13:00 发表 | IP:210.83.202.*
404错误是指未找到当前浏览页，而不是找不到fckeditor.asp，所以不是你的FCK位置问题，如果是FCK位置问题，出现的错误应该是程序错误，说找不到fckeditor.asp文件
17#   菜鸟学FCKEDITOR 于 2006-10-09 17:49:35 发表 | IP:59.36.116.*

对不起刚刚表达错误！外联编辑条的问题`
代码是这样的：
<!--#include virtual="/FCKeditor/fckeditor.asp" -->
<div id="fckToolBar"></div>
<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
with oFCKeditor
.BasePath = fckPath
.Config("ToolbarLocation") = "Out:fckToolBar"

.ToolbarSet = "Basic"
.Width = "100%"
.Height = "200"

.Value = ""
.Create "jcontent"

.Height = "150"
.Value = ""
.Create "jreach"
end with
%>
但是“内容一”和“内容二”的地方都没办法显示，错误就是“没办法找的页面”
工具条也没显示。

18#   柠檬园主 于 2006-10-09 19:24:56 发表 | IP:221.201.151.*

我觉得可能是你的FCK的配置里的路径问题，看你的代码好像直接用我提供的

 

.BasePath = fckPath

这个变量是我自定义的，你要按你的网站设置改成你自己的，也可能你还根本就没有定义这个变量。你看一下。

19#   菜鸟学FCKEDITOR 于 2006-10-10 08:57:37 发表 | IP:59.36.116.*

还是我，问题已经解决了，

非常感谢园主的指点！

20#   ale 于 2006-10-31 00:06:19 发表 | IP:60.176.134.*

请教园主外联编辑条的问题`

<!--#include file="../fckeditor/fckeditor.asp" -->

...
.BasePath = "../fckeditor/"
.Config("ToolbarLocation") = "Out:fckToolBar"
....

为什么总提示

Invalid value for "ToolbarLacation"

21#   柠檬园主 于 2006-10-31 08:37:24 发表 | IP:210.83.202.*
回ale:在生成编辑器前，你应该有一个id为"fckToolBar"的容器才行，比如说在你想放置这个编辑器工具条的地方，要写一个<div id="fckToolBar"></div>才行，不过不管放到哪儿，一定要放置在你的.Create "demo" 这个创建工具条语句之前才行。
22#   眼睛 于 2007-03-25 16:02:08 发表 | IP:219.233.84.*
<textarea name="fbContent" id="fbContent"><textarea>

老大,第一个的这句错了哦.

只不过我把这里改好,怎么页面显示还是有错误.

    <script src="FCKeditor/fckeditor.js"></script>
    <script type="text/javascript">
     <!--
     function showFCK(){
      var oFCKeditor = new FCKeditor( 'fbContent' ) ;
      oFCKeditor.BasePath = '/FCKeditor/' ;
      oFCKeditor.ToolbarSet = 'Basic' ;
      oFCKeditor.Width = '100%' ;
      oFCKeditor.Height = '200' ;
      oFCKeditor.ReplaceTextarea() ;
     }
     //-->
     </script>
     <textarea name="fbContent" id="fbContent"><textarea>

ASP页面调用

23#   柠檬园主 于 2007-03-25 21:36:43 发表 | IP:221.201.174.*

呵呵，多谢提醒。你的出错，可能是fckeditor.js这个文件的路径不对吧。

也有可能是一些IE插件导致的，如这个那个助手的。

Post a Comment~
CopyLeft: 3rgb.com 2002~2022 Open Source Powered by web.py!