Yii结合CKEditor实现图片上传功能_PHP教程
这几天做的一个项目中需要在所见即所得编辑器中实现图片上传的功能,我因为比较喜欢CKEditor的界面而选择了它。虽然有跟CKEditor配合良好的CKFinder,不过这个东东的功能太复杂,简单看了下CKEdtior的文档,发现这个功能还是可以自己实现而不用借助CKFinder的。
下面代码虽然基于Yii Framework的,但是用其他框架或者语言思路却是完全一样的,有需要的童鞋可以参考一下。
首先要让CkEditor出现图片上传的功能,需要配置编辑器的filebrowserImageUploadUrl属性:
CKEDITOR.replace( 'editor1',
{
filebrowserUploadUrl : '/uploader/upload.php',
filebrowserImageUploadUrl : '/uploader/upload.php?type=Images'
});
然后在对应的URL上实现图片上传的功能,并向CKEditor返回特定格式的HTML代码,CKEditor就能正常预览并插入图片了。
下面只截取控制器的部分代码,Controller部分我是这样实现的:
/**
* 保存上传的图片
*
* @return string javascript code
* @author lfyzjck
**/
public function actionImg($type, $CKEditor, $CKEditorFuncNum, $langCode = 'zh-cn')
{
if(empty($CKEditorFuncNum) || $type != 'Images'){
$this->mkhtml($CKEditorFuncNum,'','错误的函数调用');
}
if(isset($_FILES['upload'])){
//获取关于图片上传配置
$options = Options::model()->findByPk(1);
$form = new UploadForm('image',$options);
$form->upload = CUploadedFile::getInstanceByName('upload');
if($form->validate()){
//文件名:时间+源文件名
$target_filename = date('Ymd-hm',time()).$form->upload->getName();
$path = Yii::app()->basePath.'/../uploads/'.$target_filename; //图片保存路径
$form->upload->saveAs($path);
$this->mkhtml($CKEditorFuncNum,Yii::app()->baseUrl.'/uploads/'.$target_filename, "上传成功");
}
else{
$this->mkhtml($CKEditorFuncNum,'',$form->getError('upload'));
}
}
}
/**
* 返回CKEditor的提示信息
*
* @return void
* @author lfyzjck
**/
private function mkhtml($fn, $fileurl, $message)
{
$str = '';
exit($str);
}
需要特别说明的mkhtml函数,他会调用CKEditor的函数产生提示信息。上传成功的时候将图片链接返回,CKEditor会根据URL生成图片预览。
然后是UploadForm的代码,这里会验证图片的格式和大小是否符合要求。
class UploadForm extends CFormModel
{
public $upload;
private $options;
private $type;
public function __construct($type, $options){
$this->options = $options;
$this->type = $type;
}
/**
* Declares the validation rules.
* The rules state that username and password are required,
* and password needs to be authenticated.
*/
public function rules()
{
return array(
array('upload', 'file',
'types' => $this->options->getAttribute("allow_".$this->type."_type"),
'maxSize' => 1024 * (int)$this->options->getAttribute("allow_".$this->type."_maxsize"),
'tooLarge'=>'文件大小超过限制',
),
);
}
}

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Schritte zum Implementieren des Hochladens und Anzeigens von Bildern mithilfe des CakePHP-Frameworks Einführung: In modernen Webanwendungen sind das Hochladen und Anzeigen von Bildern häufige Funktionsanforderungen. Das CakePHP-Framework stellt Entwicklern leistungsstarke Funktionen und praktische Tools zur Verfügung, die das Hochladen und Anzeigen von Bildern einfach und effizient machen. In diesem Artikel erfahren Sie, wie Sie das CakePHP-Framework zum Hochladen und Anzeigen von Bildern verwenden. Schritt 1: Erstellen Sie ein Datei-Upload-Formular. Zuerst müssen wir in der Ansichtsdatei ein Formular erstellen, damit Benutzer Bilder hochladen können. Das Folgende ist ein Beispiel dafür

Mit der weit verbreiteten Nutzung von Webanwendungen wird die Erstellung von Rich-Text-Editoren immer häufiger. CKEditor gilt aufgrund seiner guten Anpassbarkeit und Benutzerfreundlichkeit weithin als einer der besten Rich-Text-Editoren. In diesem Artikel wird erläutert, wie Sie mit PHP und CKEditor einen Rich-Text-Editor erstellen. Einführung in CKEditor CKEditor ist ein plattformübergreifender Open-Source-Rich-Text-Editor, der über JavaScript implementiert wird. Es bietet eine intuitive und leicht verständliche Symbolleiste, einschließlich Schriftart, Formatierung, Grafiken usw.

