[Skip to Content]

Moving to Summernote WYSIWYG editor on our CMS sys

Published on Sunday 19 August 2018
Categories: Programming and Code |

Summernote editor

Our Atlas CMS system, which we have developed and used for many years as the content management system for our websites and ecommerce shops, first used a WYSIWYG editor called FCKEditor which was released in 2003 and then moved onto CKEditor 4 in 2012 from the same developers.

The developers of the CKEditor released a new version 5 editor this year which is a complete rebuild from scratch but it doesn’t have many of the features which the previous version 4 editor had such as image upload, table management etc.

The latest bug fix releases of CKEditor 4 have also removed some of the functionality which many of our clients use on their websites including the ability to insert pre formatted code snippets and add custom scripts into the editor windows. CKEditor 4 removes this code or reformats it to not appear correctly on the saved pages which has caused a lot of issues and headaches for ourselves and our customers.

As we couldn’t move our CMS to use the new CKEditor 5 due to the missing functionality and version 4 was causing our clients and ourselves problems it was time to find an alternative editor for our CMS systems.

After spending some time looking at various commercial and open source WYSIWYG editors and I found summernote from https://summernote.org  which is based on Bootstrap and jQuery, which we use on our CMS systems and also on the front end of many of our websites.

The summernote editor is more basic than CKEditor but it is a much smaller download for the browser and it displays Bootstrap 4 html in the correct format which is very useful for some of our clients who write their own custom layouts using Bootstrap code.

The editor has a basic insert image icon / dialogue  but it doesn’t have a built in file browser to allow the user to browse already uploaded files or images and insert them into their web pages.

The summernote website has sample code for creating your own plugins but I found a complete example for a PHP based file manager called elFinder which I was able to use as a basis for a new File Manager icon/button and use our existing file browser code which displays files and folders in an iFrame in the old editor.

This asp.net C# file browser allows you to browse a folder on your website (set as /docs/ as default) and will insert an image in your page for .jpg, .png, .gif and .svg files or will create a link for other file types.

The file browser is shown using a Bootstrap 4 Modal dialog.

Requires Bootstrap 4

Requires Font Awesome

Download from https://github.com/briandorey/summernote-c-sharp-file-browser

New file browser icon added

new icon in editor

Installation

To install copy "filebrowser" folder to your summernote plugin directory.

Copy images from /images to /images on your website.

Edit filebrowser.aspx to style sheet locations

<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/fa-regular.min.css">

Edit iframe path on line 58 in summernote-ext-browser.js to the location of filebrowser.aspx if summernote folder not in site root.

To add to your summernote editor you need to include the plugin javascript:

<script src="/summernote/plugin/filebrowser/summernote-ext-browser.js"></script>

Add the filebrowser icon/button to your editor using 'filebrowser'

Below is an example of the editor config which includes the new button.

$(document).ready(function () {
            $('#summernote').summernote({
                height: 500,
                toolbar: [
                    ['style', ['style']],
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['color', ['color']],
                    ['insert', ['picture', 'link', 'video', 'table','filebrowser', 'hr']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['undo', ['undo', 'redo']],
                    ['codeview', ['codeview']],
                ]
            });
        });

File browser popup with folders

file browser

File browser with images and files

file browser with images

The video below shows how the new file browser functions for images and links.

Permalink


0 Comments



Leave a comment