{"id":350373,"date":"2021-10-08T21:00:41","date_gmt":"2021-10-08T18:00:41","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/what-is-a-wysiwyg-editor\/"},"modified":"2021-10-08T21:00:41","modified_gmt":"2021-10-08T18:00:41","slug":"what-is-a-wysiwyg-editor","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/what-is-a-wysiwyg-editor\/","title":{"rendered":"#What Is a WYSIWYG Editor?"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a2f3ce690cc3\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a2f3ce690cc3\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-wysiwyg-editor\/#What_You_See_Is_What_You_Get\" >What You See Is What You Get<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-wysiwyg-editor\/#The_History_of_WYSIWYG\" >The History of WYSIWYG<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-wysiwyg-editor\/#Types_of_WYSIWYG\" >Types of WYSIWYG<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-wysiwyg-editor\/#WYSIWYG_Editors\" >WYSIWYG Editors<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#What Is a WYSIWYG Editor?&#8221;<\/strong><\/p>\n<div>\n<figure style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage size-full wp-image-753159\" srcset=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/08\/wysiwyg-dictionary-definition.jpg?width=398&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 400w, https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/08\/wysiwyg-dictionary-definition.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 1200w\" sizes=\"auto, 400w, 1200w\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/08\/wysiwyg-dictionary-definition.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Closeup of a definition of &quot;WYSIWYG&quot; in a dictionary\" width=\"1200\" height=\"675\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><figcaption class=\"wp-caption-text\"><span class=\"type:primaryImage imagecredit\"><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.shutterstock.com\/image-photo\/wysiwyg-word-dictionary-concept-definition-1953362356\">Casimiro PT\/Shutterstock.com<\/a><\/span><\/figcaption><\/figure>\n<p>WYSIWYG seems like a long acronym, but it\u2019s an essential element of modern user interfaces. Here\u2019s what it means and where you can see it on the internet.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"What_You_See_Is_What_You_Get\"><\/span>What You See Is What You Get<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>WYSIWYG is a tech initialism that stands for \u201cwhat you see is what you get.\u201d It usually refers to a user interface that lets you directly edit and manipulate the look and content of a document, page, or file. This means that whatever edits you\u2019re making to something will display the same way when the final output is produced.<\/p>\n<p>As the internet has become more ubiquitous and accessible to people, WYSIWYG editors have grown in popularity. Since people need to find ways to upload and send formatted content on the fly, most use WYSIWYG environments.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"The_History_of_WYSIWYG\"><\/span>The History of WYSIWYG<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The actual term \u201cwhat you see is what you get\u201d predates the internet significantly. It was a relatively common idiomatic expression used to describe things that are just as they <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>ear. For example, if you\u2019ve been looking for a used car, and you see one that for a low price that seems to be in terrible condition, the salesman might say, \u201cWell, what you see is what you get.\u201d<\/p>\n<p>Eventually, this term became prominent among software developers and computer builders. The earliest computers had no form of WYSIWYG. Instead, people created formatted documents via custom coding languages and tags, intended to work within the confines of older programming languages.<\/p>\n<p>Eventually, the tech company <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.parc.com\/about-parc\/parc-history\/\">Xerox PARC<\/a> released the Alto, the first personal computer with an included WYSIWYG editor. This coincided with their introduction of the\u00a0graphical user interface, or GUI, that allowed users to visually interact with elements on a computer. Soon after, companies like HP, Apple, and Microsoft also released computer programs that included native support for visual editors.<\/p>\n<p><strong>RELATED:<\/strong> <strong><em>What Is UI, and What Does It Stand For?<\/em><\/strong><\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Types_of_WYSIWYG\"><\/span>Types of WYSIWYG<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure style=\"width: 650px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-752854 size-full\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/08\/Squarespace-Website-Editor.jpg?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Squarespace Editor\" width=\"650\" height=\"350\" data-credittext=\"Squarespace\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><figcaption class=\"wp-caption-text\"><span class=\"imagecredit\">Squarespace<\/span><\/figcaption><\/figure>\n<p>Depending on the context, you can refer to various software tools and interfaces as \u201cWYSIWYG\u201d editors.<\/p>\n<p>The most common are systems that allow you to edit documents and text. Whereas non-visual editors would typically have a markup language like Markdown or BB Code that is later parsed into formatted text, WYSIWYG editors like Microsoft Office allow you to make edits to format and content on the fly. These documents can then be shared or printed, and they will appear in the same way as they do on your computers.<\/p>\n<p>There\u2019s also web development. Usually, front-end web development requires understanding languages such as HTML and CSS to build a good-looking, responsive website.\u00a0The rise in \u201cdrag-and-drop\u201d interfaces among website builders has grown, which has allowed people to create their own websites without understanding code. Tools like Adobe Dreamweaver will enable you to design a website and export it as code that a browser can parse.<\/p>\n<p>WYSIWYG can also broadly apply to any number of software that creative professionals use. Live video editors, photo editors, illustration programs, and 3D animation studios all adopt a visual method for showing you your output im<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">media<\/a>tely. For example, video editors like Adobe Premiere and Sony Vegas have a \u201cpreview\u201d box that instantly allows you to playback your finished clips before going through a long export process.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"WYSIWYG_Editors\"><\/span>WYSIWYG Editors<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<figure style=\"width: 650px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-752855 size-full\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/08\/Wordpress-Front-Facing-Editor.jpg?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Wordpress Visual Editor\" width=\"650\" height=\"350\" data-credittext=\"Wordpress\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><figcaption class=\"wp-caption-text\"><span class=\"imagecredit\">WordPress<\/span><\/figcaption><\/figure>\n<p>The main advantage of a WYSIWYG editor, of course, is that it\u2019s easier to use for an end-user. Instead of learning how to use a bunch of different markup languages, these editors allow you to format, resize, and add multimedia to your posts with the click of a button. This is why most forums, web-builders, and editors have largely moved to WYSIWYG systems.<\/p>\n<p>Most commercially available text editors are WYSIWYG. This includes popular word processors like Microsoft Office, LibreOffice, Google Docs, and rich text editors like WordPad and Evernote. Most on-site text editors allow you to use either markup language or WYSIWYG. For example, the WordPress post box allows you to switch between the \u201cVisual\u201d editor, which gives you a direct preview of what you\u2019re writing, and the \u201cText\u201d editor, which allows you to edit in HTML directly.<\/p>\n<p>Many WYSIWYG web hosts allow you to create a website without understanding much code. This includes popular services like Squarespace, Wix, and Weebly. These commonly provide \u201cdrag-and-drop\u201d interfaces that allow you to add content blocks on a page following a particular template. Some also allow you to type in a hybrid format that melds together WYSIWYG editing with traditional editing. A typical example of this is websites with markdown, like Reddit. You will often have options to apply formatting in their text boxes, which you can preview before you post.<\/p>\n<p><strong>RELATED:<\/strong> <strong><em>What Is Markdown and How Do You Use It?<\/em><\/strong><\/p>\n<\/div>\n<p><script>\n setTimeout(function(){\n  !function(f,b,e,v,n,t,s)\n  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n  n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n  n.queue=[];t=b.createElement(e);t.async=!0;\n  t.src=v;s=b.getElementsByTagName(e)[0];\n  s.parentNode.insertBefore(t,s) } (window, document,'script',\n  'https:\/\/connect.facebook.net\/en_US\/fbevents.js');\n   fbq('init', '335401813750447');\n   fbq('track', 'PageView');\n  },3000);\n<\/script><\/p>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.howtogeek.com\/752396\/what-is-a-wysiwyg-editor\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#What Is a WYSIWYG Editor?&#8221; Casimiro PT\/Shutterstock.com WYSIWYG seems like a long acronym, but it\u2019s an essential element of modern user interfaces. Here\u2019s what it means and where you can see it on the internet. What You See Is What You Get WYSIWYG is a tech initialism that stands for \u201cwhat you see is what&#8230;<\/p>\n","protected":false},"author":1,"featured_media":350374,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/08\/wysiwyg-dictionary-definition.jpg?height=200p&trim=2,2,2,2","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-350373","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/350373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=350373"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/350373\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/350374"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=350373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=350373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=350373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}