{"id":27755,"date":"2021-05-14T12:31:00","date_gmt":"2021-05-14T09:31:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27755"},"modified":"2021-10-18T03:47:16","modified_gmt":"2021-10-18T00:47:16","slug":"trix-edytor-wysiwyg-typu-open-source-dla-stron-internetowych","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/trix-edytor-wysiwyg-typu-open-source-dla-stron-internetowych\/","title":{"rendered":"Trix \u2014 edytor WYSIWYG typu open source dla stron internetowych"},"content":{"rendered":"

Edytor tekstu sformatowanego lub edytor WYSIWYG jest przydatny do pisania opisowej tre\u015bci zawieraj\u0105cej elementy i obrazy HTML. W znaczniku HTML textarea nie mo\u017cna pisa\u0107 tre\u015bci za pomoc\u0105 znacznik\u00f3w HTML. Dlatego wi\u0119kszo\u015b\u0107 stron korzysta z edytora HTML WYSIWYG.<\/p>\n

Trix<\/a> to edytor tekstu sformatowanego typu open source firmy Basecamp. Poniewa\u017c jest u\u017cywany w Basecampie, miliony ludzi ju\u017c u\u017cywaj\u0105 go do pisania swoich tre\u015bci. W tym artykule dowiemy si\u0119, jak doda\u0107 edytor Trix do swoich aplikacji internetowych.<\/p>\n

Instalacja<\/h3>\n

Trix hostowa\u0142 sw\u00f3j pakiet na GitHub,<\/a> wi\u0119c u\u017cytkownicy mog\u0105 z \u0142atwo\u015bci\u0105 korzysta\u0107 z tego \u0142adnego edytora w swoich aplikacjach internetowych. Aby rozpocz\u0105\u0107, musisz najpierw do\u0142\u0105czy\u0107 pliki JS i CSS Trix. Mo\u017cesz pobra\u0107 te pliki bezpo\u015brednio do folderu dist z ich strony GitHub<\/a>. Lub pobierz ich pakiet i kopi\u0119 trix.js<\/code>i trix.css<\/code>pliki.<\/p>\n

Musisz tak\u017ce utworzy\u0107 2 pliki PHP i jeszcze jeden plik JS. W dalszej cz\u0119\u015bci dowiemy si\u0119, dlaczego i jak korzysta\u0107 z tych plik\u00f3w. Twoja struktura folder\u00f3w powinna wygl\u0105da\u0107 nast\u0119puj\u0105co:<\/p>\n

\"Trix<\/a><\/p>\n

Aby doda\u0107 edytor Trix na swojej stronie internetowej, napisz poni\u017cszy kod.<\/p>\n

index.php<\/strong><\/p>\n

<link rel=\"stylesheet\" href=\"css\/trix.css\">\n<script src=\"js\/trix.js\"><\/script>\n<script src=\"js\/attachments.js\"><\/script>\n<form method=\"post\">\n\u00a0\u00a0\u00a0\u00a0<input id=\"x\" type=\"hidden\" name=\"content\" value=\"\" \/>\n\u00a0\u00a0\u00a0\u00a0<trix-editor input=\"x\"><\/trix-editor>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" value=\"Submit\" \/>\n<\/form><\/code><\/pre>\n
W powy\u017cszym kodzie dodali\u015bmy bezpo\u015brednio pliki CSS i JS. Oczywi\u015bcie powiniene\u015b post\u0119powa\u0107 zgodnie z wytycznymi dotycz\u0105cymi frameworka\/CMS, aby do\u0142\u0105czy\u0107 te pliki.<\/p>\n
Edytor Trix do\u0142\u0105cza ca\u0142\u0105 napisan\u0105 tre\u015b\u0107 do ukrytego pola, kt\u00f3re dodali\u015bmy powy\u017cej. A kiedy przesy\u0142asz formularz, powiniene\u015b przej\u015b\u0107 do ukrytego pola, aby pobra\u0107 tre\u015b\u0107 z edytora. Zasadniczo otrzymasz zawarto\u015b\u0107 edytora Trix po stronie serwera za pomoc\u0105:<\/p>\n
<?php\necho $_POST['content']; \/\/here 'content' is the name given to hidden field<\/code><\/pre>\n
W ten sam spos\u00f3b chcesz wst\u0119pnie wype\u0142ni\u0107 edytor tre\u015bci\u0105, a nast\u0119pnie przekaza\u0107 tre\u015b\u0107 w atrybutach warto\u015bci ukrytego pola. Edytor Trix automatycznie wype\u0142nia zawarto\u015b\u0107 z ukrytego elementu.<\/p>\n
Nast\u0119pnie uruchom ten plik w przegl\u0105darce i powiniene\u015b zobaczy\u0107 na stronie edytor WYSIWYG.<\/p>\n
\"Trix<\/a><\/p>\n
Prze\u015blij obraz w edytorze Trix WYSIWYG<\/h3>\n
W dokumentacji GitHub wspominali o przechowywaniu za\u0142\u0105czonych plik\u00f3w.<\/p>\n
Trix automatycznie akceptuje pliki przeci\u0105gane lub wklejane do edytora i wstawia je jako za\u0142\u0105czniki do dokumentu. Ka\u017cdy za\u0142\u0105cznik jest uwa\u017cany za oczekuj\u0105cy, dop\u00f3ki nie przechowujesz go zdalnie i nie udost\u0119pnisz Trix sta\u0142ego adresu URL.<\/p>\n
Oznacza to, \u017ce musisz pobra\u0107 obraz z edytora, wys\u0142a\u0107 go po stronie serwera, przes\u0142a\u0107 obrazy na serwer i zwr\u00f3ci\u0107 adres URL obrazu. Aby wykona\u0107 ten proces, w kolejnych krokach napiszemy kod JS i PHP.<\/p>\n
Najpierw zacznijmy od kodu JS. Utworzy\u0142e\u015b attachments.js<\/code>plik w katalogu 'js’. Ten plik JS b\u0119dzie mia\u0142 nast\u0119puj\u0105cy kod.<\/p>\n
(function() {\n\u00a0\u00a0\u00a0\u00a0var HOST = \"YOUR_DOMAIN_URL\/upload.php\"\n\u00a0\n\u00a0\u00a0\u00a0\u00a0addEventListener(\"trix-attachment-add\", function(event) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (event.attachment.file) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uploadFileAttachment(event.attachment)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0})\n\u00a0\n\u00a0\u00a0\u00a0\u00a0function uploadFileAttachment(attachment) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uploadFile(attachment.file, setProgress, setAttributes)\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function setProgress(progress) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0attachment.setUploadProgress(progress)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function setAttributes(attributes) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0attachment.setAttributes(attributes)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0function uploadFile(file, progressCallback, successCallback) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var formData = createFormData(file)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var xhr = new XMLHttpRequest()\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.open(\"POST\", HOST, true)\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.upload.addEventListener(\"progress\", function(event) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var progress = event.loaded \/ event.total * 100\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0progressCallback(progress)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.addEventListener(\"load\", function(event) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var attributes = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: xhr.responseText,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0href: xhr.responseText + \"?content-disposition=attachment\"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0successCallback(attributes)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0xhr.send(formData)\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0function createFormData(file) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = new FormData()\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data.append(\"Content-Type\", file.type)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data.append(\"file\", file)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return data\n\u00a0\u00a0\u00a0\u00a0}\n})();<\/code><\/pre>\n
Zast\u0105p symbol zast\u0119pczy \u201eYOUR_DOMAIN_URL" swoim rzeczywistym adresem URL. To, co robi ten kod, to nas\u0142uchiwanie trix-attachment-add<\/code>zdarze\u0144, wysy\u0142anie za\u0142\u0105cznika do upload.php<\/code>pliku. Po zwr\u00f3ceniu odpowiedzi z serwera ustawia sta\u0142y adres URL obrazu w atrybutach edytora.<\/p>\n
Na koniec zapisz w pliku kod obrazu, kt\u00f3ry chcesz upload.php<\/code>przes\u0142a\u0107.<\/p>\n
<?php\nif (!file_exists('uploads')) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0mkdir('uploads', 0777);\n}\n\u00a0\nmove_uploaded_file($_FILES['file']['tmp_name'], 'uploads\/'.$_FILES['file']['name']);\n\u00a0\necho \"YOUR_DOMAIN_URL\/uploads\/\".$_FILES['file']['name'];<\/code><\/pre>\n
Mamy nadziej\u0119, \u017ce rozumiesz, jak doda\u0107 edytor Trix WYSIWYG za pomoc\u0105 PHP do swojej witryny. Chcieliby\u015bmy pozna\u0107 Twoje przemy\u015blenia w sekcji komentarzy poni\u017cej.<\/p>\n