{"id":24511,"date":"2021-05-14T12:26:00","date_gmt":"2021-05-14T09:26:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24511"},"modified":"2021-10-17T19:13:52","modified_gmt":"2021-10-17T16:13:52","slug":"trix-avatud-lahtekoodiga-wysiwyg-redaktor-veebisaitidele","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/trix-avatud-lahtekoodiga-wysiwyg-redaktor-veebisaitidele\/","title":{"rendered":"Trix &#8211; avatud l\u00e4htekoodiga WYSIWYG-redaktor veebisaitidele"},"content":{"rendered":"<p>HTML-elemente ja pilte sisaldava kirjeldava sisu kirjutamiseks on kasulik rikas tekstiredaktor v\u00f5i WYSIWYG-redaktor. HTML textarea m\u00e4rgendis ei saa HTML-i siltidega sisu kirjutada. Seet\u00f5ttu kasutab enamik veebisaite WYSIWYG HTML-i redigeerijat.<\/p>\n<p><a href=\"https:\/\/trix-editor.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Trix<\/a> on Basecampi avatud l\u00e4htekoodiga rikas tekstiredaktor. Kuna seda kasutatakse Basecampis, kasutavad miljonid inimesed seda juba oma sisu kirjutamiseks. Selles artiklis uurime, kuidas Trixi redigeerijat oma veebirakendustesse lisada.<\/p>\n<h3>Paigaldamine<\/h3>\n<p>Trix v\u00f5\u00f5rustas oma paketti <a href=\"https:\/\/github.com\/basecamp\/trix\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">GitHubis,<\/a> et kasutajad saaksid seda kena redaktorit h\u00f5lpsasti oma veebirakendustes kasutada. Alustamiseks peate k\u00f5igepealt lisama Trixi JS- ja CSS-failid. Need failid saate otse <a href=\"https:\/\/github.com\/basecamp\/trix\/tree\/master\/dist\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">GITHubi<\/a> lehelt dist kausta. V\u00f5i muidu, lae oma paketi ja kopeerida <code>trix.js<\/code>ja <code>trix.css<\/code>faile.<\/p>\n<p>Samuti peate looma 2 PHP-faili ja veel \u00fche JS-faili. Miks ja kuidas neid faile kasutada, n\u00e4eme hilisemas osas. Teie kaustade struktuur peaks olema j\u00e4rgmine:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20611-60820e5688ed8.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20611-60820e5688ed8.png\" alt=\"Trix - avatud l\u00e4htekoodiga WYSIWYG-redaktor veebisaitidele\" ><\/a><\/p>\n<p>Kirjutage oma veebisaidile Trixi redigeerija lisamiseks j\u00e4rgmine kood.<\/p>\n<p><strong>index.php<\/strong><\/p>\n<pre><code>&lt;link rel=\"stylesheet\" href=\"css\/trix.css\"&gt;\n&lt;script src=\"js\/trix.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"js\/attachments.js\"&gt;&lt;\/script&gt;\n&lt;form method=\"post\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;input id=\"x\" type=\"hidden\" name=\"content\" value=\"\" \/&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;trix-editor input=\"x\"&gt;&lt;\/trix-editor&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;input type=\"submit\" name=\"submit\" value=\"Submit\" \/&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>\u00dclaltoodud koodis lisasime otse CSS- ja JS-failid. Muidugi peaksite nende failide lisamiseks j\u00e4rgima oma raamistiku \/ CMS-i juhiseid.<\/p>\n<p>Trixi redaktor lisab kogu kirjutatud sisu varjatud v\u00e4ljale, mille oleme eespool lisanud. Ja vormi esitamisel peate redaktorilt sisu hankimiseks j\u00e4tkama peidetud v\u00e4ljaga. P\u00f5him\u00f5tteliselt saate Trixi redaktori sisu serveripoolselt, kasutades:<\/p>\n<pre><code>&lt;?php\necho $_POST['content']; \/\/here 'content' is the name given to hidden field<\/code><\/pre>\n<p>Samamoodi soovite redaktori eelnevalt sisuga t\u00e4ita, seej\u00e4rel sisestada sisu peidetud v\u00e4lja v\u00e4\u00e4rtusatribuutidesse. Trixiredaktor t\u00e4idab sisu automaatselt peidetud elemendist.<\/p>\n<p>J\u00e4rgmisena k\u00e4ivitage see fail oma brauseris ja peaksite lehel n\u00e4gema oma WYSIWYG-redaktorit.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20611-60820e56c5c4f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20611-60820e56c5c4f.png\" alt=\"Trix - avatud l\u00e4htekoodiga WYSIWYG-redaktor veebisaitidele\" ><\/a><\/p>\n<h3>Laadige pilt \u00fcles Trix WYSIWYG Editoris<\/h3>\n<p>GitHubi dokumentatsioonis, mida nad mainisid manustatud failide salvestamise kohta.<\/p>\n<p>Trix aktsepteerib redaktorisse lohistatud v\u00f5i kleebitud failid automaatselt ja lisab need dokumendi manustena. Iga manus loetakse ootel olevaks seni, kuni salvestate selle eemalt ja edastate Trixile p\u00fcsiva URL-i.<\/p>\n<p>See t\u00e4hendab, et peate redaktorist pildi v\u00f5tma, selle serveripoolele saatma, serverisse pildid \u00fcles laadima ja pildi URL tagasi saatma. Selle protsessi l\u00e4biviimiseks kirjutame j\u00e4rgmistes toimingutes JS- ja PHP-koodi.<\/p>\n<p>K\u00f5igepealt alustame JS-koodiga. Olete loonud <code>attachments.js<\/code>faili kataloogis &#8216;js&#8217;. Sellel JS-failil on j\u00e4rgmine kood.<\/p>\n<pre><code>(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<p>Asendage kohat\u00e4ide &#8216;YOUR_DOMAIN_URL&#8217; oma tegeliku URL-iga. Mida see kood teeb, see kuulab <code>trix-attachment-add<\/code>s\u00fcndmust, saadab <code>upload.php<\/code>faili manuse. Serverilt vastuse tagastamisel m\u00e4\u00e4rab redaktori atribuutidesse p\u00fcsiva pildi URL.<\/p>\n<p>L\u00f5puks kirjutage <code>upload.php<\/code>faili \u00fcleslaaditava pildi kood .<\/p>\n<pre><code>&lt;?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<p>Loodame, et m\u00f5istate, kuidas Trix WYSIWYG-i redaktorit oma veebisaidil PHP abil lisada. Soovime teie m\u00f5tteid kuulda allpool olevas kommentaaride jaotises.<\/p>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/kuidas-ckeditorit-laravelis-installida-ja-kasutada\/\" title=\"Kuidas CKEditorit Laravelis installida ja kasutada\">Kuidas CKEditorit Laravelis installida ja kasutada<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/tinymce-redigeerija-installimine-ja-kasutamine-laravelis\/\" title=\"TinyMCE - WYSIWYG HTML-i redigeerija installimine ja kasutamine Laravelis\">TinyMCE &#8211; WYSIWYG HTML-i redigeerija installimine ja kasutamine Laravelis<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trix WYSIWYG toimetaja on Basecampi loodud avatud l\u00e4htekoodiga projekt. See on laialt kasutatav redaktor ja selles artiklis me n\u00e4itame teile, kuidas seda redaktorit lisada<\/p>\n","protected":false},"author":1,"featured_media":20612,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[420],"tags":[842],"class_list":["post-24511","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mitmesugused-et","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/24511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/comments?post=24511"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/24511\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media\/20612"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media?parent=24511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/categories?post=24511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/tags?post=24511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}