解密FCKeditor 2.0 的设置.修改.使用方法
今天,我深入了FCKeditor的修改方法,因为它是一款功能强大且备受欢迎的在线编辑器。它的代码结构一度让我困惑,其易用性和可修改性相比其他编辑器如ewebeditor,确实存在差距。但我发现,借助网友们的经验,我们可以轻松调整FCKeditor 2.0版,使其更加适应我们的需求。
我们来对这个功能丰富的编辑器进行精简,主要是文件精简,而非功能简化。以asp版的FCKeditor为例,我们进入到其2.0文件夹下。删除所有以“_”为开头的文件夹,这些文件夹主要存放的是范例和其他工具。保留的文件夹和文件包括editor、fckconfig.js、fckeditor.asp、fckeditor.js、fckstyles.xml和fcktemplates.xml。
接下来,我们进入到editor文件夹内,删除“_source”文件夹,里面的源文件对于使用来说并无太大用处。在images文件夹中,删除smiley文件夹,这些文件是表情图标。如果你打算使用自己的表情图标,可以删除它们。如果你想用这里的表情图标,那就不要删除。在lang文件夹内,可以只留下fcklanguagemanager.js、zh-.js、en.js和zh.js这四个文件。
再退出lang文件夹,进入skin文件夹。如果你喜欢fckeditor的默认奶黄色皮肤,那就保留default文件夹,否则可以考虑使用silver皮肤,因为它与其他颜色搭配都很协调。至于office2003的皮肤,由于图片较大且可能不符合某些网站的审美,可以选择删除。
完成这些精简步骤后,我们进入filemanager进行进一步修改。在filemanager/browser/default/connectors/下,只保留asp文件夹。然后,进入filemanager/upload/下,同样只保留asp文件夹。至此,编辑器的精简工作结束。
当您在网站前台使用编辑器时,尤其是在留言本或日记回复等场景,安全性问题不可忽视。对于前台的toolbar设置,强烈建议避免使用Default的toolbar。您可以自定义其功能,或使用系统提供的Basic模式。针对图像和链接功能,建议谨慎开放,因为这些功能可能使前台页直接访问和上传文件,从而带来潜在的安全风险。为了加强安全,建议禁用fckeditor的编辑域内鼠标右键功能。
对于字体设置,除了默认的字体外,您还可以添加常用的中文字体,如宋体、黑体等,以满足不同用户的需求。在上传功能方面,以ASP为例,您只需取消注释fck默认的相关代码并修改保存文件的文件夹名称即可。若您希望使用自己的表情图标,只需跳转到相应行号修改表情图标的文件夹地址及文件名。根据表情图标的排列窗口大小调整显示的表情数及弹出窗口的宽和高。
完成总配置文件的修改后,接下来是编辑器位置的设置。推荐将editor放置在网站根目录下,并将相关文件也放在同一目录下。这样做不仅有利于fckeditor的更新升级,还能确保网站下所有文件夹都能任意调用编辑器,避免因文件夹名称变更而影响编辑器的使用。
接下来是文件路径和显示字体的设置。打开fckeditor.asp和fckeditor.js文件,将相关路径修改为根路径。如果您的主页默认字体为14px,而编辑器域内默认显示为12px,可能会显得不协调。这时,您可以修改样式表达到要求,进入/editor/css/fck_editorarea.css文件,将字体大小修改为14px即可。
深入FCKeditor配置:从基础设置到自定义在线编辑器
对于FCKeditor的进阶配置,我们需要对部分代码进行调整以实现特定功能。让我们深入如何设置并优化这款强大的在线编辑器。
在“Set ConfigDeniedExtensions = CreateObject("Scripting.Dictionary")”之后,我们需要添加关于文件上传类型的设置。这里的操作涉及到允许和禁止的文件扩展名。例如,要为上传功能添加特定扩展名,我们可以这样操作:
```vbscript
ConfigAllowedExtensions.Add "uploadfile", ""
ConfigDeniedExtensions.Add "uploadfile", ""
```
这些设置需要与之前的配置以及fckconfig.js中的设置保持一致。值得注意的是,快速上传功能仅在fckeditor 2.0及以上版本中存在。若要在旧版本中使用此功能,需要进行相应的升级。
进入\editor\filemanager\upload\asp路径,并修改config.asp文件。将ConfigIsEnabled设置为True以启用上传功能。对于文件路径的设置,我们可以根据需要将其更改为特定的路径,例如按日期分类存储上传的文件。这里需要注意的是,如果前面的设置与此处的设置不配合得当,可能会导致文件上传混乱,不利于管理。
接下来,我们如何创建自己的在线编辑器。以ASP和JS版为例,这里介绍基本的设置步骤。
对于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"
```
ASP版适用于以.asp为扩展名的页面。如果在fckedito.asp中已设置BasePath为"/",则此处可以省略相关设置。推荐使用ASP版在修改内容时进行操作。
对于JS版,示例代码如下:
```javascript
var oFCKeditor = new FCKeditor('logbody');
oFCKeditor.BasePath = '/';
oFCKeditor.ToolbarSet = 'Basic';
oFCKeditor.Width = '100%';
oFCKeditor.Height = '';
oFCKeditor.Value = '';
oFCKeditor.Create();
```
JS版可在任何网页中使用,包括html页面。其优点在于减小网络流量和由客户端定义显示时机。由于fckeditor初始化需要时间,JS版的这一特点尤为显著。
```html
function initializeEditorOnDemand() {
// 检查是否已存在编辑器实例,若不存在则创建
if (!window.oFCKeditorInstance) {
var oFCKeditor = new FCKeditor('fbContent');
oFCKeditor.BasePath = '/';
oFCKeditor.ToolbarSet = 'Basic';
oFCKeditor.Width = '100%';
oFCKeditor.Height = '200';
oFCKeditor.Value = '';
window.oFCKeditorInstance = oFCKeditor; // 保存编辑器实例以供后续使用
} else {
// 若已存在编辑器实例,则无需再次创建,直接替换TextArea即可
oFCKeditorInstance.ReplaceTextarea();
}
document.blog_feedback.blogsubmit.style.display = ''; // 显示提交按钮
document.blog_feedback.openFCK.disabled = 'true'; // 禁用打开编辑器的按钮或链接
document.blog_feedback.openFCK.style.display = 'none'; // 隐藏打开编辑器的按钮或链接的显示
}
```
在这个改进的函数中,我们首先检查是否已经存在一个编辑器实例。如果不存在,我们会创建一个新的编辑器实例并保存它以便后续使用。如果已经存在编辑器实例,则无需再次创建,直接替换指定的TextArea即可。通过这种方式,我们可以避免每次刷新页面时都初始化一个编辑器,从而提高页面的加载速度。我们还更新了页面元素的显示状态,以确保用户界面的流畅性和易用性。此外添加的 `Cambrian.render('body')` 可以理解为在DOM元素主体部分渲染完毕后执行一些操作或逻辑处理。这种处理方式确保了相关的DOM元素已经加载完成,从而避免了因DOM元素未完全加载而导致的错误或异常。通过优化和重构代码,我们可以提高用户体验和页面性能。
微信营销
- 解密FCKeditor 2.0 的设置.修改.使用方法
- php制作基于xml的RSS订阅源功能示例
- 简单谈谈Vue 模板各类数据绑定
- 详解php伪造Referer请求反盗链资源
- ThinkPHP查询语句与关联查询用法实例
- vue vuex vue-rouert后台项目——权限路由(适合初学
- 基于jPlayer三分屏的制作方法
- ASP编程入门进阶(七):内置对象Server
- 详解MySQL数据备份之mysqldump使用方法
- 深入理解jQuery之防止冒泡事件
- jQuery简单自定义图片轮播插件及用法示例
- 百度UEditor编辑器使用教程与使用方法(图文)
- jquery实现弹出层效果实例
- Asp.net 中mvc 实现超时弹窗后跳转功能
- xmlplus组件设计系列之图标(ICON)(1)
- AspNetPager+GridView实现分页的实例代码