一:前端页面代码

<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实现图片上传功能的更多相关文章

  1. ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  2. vue项目富文本编辑器vue-quill-editor之自定义图片上传

    使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...

  3. 使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

    富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百 ...

  4. drupal中安装CKEditor文本编辑器,并配置图片上传功能

    一.下载: 1.CKEditor模块 2.IMCE模块 二.安装       1.复制: 下载完上面两个模块之后,解压,将解压后整个文件夹,复制粘贴,放到 sites\all\modules下面,个人 ...

  5. wangEditor - 轻量级web富文本编辑器(可带图片上传)

    业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...

  6. summernote(富文本编辑器)将附件与图片上传到自己的服务器(vue项目)

    1.上传图片至自己的服务器(这个官方都有例子,重点介绍附件上传)图片上传官方网址 // onChange callback $('#summernote').summernote({ callback ...

  7. 百度开源富文本编辑器 UEditor配置:图片上传和文件上传独立使用方法

    使用UEditor编辑器自带的插件实现图片上传和文件上传功能,这里通过配置UEditor单独使用其内置的第三方插件swfupload来实现图片和文件的上传,通过对UEditor配置轻松实现图片批量上传 ...

  8. vue-quill-editor富文本编辑器,上传图片自定义为借口上传

    vue-quill-editor富文本编辑器,上传图片自定义为借口上传 博客地址:https://blog.csdn.net/lyj2018gyq/article/details/82585194

  9. 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能

    前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...

随机推荐

  1. 论公司spring的滥用

    这个公司每个项目用不同的一套开发框架,实在忍不住拿一个出来说说事.

  2. Servlet的Request.getInputStream()只能读取一次问题

    Servlet的Request.getInputStream()只能读取一次问题 这个星期公司的项目接口进行改造,公司的接口有的采用了WebService的方式,有的使用的是Http协议+Servle ...

  3. Arduino live weather broadcasting 实时天气站

    Live broadcasting with arduino get a pc , make it run linux. make arduino catch the weather sensor a ...

  4. mac系统及xcode使用的SVN客户端升级

    mac系统及xcode使用的SVN客户端升级 当前的SVN版本已经升级到1.8.x了,但mac系统自带的以及xcode使用的SVN客户端版本没有跟着升级,还是1.6.x的版本.为了解决隐藏目录.svn ...

  5. poj 2485 (kruskal算法)

    /*kruskal算法*/ #include <iostream> //#include <fstream> #include <algorithm> using ...

  6. 工作流--JBPM核心服务及表结构

    一.      使用JBPM开发工作流的一般流程 1.       jBPM的运行需要数据库的支持,因此系统设计时要选定所用数据库.只要是Hibernate支持的数据库,jBPM就支持.数据库的初始化 ...

  7. kubernetes service分析

    service type k8s中service主要有三种: ClusterIP: use a cluster-internal IP only - this is the default and i ...

  8. C++ 头文件系列(array)

    注意,该头文件仅在C++11中标准才开始出现. 简介 与语言内置的数组一样, array类模版支持几乎所有内置数组包含的特性: 顺序的(sequence) 内存连续的(contiguous stora ...

  9. Maven 插件 maven-tomcat7-plugin - 常用命令及配置

    常用命令 tomcat7:deploy 说明:部署 WAR 到 Tomcat tomcat7:help 说明:查看插件帮助信息 tomcat7:run 说明:支行当前项目 配置 <project ...

  10. DPDK support for vhost-user

    转载:http://blog.csdn.net/quqi99/article/details/47321023 X86体系早期没有在硬件设计上对虚拟化提供支持,因此虚拟化完全通过软件实现.一个典型的做 ...