DNN Blogs

Written for the Community, by the Community

The DNN Community is made of all kinds of people across the world and is not an organization. As such, any opinions, endorsements, and claims made in the articles and comments here are those of the individual and do not represent the community as a whole.

How to use the new EasyImage upload in DNN's CKEditor

Written By Stefan Kamphuis (40F)

2021-06-25

At the beginning of 2021, 40Fingers contributed a few pull requests for the CKEditorProvider project in DNN. The first (PR #4383) updates the CKEditor used by DNN to version 4.15.1. But the other is probably slightly more interesting for content editors and administrators: that pull request (#4405) gives you the option to provide editors with an easier way to upload images to the website and use them in CKEditor (e.g. the HTML/Text module).

Both of these features have been available since DNN version 9.9.0.

With that option, you can get rid of this Image Properties dialog in the HTML editor:

Default Image Properties dialog

And replace it with a simple click on this button to select a file on your local system, upload it directly to the website, and include it in the text immediately:

This does give you less options too, because you can pretty much only still set the alt text of the image, but that can be seen as an advantage in a lot of use cases:

Configuration

So, how do you start using this shiny new EasyImage plugin in DNN?

Well, it's quite simple. All you need to do, is go into the Custom Editor Options (the link below a CKEditor in DNN) and change the Image Button setting to use Easy Image upload:

Of course, you will still be able to set the default folder the plugin uploads to, and choose which roles are allowed to do so.

So, hopefully this blogpost will be giving this relatively new feature a little bit of love.

Published

2021-06-25

Written By

Stefan Kamphuis (40F)

I've been working as a software developer for over 20 years. Started using DNN when it was still called IBuySpy Workshop. Lead developer at 40Fingers where I'm also one of the founders.

Tags

ckeditor CKEditorProvider

Total: 4 Comment(s)

Michael Tobisch

Thanks a lot for this, Stefan and the 40fingers team! This will make life easier for a lot of DNN users and content editors!

Monday, June 28, 2021 · 3 0 0

Willem

Great solution! Is it also possible to implement a simple resize option...

Wednesday, September 15, 2021 · 0 0 0

Error: Object reference not set to an instance of an object.

In: at DotNetNuke.Modules.Blog.Templating.LazyLoadingUser.GetProperty(String strPropertyName, String strFormat, CultureInfo formatProvider, UserInfo AccessingUser, Scope AccessLevel, Boolean& PropertyNotFound) at DotNetNuke.Modules.Blog.Templating.BaseCustomTokenReplace.replacedTokenValue(String strObjectName, String strPropertyName, String strFormat) at DotNetNuke.Modules.Blog.Templating.BaseTokenReplace.ReplaceTokenMatch(Match m) at System.Text.RegularExpressions.RegexReplacement.Replace(MatchEvaluator evaluator, Regex regex, String input, Int32 count, Int32 startat) at System.Text.RegularExpressions.Regex.Replace(String input, MatchEvaluator evaluator, Int32 count, Int32 startat) at System.Text.RegularExpressions.Regex.Replace(String input, MatchEvaluator evaluator) at DotNetNuke.Modules.Blog.Templating.BaseTokenReplace.ReplaceTokens(String strSourceText) at DotNetNuke.Modules.Blog.Templating.GenericTokenReplace.ReplaceTokens(String strSourceText) at DotNetNuke.Modules.Blog.Templating.Template.ReplaceContents()