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 ...
随机推荐
- JForum2.1.9 安装过程
JForum2.1.9 安装过程 JForum2.1.9 安装过程 2013/08/10 0:48 1.第一次接触 2013/08/08 在开源中国看到一个国外开源的Java论坛,然后下载JForum ...
- Ogre源码编译教程
最近突然发现Ogre引擎更新到2.1版本了,既然依旧是代码开源,本着学习的精神就下载下来弄弄.但是官网提供的SDK版本只有1.9的,考虑到学习的便利性,因此最好从Source版本开始弄,这样的话以后想 ...
- MacOSX高分屏图片打包工具tiffutil的简单使用
You can use the man command tiffutil with the option -cathidpicheck. The command lets you manipulate ...
- Haskell 笔记(四)函数系统
函数系统 函数式编程当然少不了函数系统啦,在教程最初的时候就有一个最简单的函数,函数系统贯穿在Haskell全部,Haskell的函数有几个重要的性质. 首先声明一下函数的参数和返回值类型 然后有一个 ...
- [置顶] Oracle学习经验谈
经常遇到朋友问oracle学习难不难,怎么才能成为高手等等,我想结合我的个人经验简单说几点: 1.打好基础,由浅入深 学习Oracle不能急于求成,寄希望于一天成为一个大侠.学习有个过程,应该由浅入深 ...
- 从零开始学C++之构造函数与析构函数(三):深拷贝与浅拷贝、空类
一.深拷贝与浅拷贝 说得简单点,假设一个类有指针成员,如果在拷贝的时候顺带连指针指向的内存也分配了,就称为深拷贝:如果只是分配指针本身的内存,那就是浅拷贝.浅拷贝造成的问题是有两个指针指向同块内存,d ...
- php文件上传及头像预览
php文件上传原理是通过form表单的enctype="multipart/form-data"属性将文件临时放到wamp文件夹中的tmp目录下,再通过后台php 程序将文件保存在 ...
- Python高手之路【十三】socket网络编程
什么是客户/服务器架构? 什么是客户/服务器架构?不同的人有不同的答案.这要看你问的是什么人,以及指的是软件系统还是硬件系统了.但是,有一点是共通的:服务器是一个软件或硬件,用于提供客户需要的&quo ...
- 详解一下网络广告cpc、cpm、cpl、cpa、cps、cpr的计费方法是什么
CPC(Cost per click)按照 广告 点击数 计费 ,限定一个IP在24小时内只能点击一次.CPM(Cost per mille)按照广告显示次数来计算广告费,可在短时间内为 网站 带来巨 ...
- [HMLY]9.深入浅出-iOS Reactive Cocoa的常见用法
简介 今天的主角是Reactive Cocoa,聊聊Reactive Cocoa的常见使用:KVO.Target.Delegate.Notification. Reactive Cocoa 是一个重量 ...