本文介绍如何在网页中集成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程序设计的说明能对读者有所帮助。