PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能
Posted CodeArt
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能相关的知识,希望对你有一定的参考价值。
一:前端页面代码
<script src="/www/res/ckeditor/ckeditor.js"></script>
<textarea id="articlecontent" ><?php echo $request[‘content‘]; ?></textarea>
<script type="text/javascript">
$(‘#articlecontent‘).ckeditor({
customConfig : ‘config_user.js‘
});
</script>
其中上面的config_user.js是用户自定义配置文件,内容如下:
CKEDITOR.editorConfig = function( config ) { // The toolbar groups arrangement, optimized for two toolbar rows. config.toolbarGroups = [ { name: ‘clipboard‘, groups: [ ‘clipboard‘, ‘undo‘ ] }, { name: ‘editing‘, groups: [ ‘find‘, ‘selection‘, ‘spellchecker‘ ] }, { name: ‘links‘ }, { name: ‘insert‘ }, { name: ‘forms‘ }, { name: ‘tools‘ }, { name: ‘document‘, groups: [ ‘mode‘, ‘document‘, ‘doctools‘ ] }, { name: ‘others‘ }, { name: ‘basicstyles‘, groups: [ ‘basicstyles‘, ‘cleanup‘ ] }, { name: ‘paragraph‘, groups: [ ‘list‘, ‘indent‘, ‘blocks‘, ‘align‘, ‘bidi‘ ] }, { name: ‘styles‘ }, { name: ‘colors‘ }, { name: ‘about‘ } ]; // Remove some buttons provided by the standard plugins, which are // not needed in the Standard(s) toolbar. config.removeButtons = ‘Underline,Subscript,Superscript‘; // Set the most common block elements. config.format_tags = ‘p;h1;h2;h3;pre‘; // Simplify the dialog windows. config.removeDialogTabs = ‘image:advanced;link:advanced‘; //自定义配置 //config.配置项 = 值 config.width = 800; config.height = 300; config.uiColor = "#aabbcc"; //文件的上传管理:加载CKfinder 注意文件路径为网站根目录 使用时,注意ckfinder文件安装路径 config.filebrowserBrowseUrl = ‘/www/res/ckfinder/ckfinder.html‘; config.filebrowserImageBrowseUrl = ‘/www/res/ckfinder/ckfinder.html?Type=Images‘; config.filebrowserFlashBrowseUrl = ‘/www/res/ckfinder/ckfinder.html?Type=Flash‘; config.filebrowserUploadUrl = ‘/www/res/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files‘; config.filebrowserImageUploadUrl = ‘/www/res/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images‘; config.filebrowserFlashUploadUrl = ‘/www/res/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash‘; };
二:ckeditor文件安装,
注意因为在ckeditor中已经自定义了配置文件,注意里面配置的与ckfinder文件的相对位置
三:ckfinder文件安装
需要配置上传文件的保存路径,在ckfinder文件夹下的config.php文件中修改
$baseUrl = ‘http://www.example.com/www/articlesuploads/‘;
设置文件的保存路径
以上是关于PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能的主要内容,如果未能解决你的问题,请参考以下文章