There will always be a need for WYSIWYG editors; they provide content editors the ability to create large blocks of paragraph-based content with common elements like lists, links, images, blockquotes, and standard formatting like bold, italics, underlines, etc.
The problem most content editors will experience is that the style displayed within the editor will only sometimes display the same to end-users. This can make the content editing process difficult. Instead of relying on proper heading tags and formatting, content editors may start to deviate during their editing process to stylize the page to fit their vision. We want to avoid this and encourage building pages with a proper hierarchy.
In just five minutes, we can improve the content editing process.
The DNN CKEditor provider supports adding a custom CSS file to define styling for the WYSIWYG editor. We will create a wysiwyg-editor.css file that pulls in our DNN Theme/Skin styles to simplify things.
@import url('../_default/skins/10poundgorilla/css/skin.css'); .cke_wysiwyg_frame { padding: 1rem; }
I’ve opted to add a custom cke_editable style to add some padding around the WYSIWYG editor for a cleaner presentation.
We’ll want to place this file within the portal directory we are working in. In this case, we’re uploading it to /Portals/0.
We’ll need to make sure DNN has identified this new file. We can do this by visiting the DNN Asset Manager and syncing the /Portals/0 directory.
Now, we can go to any WYSIWYG Editor using CKEditor and click “Custom Editor Options” to open the properties. Here, we can define the editor's custom CSS file and click save.
After a quick page refresh, we can now return to our WYSIWYG editor and view the changes.
We design and develop resource libraries, blogs, newsrooms, and event calendars for clients. These sections serve as a hub of information for the organization where they can create and publish for their website and end-users. In these instances, the editors need some WYSIWYG editor to create content.
By having an editing experience that reflects what the end user will see, we can simplify the content creation process, improve the quality and SEO of the content, and reduce the number of custom styles being introduced within the website.
Image Credit: Adobe Firefly