FCKeditor 2.0 简化和使用
我们对这个功能丰富的编辑器进行精简,主要是文件的精简,而非功能的简化。以asp版的FCKeditor为例,我们进入到FCKeditor 2.0的文件夹。在此,我们需要删除所有以“_”开头的文件夹,这些文件夹里存放的是范例或其他工具。实际上,我们只需要保留editor文件夹、fckconfig.js、fckeditor.asp、fckeditor.js、fckstyles.xml、fcktemplates.xml即可。
接下来,我们深入到editor文件夹内,并删除“_source”文件夹,这里的源文件对我们来说并无多大用处。之后,我们进入images文件夹,并删除smiley文件夹,这些文件是表情图标。由于我们会使用自己的表情图标,所以先删除这些。如果你想使用这里的表情图标,那就不要删除了。
退出images文件夹后,我们进入lang文件夹。在这里,我们可以进行大清洗,只保留fcklanguagemanager.js、zh-.js、en.js、zh.js这四个文件。再退出lang文件夹,进入skin文件夹。如果你喜欢fckeditor的默认奶黄色皮肤,那就保留default文件夹,否则可以考虑使用silver皮肤,因为它与其他颜色搭配都很好看。至于office2003的皮肤,如果你不太喜欢其图片较大并会增加下载时间的话,可以选择不使用。
完成上述文件的精简后,我们进入到filemanager文件夹。在旧版的fckeditor中,这里只有一个browser文件夹;而在新版中,还有一个upload文件夹。我们进入到filemanager/browser/default/connectors/下,因为使用的是asp版本,所以除了asp文件夹外,其他全部删除。接着进入filemanager/upload/下,同样只保留asp文件夹。至此,编辑器的精简工作就完成了。接下来我们可以对编辑器进行设置了。
在编辑FCKConfig.FontNames时,我们增加了多种常用的中文字体,如宋体、黑体、隶书、楷体_GB2312等,与原有的Arial、Comic Sans MS、Courier New等字体一起,为用户提供了更为丰富的字体选择。接下来,我们将着重设置上传功能。以ASP为例,为了启用fckeditor的上传功能,我们只需删除被注释掉的代码(100行以下),并将狼蚁网站SEO优化相关的代码中的Type参数值更改为想要的文件夹名称。
如果你希望使用自己的表情图标,只需跳转到第131行,修改表情图标的文件夹地址和文件名。狼蚁网站SEO优化中的数字参数用于设置每行显示的表情数以及弹出窗口的宽和高,你可以根据表情图标排列的窗口大小进行相应的调整。至此,总配置文件修改完毕。
接下来,我们要设置编辑器的位置。将editor放置在网站的根目录下,并将最初提到的五个文件也放在根目录,这样做有利于fckeditor的更新升级,并且网站下的所有文件夹都可以轻松调用编辑器,无需担心因文件夹名称变更而导致编辑器无法使用的问题。
在fckeditor.asp文件中,我们需要将sBasePath的路径改为"/"。同样,在fckeditor.js文件中,也要相应地修改this.BasePath的值。如果你希望修改编辑器域内默认的显示字体大小,可以打开/editor/css/fck_editorarea.css文件,将第4行的字体大小修改为14px。
还有一个重要的设置是快速上传功能。这个功能在FCKEditor 2.0版本中才有。进入\editor\filemanager\upload\asp目录,打开config.asp文件,将ConfigIsEnabled设置为True以启用该功能。你可以根据自己的需求设置ConfigUserFilesPath,例如按月分开放置上传文件。确保这些设置与之前的设置相互协调,以避免文件管理混乱。
在之前的操作中,我们在config.asp里添加了一些配置。接下来,我们将如何继续操作并创建自己的在线编辑器。这次,我们以ASP和JS版的编辑器为例。想象一下,你正在打造一个强大的后台操作平台,而FCKeditor就是你手中的一把利器。
让我们看看ASP版的示例代码。这段代码一般用于后台操作,它能帮助我们轻松创建一个在线编辑器。代码示例如下:
```asp
<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = "/"
oFCKeditor.ToolbarSet = "Default"
oFCKeditor.Width = "100%"
oFCKeditor.Height = ""
oFCKeditor.Value = rs("logbody")
oFCKeditor.Create "logbody"
%>
```
如果你已经设置过BasePath为"/",那么在创建新的编辑器时就可以省去设置BasePath的步骤。ASP版的优势在于其适用于以.asp为扩展名的页面。为了更高效地编辑内容,推荐使用ASP版编辑器。
接下来,让我们转向JS版的编辑器。与ASP版不同,JS版编辑器可以在任何网页中使用,包括html页面。它在客户端生成,这意味着它可以减小网络流量,并且可以由客户端决定何时显示编辑器。这对于需要快速响应和减少服务器负载的应用来说是非常有益的。下面是JS版的示例代码:
```javascript
var oFCKeditor = new FCKeditor('logbody');
oFCKeditor.BasePath = '/';
oFCKeditor.ToolbarSet = 'Basic';
oFCKeditor.Width = '100%';
oFCKeditor.Height = '';
oFCKeditor.Value = '';
oFCKeditor.Create();
```
JS版编辑器还有一个特别的功能函数ReplaceTextarea(),它可以替换指定的TextArea。这在网站设计中有很大的应用,比如在我的网站的日志回复部分:当用户需要回复日志时,我们可以调用这个函数来显示编辑器,这样用户就可以方便地编辑他们的回复内容了。以下是示例代码片段:
```javascript
function showFCK() {
var oFCKeditor = new FCKeditor('fbContent'); // 指定编辑器的ID或名称。这里假设是'fbContent'的TextArea需要被替换。其他参数设置同上。不再赘述。
oFCKeditor.ReplaceTextarea(); //替换指定的TextArea区域为富文本编辑器。其他操作如显示提交按钮等也在此函数中完成。页面加载时不需要初始化编辑器,只在用户需要时才生成编辑器实例,提高了页面响应速度。 document.blog_feedback.blogsubmit的一些属性被修改以确保提交按钮可用且可见等。其他代码细节省略以保持简洁性。
}
并在适当的地方调用这个函数来打开编辑器。这种设计方式极大地提升了用户体验和页面性能。在前端开发中,合理利用客户端资源是非常关键的技巧之一。现在我们的网站已经准备好迎接用户的输入了!接下来是Cambrian的渲染部分:```javascript cambrian.render('body')```这句代码意味着我们正在使用Cambrian框架来渲染页面的主体部分('body')。通过这种方式,我们可以确保页面内容以最佳的方式呈现给用户,提升用户体验和页面性能的整体表现。简而言之,我们正在进行网页的进一步构建和完善工作,使其更具交互性和响应性。