Hoe te programmeren met Yii2 Rich Text Input met Redactor

Als je vraagt: "Wat is Yii?" bekijk mijn eerdere tutorial: Introductie tot het Yii Framework, die de voordelen van Yii bekijkt en een overzicht bevat van wat er nieuw is in Yii 2.0, uitgebracht in oktober 2014.

In deze serie Programming With Yii2 begeleid ik lezers in gebruik van het onlangs bijgewerkte Yii2 Framework voor PHP. In deze tutorial ga ik je voorstellen aan het gebruik van de RTF-redacteur Redactor in het Yii Framework.

Voor deze voorbeelden blijven we ons voorstellen dat we een raamwerk bouwen voor het plaatsen van eenvoudige statusupdates, bijvoorbeeld onze eigen mini-Twitter.

Ter herinnering, ik neem wel deel aan de commentaarthreads hieronder. Ik ben vooral geïnteresseerd als je verschillende benaderingen of aanvullende ideeën hebt, of als je onderwerpen wilt voorstellen voor toekomstige zelfstudies.

Wat is Redactor?

Redactor is een krachtige rich-text-editor gemaakt door Imperavi. Het heeft een extreem schone en snelle gebruikersinterface en biedt ook een platform voor krachtige uitbreidingen. Het biedt een JQuery-API en heeft een breed scala aan plug-ins, zoals voor afbeeldingenbeheer, tabelopmaak en bewerken op volledig scherm.

Gelukkig kocht de Yii-community een onbeperkte licentie voor Redactor voor elke toepassing die op het framework is gebouwd. Met Yii2 kun je Redactor installeren en in slechts een paar minuten tekst bewerken in je formulieren integreren.

Je zou ook eens kunnen kijken naar de tutorial die ik heb geschreven over Squire, een alternatieve, lichtere rich text-editor, die ook kan worden geïntegreerd met Yii. 

Redactor installeren

We beginnen met het installeren van een Yii2-extensie voor Redactor (yii2-redactor) met behulp van componist:

Admins-MBP: hallo Jeff $ composer vereist --prefer-dist yiidoc / yii2-redactor "*" ./composer.json is bijgewerkt Bezig met laden van composer-repositories met pakketinformatie Bijwerken van afhankelijkheden (inclusief require-dev) - Installeren van yiidoc / yii2- redactor (2.0.0) Downloaden: 100% Schrijfslotbestand Autoloadbestanden genereren

In onze web / config.php bestand, voegen we de moduledefinitie toe voor Redactor:

... einde van array van componenten ...], 'modules' => ['redactor' => 'yii \ redactor \ RedactorModule',], 'params' => $ params,];

Redactor gebruiken op onze formulieren

Laten we het standaard tekstinvoerveld vervangen door Redactor. Dit is het gewone tekstformulier:

Wanneer we het standaard tekstgebied wijzigen om de Yii2 Redactor-widget in te gebruiken views / staat / _form.php:

  field ($ model, 'message') -> textarea (['rows' => 6])?> field ($ model, 'message') -> widget (\ yii \ redactor \ widgets \ Redactor :: className ())?> 

Het is hierin getransformeerd:

Redactor verzendt HTML. Dus wanneer u het formulier verzendt, ziet u de HTML die is gegenereerd door wat we hebben getypt en opgemaakt:

Beeldondersteuning toevoegen aan Redactor

Om ondersteuning voor het uploaden van afbeeldingen toe te voegen, moeten we een / Web / uploads map in onze boom. Vervolgens moeten we de moduledefinitie voor Redactor in wijzigen /config/web.php:

'modules' => ['redactor' => 'yii \ redactor \ RedactorModule', 'class' => 'yii \ redactor \ RedactorModule', 'uploadDir' => '@ webroot / uploads', 'uploadUrl' => ' / hallo / uploads ',],

Dan voegen we een toe ImageUpload optie voor de Redactor-widget:

 field ($ model, 'message') -> widget (\ yii \ redactor \ widgets \ Redactor :: className (), ['clientOptions' => ['imageUpload' => \ yii \ helpers \ Url :: to ([ '/ redactor / upload / image']),],])?> 

Ik vond ook dat de plugin de uploadUrl momenteel. Dus ik handmatig bewerkt /vendor/yiidoc/yii2-redactor/models/RedactorModule.php om de uploadUrl hier:

class RedactorModule breidt \ yii \ base \ Module public $ controllerNamespace = 'yii \ redactor \ controllers' uit; public $ defaultRoute = 'upload'; public $ uploadDir = '@ webroot / uploads'; public $ uploadUrl = '/ hallo / uploads'; 

Ik heb dit gemeld aan de ontwikkelaar van de plug-in. 

Opmerking: het is het beste om de plug-in uit GitHub te splitsen en deze in uw eigen codestructuur te plaatsen voordat u wijzigingen aanbrengt. 

Met deze wijziging ziet u een afbeeldingpictogram op de werkbalk Redactor:

Als u erop klikt, wordt dit dialoogvenster voor bestandsupload weergegeven:

Zo ziet het eruit met een geüploade afbeelding:

De foto is van een zonsopkomst die ik begin 2014 had mogen meemaken in Chenai, India.

Wanneer u de status bij de afbeelding verzendt, wordt deze weergegeven als HTML in de record:

De ontwikkelaar van plug-ins raadt u aan om uw map met image-uploads verstandig te beveiligen voordat u een project host met deze functie: Veilige media-uploads instellen.

Ik heb ontdekt dat Redactor een ongelooflijk robuuste en gepolijste rich-textoptie is voor mijn webtoepassingen. Ik hoop dat je het leuk vindt om het te gebruiken.

Wat is het volgende?

Bekijk de komende tutorials in onze Programming With Yii2-serie terwijl we doorgaan met duiken in verschillende aspecten van het framework. Je kunt ook onze Building Your Startup With PHP-serie bekijken, die gebruik maakt van de geavanceerde template van Yii2 terwijl we een real-world applicatie bouwen.

Ik verwelkom aanvragen voor functies en onderwerpen. Je kunt ze plaatsen in de reacties hieronder of e-mail me op mijn Lookahead Consulting-website.

Als je wilt weten wanneer de volgende Yii2-handleiding aankomt, volg me dan @reifman op Twitter of bekijk mijn instructeurspagina. Op mijn instructeurspagina staan ​​alle artikelen uit deze serie zodra ze zijn gepubliceerd. 

Gerelateerde Links

• Imperavi's Redactor-website
• De Yii2 Redactor-plugin
• Yii2 Developer Exchange, mijn Yii2-bronsite