Heim Backend-Entwicklung PHP-Tutorial Yii结合CKEditor实现图片上传功能_PHP教程

Yii结合CKEditor实现图片上传功能_PHP教程

Jul 13, 2016 am 10:28 AM
ckeditor yii 图片上传

这几天做的一个项目中需要在所见即所得编辑器中实现图片上传的功能,我因为比较喜欢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'=>'文件大小超过限制',
   ),
  );
 }
}

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/802217.htmlTechArticle这几天做的一个项目中需要在所见即所得编辑器中实现图片上传的功能,我因为比较喜欢CKEditor的界面而选择了它。虽然有跟CKEditor配合良好...
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Schritte zum Implementieren des Hochladens und Anzeigens von Bildern mithilfe des CakePHP-Frameworks Schritte zum Implementieren des Hochladens und Anzeigens von Bildern mithilfe des CakePHP-Frameworks Jul 29, 2023 pm 04:21 PM

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

Erstellen Sie einen Rich-Text-Editor mit PHP und CKEditor Erstellen Sie einen Rich-Text-Editor mit PHP und CKEditor May 11, 2023 pm 04:06 PM

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.

Das WeChat-Applet implementiert die Funktion zum Hochladen von Bildern Das WeChat-Applet implementiert die Funktion zum Hochladen von Bildern Nov 21, 2023 am 09:08 AM

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

So verwenden Sie PHP und Vue, um die Funktion zum Hochladen von Bildern zu implementieren So verwenden Sie PHP und Vue, um die Funktion zum Hochladen von Bildern zu implementieren Sep 25, 2023 pm 03:17 PM

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 Umgang mit dem Hochladen und Komprimieren von Bildern bei der Entwicklung der Vue-Technologie Oct 08, 2023 am 10:58 AM

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

Beim Hochladen und Zuschneiden von Bildern sind bei Verwendung der Vue-Entwicklung Probleme aufgetreten Beim Hochladen und Zuschneiden von Bildern sind bei Verwendung der Vue-Entwicklung Probleme aufgetreten Oct 08, 2023 pm 04:12 PM

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:

Wie verwende ich das Yii3-Framework in PHP? Wie verwende ich das Yii3-Framework in PHP? May 31, 2023 pm 10:42 PM

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.

So verwenden Sie ThinkPHP6 zum Hochladen von Bildern So verwenden Sie ThinkPHP6 zum Hochladen von Bildern Jun 20, 2023 pm 09:25 PM

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

See all articles