stoick001 / panagram.js

2kb Vanilla JavaScript rich text editor, that you can fully customize

Panagram.js

Panagram.js is an extra small (2kb) rich text editor build in pure JavaScript, with no dependencies.

Live Demo: https://panagram.herokuapp.com/

Setup

Enabling Panagram.js is very easy, you just need to follow these two simple steps:

include it from a dist/ folder

  <script src="dist/Panagram.min.js"></script>

or

nmp install --save panagram

initialize Panagram.js with init()

Panagram.init({
   // one of the pre built controls, required
  controls: 'defaultControls',

  // <HTMLElement> in which you want to put controls, required
  ctrElement: document.getElementById('controls'),

  // <HTMLElement> for rich text output, required
  outElement: document.getElementById('output'),
});

Custom controls

You can add your custom controls in config.js file. You can add to an existing set or create your own. If you do create your own share it so that other people can use it.

Quick rundown or different properties:

1. icon - this is how you choose to represent your control
2. title - is an as it name says a title
3. state - is used if a command is in a list of possible commands and does not need any additional data
4. formatBlock - is used if a command is not in a list of possible commands
5. extra - is used if a command is in a list of possible commands and does need additional data. Extra MUST return that additional data
6. short - used for toggling active class on element with keyboard shortcuts

panagram.js's Issues

Bold Control Button Desync's with keypress commands

Browser: Chrome 65

When typing in the text editor and attempting to make text bold using the Ctrl+b command the bold control does not set to active despite the WYSIWYG now setting text to bold.

Toolbar is not responsive

Hi
When browser window is resized the icons go out of editor
can you fix this please

Keyboard shortcuts bring up browser panels/windows

Awesome editor! I hope I can contribute to it one day when I start learning js.

Concerning the issue. When I press the shortcut Ctrl+B then bold is toggled but bookmark side panel is also activated. Same happens with Ctrl+I, which brings up page info, Ctrl+U opens page source.

Changes could be made to prevent the browser from activating those shortcuts when the editor is in focus.