← Go Back
RadioDJ Wiki
Understanding the Summernote editor

Summernote Editor

This wiki uses Summernote as its WYSIWYG editor. Summernote is a lightweight, flexible and user‑friendly HTML editor that allows you to edit wiki pages visually — without needing to write HTML manually.

What is Summernote?

Summernote is a browser‑based text editor that turns a simple <textarea> into a full visual editor. It allows you to format text, insert images, create lists, add code blocks and more.

  • WYSIWYG (What You See Is What You Get)
  • Built on jQuery
  • Lightweight and fast
  • Fully customizable toolbar
  • Outputs clean HTML

How the Editor Works

When you open a wiki page in edit mode, Summernote replaces the textarea with a visual editor. Everything you type or format is automatically converted into HTML behind the scenes.

  • Bold, italic, underline
  • Headings and paragraphs
  • Lists and tables
  • Links and images
  • Code blocks and special characters

Saving Your Content

When you click Save, the HTML generated by Summernote is stored in the corresponding JSON file of the wiki. The next time you open the page, the HTML is rendered exactly as you created it.

Summernote does not store formatting separately — everything is saved as HTML.

Custom Buttons in This Wiki

This wiki uses several custom Summernote plugins to make editing easier:

  • codeButton — inserts clean HTML code blocks
  • fieldsetButton — adds styled fieldsets for structured content
  • specialchar — inserts special characters

These plugins are fully integrated into the toolbar and follow the same neon‑dark style.

HTML Output

Summernote generates clean, readable HTML. This wiki accepts all standard HTML elements, including:

  • <h1> to <h6>
  • <p> paragraphs
  • <ul> and <ol> lists
  • <pre> and <code> blocks
  • <img> images
  • <table> tables

The editor prevents broken HTML and ensures the output is safe and consistent.

Why This Wiki Uses Summernote

Summernote was chosen because it fits perfectly with the goals of this wiki:

  • Easy for beginners
  • Powerful enough for advanced users
  • Customizable toolbar for wiki‑specific tools
  • Clean integration with JSON‑based storage
  • Fast loading and lightweight