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实现图片上传功能的更多相关文章
- ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...
- vue项目富文本编辑器vue-quill-editor之自定义图片上传
使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...
- 使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码
富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...
- drupal中安装CKEditor文本编辑器,并配置图片上传功能
一.下载: 1.CKEditor模块 2.IMCE模块 二.安装 1.复制: 下载完上面两个模块之后,解压,将解压后整个文件夹,复制粘贴,放到 sites\all\modules下面,个人 ...
- wangEditor - 轻量级web富文本编辑器(可带图片上传)
业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...
- summernote(富文本编辑器)将附件与图片上传到自己的服务器(vue项目)
1.上传图片至自己的服务器(这个官方都有例子,重点介绍附件上传)图片上传官方网址 // onChange callback $('#summernote').summernote({ callback ...
- 百度开源富文本编辑器 UEditor配置:图片上传和文件上传独立使用方法
使用UEditor编辑器自带的插件实现图片上传和文件上传功能,这里通过配置UEditor单独使用其内置的第三方插件swfupload来实现图片和文件的上传,通过对UEditor配置轻松实现图片批量上传 ...
- vue-quill-editor富文本编辑器,上传图片自定义为借口上传
vue-quill-editor富文本编辑器,上传图片自定义为借口上传 博客地址:https://blog.csdn.net/lyj2018gyq/article/details/82585194
- 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...
随机推荐
- 强烈推荐:240多个jQuery插件【转】
强烈推荐:240多个jQuery插件 概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架.其宗旨是—写更少的代码,做更多的事情.它是轻量级的 js 库(压缩后只 ...
- 在.Net中执行js
在.Net中执行js 利用Noesis.Javascript开源组件可以做到在.net中执行js脚本,同时js脚本也能调用C#函数.这个组件的获得方式:在NuGet中输入搜索"Noesis& ...
- Newlife商业源码分享
[商业源码]生日大放送-Newlife商业源码分享 今天是农历六月二十三,是@大石头的生日,记得每年生日都会有很劲爆的重量级源码送出,今天Newlife群和论坛又一次疯狂了,吃水不忘挖井人,好的东西肯 ...
- Windbg是windows平台上强大的调试器
基础调试命令 - .dump/.dumpcap/.writemem/!runaway Windbg是windows平台上强大的调试器,它相对于其他常见的IDE集成的调试器有几个重要的优势, Windb ...
- Linux下SSH+Firefox
Linux下SSH+Firefox 简明FQ攻略 FQ的软件有很多,楼主原来在Windows下用过Tor(洋葱头).Puff.freegate等,一般只需要打开FQ软件,简单的设置后就可以FQ浏览了. ...
- android自定义View---生成虚线的View
1.在res/values/目录下 新建文件 attrs.xml <? xml version = "1.0" encoding = "utf-8&q ...
- phper談談最近重構代碼的感受(3)
这篇文章本来该和同一系列的文章一起写的,因为最近换工作的缘故滞后了.重构是非常细碎的叠加,有很多值得注意的地方. 1.消灭过多的临时变量. 有时候过多的无意义的临时变量,真心让人抓狂,特别是过了比较长 ...
- ios 获取融云token
聊聊iOS做融云时重要的一步,获取token.token应该从服务端拿这样你的appSecret就不容易暴露.但有时开发需要也要自己先获取一个token也是可以的.请求方式有很多随你便喽,C哥(&qu ...
- list、dict、tuple的一些小操作总结
一.list 1.赋值(append) list.append(data) 2.去重 list(set(list)) list_gpcode = list(set(list(dfQuery.index ...
- 利用Hibernate监听器实现用户操作日志
网上搜索发现,实现用户操作日志的方式有:自定义注解方式.Hibernate拦截器方式.Hibernate监听器方式等. 1.自定义注解方式较为麻烦,需要进行操作记录的方法均需要添加注解,但是相对的操作 ...