ckeditor_4.5.10_full上传图片功能
1、找到image.js
aaarticlea/png;base64,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" alt="" />
首先,还是image.js这个文件,搜索“upload”可以找到这一段
id:'Upload',hidden:!0
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAASsAAAAeCAIAAAD7Bq9JAAAG3UlEQVR4nO1cMY6kOhCtQxERzRzE0kQcY2RxAkTSUuc462zkA3QC2WYtpL6ApdGXNlhpgx/wAzCUTZW7GeD3zrZbL5gpjG3K9bAx9QBjuhF5kin0bw8lwPkJHS4fsBuVJfmVsJuuyVPvUJ6keeMUEMr5Y14h1a4WSUG2aKs9AJzo3s6gy1PtGy+VPOh2+LfVh6pGR+tTqT+d8u25LM9UgUuF7bfbDeMiQCb55/yQEhLE5X77QixudwZmvJoiQYFnTKdEmjedaYqkL6+yPjKH8ODs07j78WYCcctBdQCdd4oSHQiiAG1vOnB7YINeZQB9b3yP4F5S5UP2hQwEGJtuisTWM5VsigTAZSDRrhLANWpMZ9QJ4ICpHoAuLdnqk5Sn2riMas+llDcYiCsxnS7lWKCu5Lww224YzTkBiQMOxceeDFzebpMfPP+746UFQF+he0e2YbkxA5m4NZ95IiE5N37w3GBgntxioOnAY4id6TJlhhAHAIC+Z1o4/87Kc/UYfK6dShVt709RAgBSIVJrRN7HvcozwCRk+pMnfv3IZextm0B9ksNvokGrD9Z4qKqDHEh4qaTzm5jZnktrLMsDZp0u8RmIaVS7AQQm9l0ZuFW7eLwm2kzjbu2jReh+6JP82uQpKuTbhaLjLRw/JAMFdICRdM3sUJ4Ph1Rui4nONF2CToG5U54Nixai26LVB27eW4HQPWVPBt5olzp0EXcvQP5WRAZ2feiQa6edMM11/LPf16FOgRvKjgzk21VC0ofUaYuHz++NyMBVcBciz46HD8d3RPTaKjw86P8oPHw4viOi11YhRl70w0pEr63CU0WehOiH7RG9tgpPFXmRgXsgem0VniryIgP3QPTaKjxV5EUG7oHotVV4qsiLDNwDd3utOSdAvLQNZl1qASi3k0OfclVd+vSuPkektjldpf6c0r6C76/HYttlmVwq3CjVTybyrvoN5AvId83UrKtXKI+M3z4y+QLyNfMT0Dj7FlcqgMh7/EennYROQldpcx8DcR4/TnKYx8mYPhbK2kWnO5mJfxHuZeBXcyZuSBOMGfIkS/3Zh/iYP1lXUwZzWDqAsXWeF2qX6mfg3l+/Bxh4Cx8ZzTTOvvoyBczSVuqsK4ex+1nB7/oOBo750HeDzJAm4Wll/hp8nYHsPQxl0ArlMZDKMR8lBfVJIqUPyUBdSikPWo+ZyrhMZxgGooxnMt3ZnTZR5nRV+wz0+nmLgcUwGb6m+oft4TGVL+QMqatXkC8g34rWYdotO5oYh8rf9fAHapf1v+nIOfBnlf4afdsW/1b6JgOdnx338FxHMBBnYKPgyZM0V55UoLeDm5ONNTp++vVgsUKnYca2rUzlkzRxdDlkf9h2eT9vykDGg1pM3pmvQsmeWYldey4RQ7g5UJeISO4phmIgVgCZ+oRWlZcalbFzL9b7uatQqp83GGgJ0B5T+Va03lGHgWhd+qMoX0dSMfYfRfkK1Ye96mM6tlW/g3xLq+OVapeLDMLuM7As1syB3FwX1oU2eerSwx5CajVjrKbBypGsmskVzYxqJlJn6PZECUxLuj9cu0E/E7iLgUpITkTne9BTAC5flowIMBBr8DxRrM/A9lxWF7paNNdNq19P0ecJarnII/uPOTZbPXoM9Kliy4fsL+ChJ2T9DtMp965aP/PEv8M+hoGuBMmbvjyBHyfUHuphmNYLXK36FK/RsHDJ0pvvD93ucmw9B+7EQMQErHA1X2cgo23/RgxkqBVuNzC+nnqof/azfrhrFbrFHMhuHHDfTDDzqDMhBiqR5o0WSaFEmiu/2FihneuCGxl7MHCuWR5H6O5V6HSTwLO5Md2i2bnVB2nJg//WpbMp6n3BgVqFUnMpq22/VM5K+MYG7MjAud8WMdBdVV71G7na9O1O/XgOZNtd4H/TFr/1MLLznRjvejdchXK769w3E4yhmUBr6k1nVCZEluRXo7IkmWjslLfK+kB/uHaX+tln4N36MV5rPAmNAUTmPgouiQD0TsKl3CBFdzdRfE26+6xIaNUZbbuzQyOrk/so6APtwjv+GVeJ5fE6vEV4GReHeAcF7ZT0pOqNx2w6ytlxPbZyZ5tnPHGaRYPPgbNx/1UC9zbCu15iJ2aIYC5OQlr1+TcN+G8mcN9eoDT1k3385oO/o0MsNelDfLvrGMhqljf6ks8G8Fahj4Vl4FNovRED/euNb+S/DNdrAc0y80b+f8a+6vLlGCLvObTeEwNn1xsZ+GVEr63CU0VezErbA9Frq/BUkRcZuAei11bhqSIvMnAPRK+tQoy86IeViF5bhRh50Q8rEb22Cg//PNkfhYcPx3dE9NoqPDzo/yg8fDi+I/4Dv0IfIC+CYV0AAAAASUVORK5CYII=" alt="" />
查看是否隐藏功能打开
2:实际操作中,只是第一步,还是看不到上传页面,只有配置了这一步才可以
上面的只是一个上传页面。也就相当于一个HTML的form表单,要配置点击“上传到服务器上”按钮后请求的Action。可以在ckeditor/config.js中配置。
加入:
config.filebrowserImageUploadUrl = 'upload.php?type=img';
config.filebrowserFlashUploadUrl = 'upload.php?type=flash';
3、upload.php的代码如下:
<?php /*
CKEditor_upload.php
monkee
2009-11-15 16:47
*/
$config = array();
$config['type'] = array(
"flash",
"img"
); //上传允许type值
$config['img'] = array(
"jpg",
"bmp",
"gif"
); //img允许后缀
$config['flash'] = array(
"flv",
"swf"
); //flash允许后缀
$config['flash_size'] = 200; //上传flash大小上限 单位:KB
$config['img_size'] = 500; //上传img大小上限 单位:KB
$config['message'] = "上传成功"; //上传成功后显示的消息,若为空则不显示
$config['name'] = mktime(); //上传后的文件命名规则 这里以unix时间戳来命名
$config['flash_dir'] = "/ckeditor/upload/flash"; //上传flash文件地址 采用绝对地址 方便upload.php文件放在站内的任何位置 后面不加"/"
$config['img_dir'] = "/ckeditor/upload/img"; //上传img文件地址 采用绝对地址 采用绝对地址 方便upload.php文件放在站内的任何位置 后面不加"/"
$config['site_url'] = ""; //网站的网址 这与图片上传后的地址有关 最后不加"/" 可留空
//文件上传
uploadfile();
function uploadfile() {
global $config;
//判断是否是非法调用
if (empty($_GET['CKEditorFuncNum'])) mkhtml(1, "", "错误的功能调用请求");
$fn = $_GET['CKEditorFuncNum'];
if (!in_array($_GET['type'], $config['type'])) mkhtml(1, "", "错误的文件调用请求");
$type = $_GET['type'];
if (is_uploaded_file($_FILES['upload']['tmp_name'])) {
//判断上传文件是否允许
$filearr = pathinfo($_FILES['upload']['name']);
$filetype = $filearr["extension"];
if (!in_array($filetype, $config[$type])) mkhtml($fn, "", "错误的文件类型!");
//判断文件大小是否符合要求
if ($_FILES['upload']['size'] > $config[$type . "_size"] * 1024) mkhtml($fn, "", "上传的文件不能超过" . $config[$type . "_size"] . "KB!");
//$filearr=explode(".",$_FILES['upload']['name']);
//$filetype=$filearr[count($filearr)-1];
$file_abso = $config[$type . "_dir"] . "/" . $config['name'] . "." . $filetype;
$file_host = $_SERVER['DOCUMENT_ROOT'] . $file_abso;
if (move_uploaded_file($_FILES['upload']['tmp_name'], $file_host)) {
mkhtml($fn, $config['site_url'] . $file_abso, $config['message']);
} else { //mkhtml($fn, "", $_FILES['upload']['tmp_name']);
mkhtml($fn, "", $file_host);
mkhtml($fn, "", "文件上传失败,请检查上传目录设置和目录读写权限");
}
}
}
//输出js调用
function mkhtml($fn, $fileurl, $message) {
$str = '<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction(' . $fn . ', \'' . $fileurl . '\', \'' . $message . '\');</script>';
exit($str);
}
?>
4、注意上面的目的目录必须存在,可以事先创建
ckeditor_4.5.10_full上传图片功能的更多相关文章
- MVC ueditor的使用(实现上传图片功能)
之前使用ckeditor不能实现上传图片功能,只要是我不知道怎么使用啦o( ̄ε ̄*),然后就换了ueditor~~,可以实现上传图片功能啦~\(≧▽≦)/~~ 下面是我的步骤:去官网下载最新版uedi ...
- aspx页面中用Input 标签实现上传图片功能
实现上传图片功能需单独的建立一个aspx页面, 其中前台页面需要注意两点: a)实现上传功能的input的type="file" b)设置请求报文头为 enctype=" ...
- WCF实现上传图片功能
初次学习实现WCF winform程序的通信,主要功能是实现图片的传输. 下面是实现步骤: 第一步: 首先建立一个类库项目TransferPicLib,导入wcf需要的引用System.Service ...
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
sql server 关于表中只增标识问题 由于我们系统时间用的过长,数据量大,设计是采用自增ID 我们插入数据的时候把ID也写进去,我们可以采用 关闭和开启自增标识 没有关闭的时候 ,提示一下错 ...
- JAVA 上传图片功能
前后端实现上传图片功能(JAVA代码) 1.前端大概 请求头必须为AJAX请求头: 'X-Requested-With': 'XMLHttpRequest' 一般是指网页中存在的Content-Typ ...
- Vue实现上传图片功能
前言: 用vue实现上传图片功能,效果图如下: 先说文件上传控件样式美化怎么做,我有两种方法. 1.先上代码 html部分: <div class="pics-wrapper" ...
- 配置Django-TinyMCE组件支持上传图片功能
Django自带的Admin后台,好用,TinyMCE作为富文本编辑器,也蛮好用的,这两者结合起来在做博客的时候很方便(当然博客可能更适合用Markdown来写),但是Django-TinyMCE这个 ...
- 富文本文件CKEDITOR增加上传图片功能(.net)
如题,本身的CKEDITOR控件并没有开启上传图片的功能, 打开图像按钮,只有图像信息和高级两个table选项卡,版本不同,显示略有差异,我的实现是有两种方法都可以添加上传功能, 第一种方法使用CKE ...
- 使用.Net Core+IView+Vue集成上传图片功能
最近的项目里有上传图片的功能,当然这个功能在项目里是必须要有的,那么目前这个项目是使用完全的前后端分离,在选择文件上传的组件中还是选择了全面支持Vue的IView,任何上传图片都是通过HTTP请求,服 ...
随机推荐
- 输出第N个素数
输出第N个素数 public class FindNthPrime { public static void main(String[] args){ int N = Integer.parseInt ...
- nullptr和NULL 区别
注:本文内容摘自网络,准确性有待验证,现阶段仅供学习参考.尊重作品作者成果,原文链接 :http://www.2cto.com/kf/201302/190008.html 1.为什要有nullptr ...
- Angularjs中编写指令模版
angular.module('moduleName', []).directive( 'namespaceDirectiveName', [ function() { return { restri ...
- 「译」如何正确学习JavaScript
原文:How to Learn JavaScript Properly 目录 不要这样学习JavaScript 本课程资源 1-2周(简介,数据类型,表达式和操作符) 3~4周(对象,数组,函数,DO ...
- C#中标准Dispose模式的实现
http://www.cnblogs.com/luminji/archive/2011/03/29/1997812.html 需要明确一下C#程序(或者说.NET)中的资源.简单的说来,C#中的每一个 ...
- 一种轻量的openresty路由设计
在使用openresty开发接口的过程会发现一个问题,那就是接口的地址问题怎么解决,最好一个接口地址对应一个lua文件,也可以在nginx.conf 配置中使用content_by_lua 来编写接口 ...
- 零基础学redis
第一个阶段:redis基本知识了解: 1. redis的百度百科解释: Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言 ...
- iOS出现 Undefined symbols for architecture armv7 std::basic_string<char, std::char_traits<char>
Undefined symbols for architecture i386: “_OBJC_CLASS_$_XXX”, referenced from: objc-class-ref in XXX ...
- 【MongoDB】应用场景
24 Use Cases24.1 适合场景 Archiving and event logging 归档和日志记录 Document and Content Management Systems ...
- 在keil中使用Astyle格式化你的代码的方法
一个好的程序,不仅要有好的算法,同时也需要有良好的书写风格.写出好的算法不容易,但是好的代码风格却并不困难.提到格式化代码,Astyle是一个不能错过的工具,它可以方便的将程序代码格式化成自己想要的样 ...