JavaScript集成FCKeditor及内容非空校验实现

作者:青柠

时间:2026-10-30

浏览:542

本文介绍如何在网页中集成FCKeditor富文本编辑器,并提供通过JavaScript获取编辑器内容及判断内容是否为空的完整代码示例。同时解析config.php中关于快速上传与普通上传的文件路径配置差异,说明图片浏览时的路径指向逻辑。

文章目录

FCKeditor集成与非空判断实现

本文通过具体实例,讲解如何在网页开发中集成FCKeditor编辑器,并演示如何使用JavaScript判断编辑器内容是否为空。相关内容供开发者参考借鉴。


<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 ='/fckeditor/';
var oFCKeditor = new FCKeditor( 'news_content' ) ;
oFCKeditor.BasePath = sBasePath ;
oFCKeditor.Height = 400 ;
oFCKeditor.Width = 600 ;
oFCKeditor.Value = '' ;
oFCKeditor.Create() ;
//-->
//取fck内容的长度
function GetMessageLength(str)
{
 var oEditor = FCKeditorAPI.GetInstance(str) ;
 var oDOM = oEditor.EditorDocument ;
 var iLength ;
 if ( document.all ) // If Internet Explorer.
 {
 iLength = oDOM.body.innerText.length ;
 }
 else // If Gecko.
 {
 var r = oDOM.createRange() ;
 r.selectNodeContents( oDOM.body ) ;
 iLength = r.toString().length ;
 }
// oEditor.InsertHtml('')
return iLength
} 
function CheckPost(){
 if(GetMessageLength("news_content")=='0')
 {
 alert('请输入内容');
 return false;
 }
}
//取fck内容
function GetMessageContent(str)
{
 var oEditor = FCKeditorAPI.GetInstance(str) ;
 return oEditor.GetXHTML();
}
</script>

FCKeditor配置文件与上传路径逻辑

在进行配置时,需参考config.php文件中的相关设置。


$Config['UserFilesPath'] = '/upload/' ;
$Config['AllowedExtensions']['Image'] = array('bmp','gif','jpeg','jpg','png') ;
$Config['DeniedExtensions']['Image'] = array() ;
$Config['FileTypesPath']['Image'] = $Config['UserFilesPath'] . 'image/' ;
$Config['FileTypesAbsolutePath']['Image']= ($Config['UserFilesAbsolutePath'] == '') ? '' : $Config['UserFilesAbsolutePath'].'image/' ;
$Config['QuickUploadPath']['Image'] = $Config['UserFilesPath'] ;
$Config['QuickUploadAbsolutePath']['Image']= $Config['UserFilesAbsolutePath'] ;

在文件上传环节,若启用快速上传模式,文件将直接保存至upload目录;若未启用快速上传,文件则会被保存至upload/image子目录中。

当使用浏览服务器功能时,图片浏览界面默认指向upload/image目录。

基于上述路径配置,通过快速上传功能保存的图片,在浏览服务器界面中将无法被直接查看到。

此外,推荐几款实用的代码格式化工具,有助于提升后续编程与开发的效率:

支持C语言风格、HTML及CSS、JSON代码的美化与格式化在线工具: http://tools.jb51.net/code/ccode_html_css_json

提供JavaScript代码美化与格式化的在线工具: http://tools.jb51.net/code/js

提供JavaScript代码美化、压缩、格式化及加密功能的在线工具: http://tools.jb51.net/code/jscompress

提供JSON代码检验、美化、格式化及编辑的在线工具: http://tools.jb51.net/code/json

提供JSON代码在线格式化、美化、压缩、编辑及转换功能的工具: http://tools.jb51.net/code/jsoncodeformat

如需了解更多JavaScript技术细节,可参考本站系列专题,包括:《JavaScript中ajax操作技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

期望上述关于JavaScript程序设计的说明能对读者有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章