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 ...
随机推荐
- 论公司spring的滥用
这个公司每个项目用不同的一套开发框架,实在忍不住拿一个出来说说事.
- Servlet的Request.getInputStream()只能读取一次问题
Servlet的Request.getInputStream()只能读取一次问题 这个星期公司的项目接口进行改造,公司的接口有的采用了WebService的方式,有的使用的是Http协议+Servle ...
- Arduino live weather broadcasting 实时天气站
Live broadcasting with arduino get a pc , make it run linux. make arduino catch the weather sensor a ...
- mac系统及xcode使用的SVN客户端升级
mac系统及xcode使用的SVN客户端升级 当前的SVN版本已经升级到1.8.x了,但mac系统自带的以及xcode使用的SVN客户端版本没有跟着升级,还是1.6.x的版本.为了解决隐藏目录.svn ...
- poj 2485 (kruskal算法)
/*kruskal算法*/ #include <iostream> //#include <fstream> #include <algorithm> using ...
- 工作流--JBPM核心服务及表结构
一. 使用JBPM开发工作流的一般流程 1. jBPM的运行需要数据库的支持,因此系统设计时要选定所用数据库.只要是Hibernate支持的数据库,jBPM就支持.数据库的初始化 ...
- kubernetes service分析
service type k8s中service主要有三种: ClusterIP: use a cluster-internal IP only - this is the default and i ...
- C++ 头文件系列(array)
注意,该头文件仅在C++11中标准才开始出现. 简介 与语言内置的数组一样, array类模版支持几乎所有内置数组包含的特性: 顺序的(sequence) 内存连续的(contiguous stora ...
- Maven 插件 maven-tomcat7-plugin - 常用命令及配置
常用命令 tomcat7:deploy 说明:部署 WAR 到 Tomcat tomcat7:help 说明:查看插件帮助信息 tomcat7:run 说明:支行当前项目 配置 <project ...
- DPDK support for vhost-user
转载:http://blog.csdn.net/quqi99/article/details/47321023 X86体系早期没有在硬件设计上对虚拟化提供支持,因此虚拟化完全通过软件实现.一个典型的做 ...