{"id":27932,"date":"2021-05-14T12:28:00","date_gmt":"2021-05-14T09:28:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27932"},"modified":"2021-10-17T04:58:19","modified_gmt":"2021-10-17T01:58:19","slug":"trix-en-oppen-kallkod-wysiwyg-editor-for-webbplatser","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/trix-en-oppen-kallkod-wysiwyg-editor-for-webbplatser\/","title":{"rendered":"Trix &#8211; En \u00f6ppen k\u00e4llkod WYSIWYG Editor f\u00f6r webbplatser"},"content":{"rendered":"<p>En redigerare med rik text eller WYSIWYG-redigerare \u00e4r anv\u00e4ndbar f\u00f6r att skriva beskrivande inneh\u00e5ll som inneh\u00e5ller HTML-element och bilder. I HTML-textomr\u00e5det kan man inte skriva inneh\u00e5ll med HTML-taggar. Det \u00e4r d\u00e4rf\u00f6r de flesta webbplatser anv\u00e4nder WYSIWYG HTML-redigerare.<\/p>\n<p><a href=\"https:\/\/trix-editor.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Trix<\/a> \u00e4r en \u00f6ppen k\u00e4llkodsredigerare fr\u00e5n Basecamp. Eftersom det anv\u00e4nds i Basecamp anv\u00e4nder miljontals m\u00e4nniskor det redan f\u00f6r att skriva sitt inneh\u00e5ll. I den h\u00e4r artikeln studerar vi hur du l\u00e4gger till Trix-redigerare i dina webbapplikationer.<\/p>\n<h3>Installation<\/h3>\n<p>Trix var v\u00e4rd f\u00f6r sitt paket p\u00e5 <a href=\"https:\/\/github.com\/basecamp\/trix\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">GitHub<\/a> s\u00e5 att anv\u00e4ndarna enkelt kan anv\u00e4nda den h\u00e4r fina redigeraren i sina webbapplikationer. F\u00f6r att komma ig\u00e5ng m\u00e5ste du f\u00f6rst inkludera JS- och CSS-filer av Trix. Du kan h\u00e4mta dessa filer direkt i distmappen fr\u00e5n deras <a href=\"https:\/\/github.com\/basecamp\/trix\/tree\/master\/dist\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">GitHub-<\/a> sida. Annars, ladda ner deras paket och kopiera <code>trix.js<\/code>och <code>trix.css<\/code>filer.<\/p>\n<p>Du m\u00e5ste ocks\u00e5 skapa 2 PHP-filer och ytterligare en JS-fil. Vi kommer att se varf\u00f6r och hur man anv\u00e4nder dessa filer i den senare delen. Din mappstruktur ska vara som f\u00f6ljer:<\/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 - En \u00f6ppen k\u00e4llkod WYSIWYG Editor f\u00f6r webbplatser\" ><\/a><\/p>\n<p>Skriv koden nedan f\u00f6r att l\u00e4gga till Trix-redigeraren p\u00e5 din webbsida.<\/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>I koden ovan har vi lagt till CSS- och JS-filer direkt. Naturligtvis b\u00f6r du f\u00f6lja dina ramverk \/ CMS-riktlinjer f\u00f6r att inkludera dessa filer.<\/p>\n<p>Trix-redakt\u00f6ren l\u00e4gger till allt skrivet inneh\u00e5ll i det dolda f\u00e4ltet som vi har lagt till ovan. Och n\u00e4r du skickar in formul\u00e4ret ska du forts\u00e4tta med det dolda f\u00e4ltet f\u00f6r att h\u00e4mta inneh\u00e5llet fr\u00e5n redigeraren. I grund och botten f\u00e5r du Trix-redigerarens inneh\u00e5ll p\u00e5 serversidan med:<\/p>\n<pre><code>&lt;?php\necho $_POST['content']; \/\/here 'content' is the name given to hidden field<\/code><\/pre>\n<p>P\u00e5 samma s\u00e4tt vill du fylla i redigeraren med inneh\u00e5llet och sedan skicka inneh\u00e5llet i det attributens v\u00e4rdeattribut. Trix-redigeraren fyller automatiskt inneh\u00e5ll fr\u00e5n ett dolt element.<\/p>\n<p>K\u00f6r sedan den h\u00e4r filen i din webbl\u00e4sare och du b\u00f6r se din WYSIWYG-redigerare p\u00e5 sidan.<\/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 - En \u00f6ppen k\u00e4llkod WYSIWYG Editor f\u00f6r webbplatser\" ><\/a><\/p>\n<h3>Ladda upp bild i Trix WYSIWYG Editor<\/h3>\n<p>P\u00e5 GitHub-dokumentationen n\u00e4mnde de om lagring av bifogade filer.<\/p>\n<p>Trix accepterar automatiskt filer som dras eller klistras in i en redigerare och infogar dem som bilagor i dokumentet. Varje bilaga anses vara i v\u00e4ntan tills du lagrar den p\u00e5 distans och ger Trix en permanent URL.<\/p>\n<p>Det betyder att du m\u00e5ste ta en bild fr\u00e5n redigeraren, skicka den till serversidan, ladda upp bilder p\u00e5 servern och \u00e5terst\u00e4lla bildens URL. F\u00f6r att utf\u00f6ra denna process kommer vi att skriva JS och PHP-kod i n\u00e4sta steg.<\/p>\n<p>L\u00e5t oss f\u00f6rst b\u00f6rja med JS-kod. Du har skapat en <code>attachments.js<\/code>fil i katalogen &#8217;js&#8217;. Denna JS-fil kommer att ha f\u00f6ljande kod.<\/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>Ers\u00e4tt platsh\u00e5llaren &#8217;YOUR_DOMAIN_URL&#8217; med din faktiska URL. Vad den h\u00e4r koden g\u00f6r \u00e4r att den lyssnar efter <code>trix-attachment-add<\/code>h\u00e4ndelse, skickar en bilaga till <code>upload.php<\/code>filen. Vid svar fr\u00e5n servern st\u00e4ller den in permanent bild-URL i redigeringsattributen.<\/p>\n<p>Skriv slutligen den uppladdade bildkoden i <code>upload.php<\/code>filen.<\/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>Vi hoppas att du f\u00f6rst\u00e5r hur du l\u00e4gger till Trix WYSIWYG-editor med PHP p\u00e5 din webbplats. Vi vill h\u00f6ra dina tankar i kommentarsektionen nedan.<\/p>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/hur-man-installerar-och-anvander-ckeditor-i-laravel\/\" title=\"Hur man installerar och anv\u00e4nder CKEditor i Laravel\">Hur man installerar och anv\u00e4nder CKEditor i Laravel<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/hur-man-installerar-och-anvander-tinymce-editor-i-laravel\/\" title=\"Hur man installerar och anv\u00e4nder TinyMCE - WYSIWYG HTML Editor i Laravel\">Hur man installerar och anv\u00e4nder TinyMCE &#8211; WYSIWYG HTML Editor i Laravel<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <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-editor \u00e4r ett open source-projekt skapat av Basecamp. Det anv\u00e4nds ofta f\u00f6r redakt\u00f6rer och i den h\u00e4r artikeln visar vi dig hur du l\u00e4gger till den h\u00e4r redigeraren<\/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":[418],"tags":[850],"class_list":["post-27932","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diverse","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/27932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=27932"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/27932\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/20612"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=27932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=27932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=27932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}