{"id":12280,"date":"2022-09-08T19:44:18","date_gmt":"2022-09-08T16:44:18","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=12280"},"modified":"2022-09-08T19:44:21","modified_gmt":"2022-09-08T16:44:21","slug":"wysiwyg","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/wysiwyg\/","title":{"rendered":"Introducing WYSIWYG editor for Flatlogic Platform"},"content":{"rendered":"<p>We are happy to announce that the Schema Editor of the <a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/how_to_create_an_app_on_vue-compressed-600x600.png\"  data-excerpt=\"Vue.js is a front-end framework often used in web applications of small and medium scale but perfectly valid for large-scale projects, too. In this article we&#039;re explaining how to create a Vue app by hand and what other routes you can take if you need a Vue application.\" href=\"https:\/\/flatlogic.com\/blog\/how-to-create-a-vue-application\/\">Flatlogic Platform<\/a> now supports the ability to add WYSIWYG to your project! It took a long time, and thanks to customer feedback, we&#8217;ve finally made it!<\/p><p>The WYSIWYG editor is based on the <a href=\"https:\/\/www.tiny.cloud\/\">TinyMCE<\/a> library. The main feature of using the WYSIWYG editor is that users do not need to know programming or markup languages to create a web document. Data representation is displayed in visual form, as in Microsoft Word, and can be edited. <\/p><h2 class=\"wp-block-heading\">How to choose a WYSIWYG editor<\/h2><p>You can select the WYSIWYG editor in two ways:<\/p><p>1. When <a href=\"https:\/\/flatlogic.com\/projects\/new\">creating <\/a>the application in<strong> the 3rd step in <a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2024\/07\/Screenshot-2024-07-09-at-14.42.22-600x600.png\"  data-excerpt=\"We are happy to announce our latest enhancement - seamlessly integrating dynamic theme customization within the schema editor step\" href=\"https:\/\/flatlogic.com\/blog\/introducing-themes-support-to-flatlogic-generated-apps\/\">Schema Editor<\/a><\/strong>. To do this, you need to add a new field with the string type, select <strong>Multiline<\/strong>, and next select the <strong>Use WYSIWYG Editor<\/strong>.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-08-at-17.36.39-1024x825.png\" alt=\"\" class=\"wp-image-12294 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/825;\" \/><\/figure><\/div><p>2. In the settings of your project. Go to the <strong>Schema<\/strong> tab, add a new field, use an existing one with the string type, select <strong>Multiline<\/strong>, and next select the <strong>Use WYSIWYG Editor<\/strong>.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"790\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-08-at-17.48.10-1024x790.png\" alt=\"\" class=\"wp-image-12295 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-08-at-17.48.10-1024x790.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-08-at-17.48.10-600x463.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-08-at-17.48.10-768x593.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-08-at-17.48.10.png 1296w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/790;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\">How to find WYSIWYG Editor in the generated application<\/h2><p>Go to the table where you created your field with WYSIWYG. Create a new entity in this table or edit an existing string type entity and enjoy using the WYSIWYG editor.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"485\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-08-at-18.17.15-1024x485.png\" alt=\"\" class=\"wp-image-12297 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-08-at-18.17.15-1024x485.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-08-at-18.17.15-600x284.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-08-at-18.17.15-768x363.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-08-at-18.17.15-1536x727.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-08-at-18.17.15-2048x969.png 2048w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/485;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\">About Flatlogic Platform<\/h2><p><a href=\"https:\/\/flatlogic.com\/blog\/stand-with-ukraine\/\">Flatlogic<\/a> help software engineers and companies start <a href=\"https:\/\/flatlogic.com\/blog\/7-reasons-why-ui-matters-in-web-development\/\">web application<\/a> fast. Flatlogic generated <a href=\"https:\/\/flatlogic.com\/blog\/7-trends-in-javascript-to-look-for-in-2020\/\">web<\/a> application code in different stacks (Vue, <a href=\"https:\/\/flatlogic.com\/blog\/crud-app\/\">React<\/a>, <a href=\"https:\/\/flatlogic.com\/blog\/bootstrap-vs-material-ui-which-one-to-use-for-the-next-web-app\/\">Angular<\/a>, <a href=\"https:\/\/flatlogic.com\/blog\/top-javascript-calendar-plugins\/\">Node.js<\/a>, Laravel) in minutes based on the <a href=\"https:\/\/flatlogic.com\/blog\/ready-made-web-app-scheme-integration-flatlogic-platform-update\/\">database schema<\/a>. You can create DB schema either using our internal UI tool or by importing <a href=\"https:\/\/flatlogic.com\/blog\/what-is-postgresql\/\">SQL<\/a> scheme files. <a href=\"https:\/\/flatlogic.com\/generator\"><img decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png\" alt=\"Professional Vibe Coding\" class=\"banner-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/640;\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png 2560w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-600x150.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1024x256.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-768x192.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1536x384.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-2048x512.png 2048w\" data-sizes=\"auto\" data-original-sizes=\"(max-width: 2560px) 100vw, 2560px\"> <\/a><\/p><p>The resulting <a href=\"https:\/\/flatlogic.com\/blog\/difference-between-react-and-angular-a-comparison-guide-for-2021\/\">app<\/a> will have the following features out of a box:<\/p><ul class=\"wp-block-list\"><li>Preconfigured authorization and authenticating;<\/li><li>Tables and forms;<\/li><li>Responsive UI of the app;<\/li><li><a href=\"https:\/\/flatlogic.com\/blog\/react-pagination-guide-and-best-react-pagination-libraries\/\">CRUD<\/a> functions;<\/li><li>Full access to the front-end, and back-end code;<\/li><li><a href=\"https:\/\/flatlogic.com\/blog\/what-is-docker-and-why-use-it\/\">Docker<\/a> for deploying to other platforms;<\/li><li>Auto-generated API for each entity documented in Swagger.<\/li><\/ul><h2 class=\"wp-block-heading\">Summing Up<\/h2><p>We have spent a lot of time and effort on improving our Platform. It is a pleasure to create something new for our customers and always be in touch with you. Don&#8217;t waste time, check out our new feature WYSIWYG, and see how rapid and straightforward it is! If you face difficulties, please, feel free to leave us a message on our <a href=\"https:\/\/flatlogic.com\/forum\/\">forum<\/a>, <a href=\"https:\/\/twitter.com\/flatlogic\/\">Twitter<\/a> or <a href=\"https:\/\/www.facebook.com\/flatlogic\">Facebook<\/a>. We will respond to your inquiry as quickly as possible!<\/p>","protected":false},"excerpt":{"rendered":"<p>The Schema Editor of the Flatlogic Platform now supports the ability to add WYSIWYG to your project!<\/p>\n","protected":false},"author":24,"featured_media":12285,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"flatlogic_tldr":"Flatlogic adds WYSIWYG support to the Schema Editor, powered by TinyMCE.\nEnable it at app creation or later in Schema settings via Multiline string fields.\nUse the editor in generated apps when creating or editing entities in the target table.\nFlatlogic apps ship with auth, CRUD, responsive UI, Docker, and Swagger-documented APIs.","flatlogic_facts":[{"text":"Flatlogic Schema Editor now lets you add a WYSIWYG field to your project.","source":""},{"text":"The WYSIWYG editor in Flatlogic Platform is based on TinyMCE.","source":"https:\/\/www.tiny.cloud\/"},{"text":"Enable WYSIWYG during app creation: Step 3 Schema Editor, string field > Multiline > Use WYSIWYG Editor.","source":""},{"text":"Or enable it later in project settings: Schema tab, string field > Multiline > Use WYSIWYG Editor.","source":""},{"text":"Flatlogic generates web app code in minutes based on a database schema.","source":""}],"footnotes":""},"categories":[1,129],"tags":[268,123,441,284],"class_list":["post-12280","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-updates","tag-flatlogic-generator","tag-product-update","tag-flatlogic-platform","tag-platform-updates"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.2 (Yoast SEO v26.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introducing WYSIWYG editor for Flatlogic Platform - Flatlogic Blog<\/title>\n<meta name=\"description\" content=\"The Schema Editor of the Flatlogic Platform now supports the ability to add WYSIWYG to your project!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/flatlogic.com\/blog\/wysiwyg\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing WYSIWYG editor for Flatlogic Platform\" \/>\n<meta property=\"og:description\" content=\"The Schema Editor of the Flatlogic Platform now supports the ability to add WYSIWYG to your project!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flatlogic.com\/blog\/wysiwyg\/\" \/>\n<meta property=\"og:site_name\" content=\"Flatlogic Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/flatlogic\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-08T16:44:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-08T16:44:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-07-at-15.05.45.png\" \/>\n\t<meta property=\"og:image:width\" content=\"926\" \/>\n\t<meta property=\"og:image:height\" content=\"926\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alesia S.\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:site\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alesia S.\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introducing WYSIWYG editor for Flatlogic Platform - Flatlogic Blog","description":"The Schema Editor of the Flatlogic Platform now supports the ability to add WYSIWYG to your project!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/flatlogic.com\/blog\/wysiwyg\/","og_locale":"en_US","og_type":"article","og_title":"Introducing WYSIWYG editor for Flatlogic Platform","og_description":"The Schema Editor of the Flatlogic Platform now supports the ability to add WYSIWYG to your project!","og_url":"https:\/\/flatlogic.com\/blog\/wysiwyg\/","og_site_name":"Flatlogic Blog","article_publisher":"https:\/\/www.facebook.com\/flatlogic","article_published_time":"2022-09-08T16:44:18+00:00","article_modified_time":"2022-09-08T16:44:21+00:00","og_image":[{"width":926,"height":926,"url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-07-at-15.05.45.png","type":"image\/png"}],"author":"Alesia S.","twitter_card":"summary_large_image","twitter_creator":"@flatlogic","twitter_site":"@flatlogic","twitter_misc":{"Written by":"Alesia S.","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/flatlogic.com\/blog\/wysiwyg\/#article","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/wysiwyg\/"},"author":{"name":"Alesia S.","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/4ea8cd13c3b9919c455be1f34183a0c9"},"headline":"Introducing WYSIWYG editor for Flatlogic Platform","datePublished":"2022-09-08T16:44:18+00:00","dateModified":"2022-09-08T16:44:21+00:00","mainEntityOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/wysiwyg\/"},"wordCount":390,"commentCount":0,"publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/wysiwyg\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-07-at-15.05.45.png","keywords":["Flatlogic Generator","Flatlogic Generator Updates","Flatlogic Platform","Platform Updates"],"articleSection":["News","Updates"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/flatlogic.com\/blog\/wysiwyg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/flatlogic.com\/blog\/wysiwyg\/","url":"https:\/\/flatlogic.com\/blog\/wysiwyg\/","name":"Introducing WYSIWYG editor for Flatlogic Platform - Flatlogic Blog","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/wysiwyg\/#primaryimage"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/wysiwyg\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-07-at-15.05.45.png","datePublished":"2022-09-08T16:44:18+00:00","dateModified":"2022-09-08T16:44:21+00:00","description":"The Schema Editor of the Flatlogic Platform now supports the ability to add WYSIWYG to your project!","breadcrumb":{"@id":"https:\/\/flatlogic.com\/blog\/wysiwyg\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flatlogic.com\/blog\/wysiwyg\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/wysiwyg\/#primaryimage","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-07-at-15.05.45.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-07-at-15.05.45.png","width":926,"height":926},{"@type":"BreadcrumbList","@id":"https:\/\/flatlogic.com\/blog\/wysiwyg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/flatlogic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Introducing WYSIWYG editor for Flatlogic Platform"}]},{"@type":"WebSite","@id":"https:\/\/flatlogic.com\/blog\/#website","url":"https:\/\/flatlogic.com\/blog\/","name":"Flatlogic Blog","description":"Vibe-coding, AI Agents, Professional Software Development Services, Case Studies and More","publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"alternateName":"Flatlogic Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flatlogic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/flatlogic.com\/blog\/#organization","name":"Flatlogic","url":"https:\/\/flatlogic.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","width":970,"height":257,"caption":"Flatlogic"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/flatlogic","https:\/\/x.com\/flatlogic","https:\/\/www.instagram.com\/flatlogiccom\/","https:\/\/www.linkedin.com\/company\/flatlogic\/"]},{"@type":"Person","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/4ea8cd13c3b9919c455be1f34183a0c9","name":"Alesia S.","url":"https:\/\/flatlogic.com\/blog\/author\/alesya\/"}]}},"_links":{"self":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/12280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/comments?post=12280"}],"version-history":[{"count":7,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/12280\/revisions"}],"predecessor-version":[{"id":12300,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/12280\/revisions\/12300"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media\/12285"}],"wp:attachment":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media?parent=12280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/categories?post=12280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/tags?post=12280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}