Improve Your Content Editing Experience in 5 Minutes

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.

5 Steps To Improve The Editing Experience

Default WYSIWYG Styles

Step #1: Create a theme reference CSS file

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.

Step #2: Upload to Our Server

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.

Step #3: Sync the /Portals/0 Directory

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.

Click Sync > Sync This Folder for DNN to discover the image.

Step #4: Update the CKEditor Provider

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.

Updating the CKEditor Provider to load our custom CSS.

Step #5: Reviewing Our Changes

After a quick page refresh, we can now return to our WYSIWYG editor and view the changes.

With our Custom CSS applied, the editing experience now matches what the end-user sees.

Things to Consider

This implementation shown is considered site-wide. The CKEditor allows you to define your changes at the site, page, or module level. In many instances, site-wide will do the trick. If your styling within your WYSIWYG editors varies based on the module, you may consider customizing this further for specificity.
Defining appropriate fonts, colors, spacing, and styling for things like bold, italics, and links can significantly improve the content creation process. When using a WYSIWYG editor, we want to reduce or prevent editors from adding custom inline style where possible.

Where We Use This Most

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

The Learning Lab