WeChat-Applet implementiert Bild-Upload-Funktion Mit der Entwicklung des mobilen Internets ist das WeChat-Applet zu einem unverzichtbaren Bestandteil des Lebens der Menschen geworden. WeChat-Miniprogramme bieten nicht nur eine Fülle von Anwendungsszenarien, sondern unterstützen auch vom Entwickler definierte Funktionen, einschließlich Funktionen zum Hochladen von Bildern. In diesem Artikel wird erläutert, wie die Bild-Upload-Funktion im WeChat-Applet implementiert wird, und es werden spezifische Codebeispiele bereitgestellt. 1. Vorbereitende Arbeiten Bevor wir mit dem Schreiben von Code beginnen, müssen wir die WeChat-Entwicklertools herunterladen und installieren und uns als WeChat-Entwickler registrieren. Gleichzeitig müssen Sie auch WeChat verstehen

Verwendung von PHP und Vue zur Implementierung der Bild-Upload-Funktion In der modernen Webentwicklung ist die Bild-Upload-Funktion eine sehr häufige Anforderung. In diesem Artikel wird detailliert beschrieben, wie PHP und Vue zum Implementieren der Bild-Upload-Funktion verwendet werden, und es werden spezifische Codebeispiele bereitgestellt. 1. Frontend-Teil (Vue) Zuerst müssen Sie ein Formular zum Hochladen von Bildern im Frontend erstellen. Der spezifische Code lautet wie folgt:<template><div><inputtype="fil

Umgang mit dem Hochladen und Komprimieren von Bildern bei der Entwicklung der Vue-Technologie In modernen Webanwendungen ist das Hochladen von Bildern eine sehr häufige Anforderung. Aus Gründen der Netzwerkübertragung und -speicherung kann das direkte Hochladen von Originalbildern mit hoher Auflösung jedoch zu langsamen Upload-Geschwindigkeiten und einer großen Verschwendung von Speicherplatz führen. Daher ist das Hochladen und Komprimieren von Bildern sehr wichtig. Bei der Entwicklung der Vue-Technologie können wir einige vorgefertigte Lösungen für das Hochladen und Komprimieren von Bildern verwenden. Im Folgenden wird die Verwendung von vue-upload-comone vorgestellt

Titel: Probleme und Lösungen beim Hochladen und Zuschneiden von Bildern in der Vue-Entwicklung. Einführung: Bei der Vue-Entwicklung sind das Hochladen und Zuschneiden von Bildern häufige Anforderungen. In diesem Artikel werden die bei der Vue-Entwicklung auftretenden Probleme beim Hochladen und Zuschneiden von Bildern vorgestellt und Lösungen sowie spezifische Codebeispiele bereitgestellt. 1. Problem beim Hochladen von Bildern: Durch Auswahl der Schaltfläche zum Hochladen von Bildern kann das Dateiauswahlfeld nicht ausgelöst werden: Dieses Problem liegt normalerweise daran, dass das Ereignis nicht korrekt gebunden ist oder das gebundene Ereignis nicht wirksam wird. Sie können das Klickereignis in der Vorlage binden und die Dateiauswahlbox in der entsprechenden Methode auslösen. Codebeispiel:

Mit der Weiterentwicklung des Internets wird auch die Nachfrage nach der Entwicklung von Webanwendungen immer größer. Für Entwickler erfordert die Entwicklung von Anwendungen ein stabiles, effizientes und leistungsstarkes Framework, das die Entwicklungseffizienz verbessern kann. Yii ist ein führendes Hochleistungs-PHP-Framework, das umfangreiche Funktionen und gute Leistung bietet. Yii3 ist die nächste Generation des Yii-Frameworks, das die Leistung und Codequalität basierend auf Yii2 weiter optimiert. In diesem Artikel stellen wir vor, wie Sie das Yii3-Framework zum Entwickeln von PHP-Anwendungen verwenden.

Mit der Entwicklung des Internets ist das Hochladen von Bildern zu einem wesentlichen Merkmal bei der Entwicklung von Websites und Anwendungen geworden. Im Bereich PHP hat sich ThinkPHP6 zu einem sehr beliebten Entwicklungsframework entwickelt. In diesem Artikel stellen wir vor, wie Sie ThinkPHP6 zum Implementieren des Bild-Uploads verwenden. 1. Projekt und Controller erstellen Zuerst müssen wir ein neues ThinkPHP6-Projekt erstellen. Sie können es mit Composer installieren oder die neueste Version von der offiziellen Website herunterladen. Geben Sie nach Abschluss der Installation in die Konsole ein
