bn-wysiwyg
This Blognode project allows to add a What You See Is What You Get editor to any angular application.
Beta note: We just stated development. We focus on get it working in Chrome and have not tested it in other browser. Support for FF, Edge and Safarie are planed.
Installation
npm install bn-wysiwyg --save
Add it to your main app module:
import { BnWysiwygModule } from 'bn-wysiwyg';
@NgModule({
imports: [BnWysiwygModule]
})
And use it in your Application:
<bn-wysiwyg></bn-wysiwyg>
Configuration
The configuration is based on basic html attributes and tags you can add to your project to change the behavior.
Non inline browser
By default the Wysiwyg editor is an inline editor. If you like to use an editor panel instead you need to disable the inline mode. Afterwards you can place the editor component anywhere on the page.
<!-- anywhere else -->
Toggle edit mode
By default the bn-wysiwyg
element is editable. You can disable this by setting the editable attribute.
Asigne editor panel
The editor panel is assigned to all <bn-wysiwyg>
on the page. To assign it to a specific one, you need to assign
it via the for
attribute. It accepts any valid query selector.
<!-- anywhere else -->
Restrict commands
You can restrict commands by adding the commands
attribute to the <bn-editor>
:
<!-- this editor will just show a redo & undo command -->
Possible values are comma seperated: bn-format, bn-align, bn-bold, bn-italic, bn-redo, bn-undo, bn-strikethrough, bn-underline, bn-link, bn-link-menu, bn-image, bn-image-menu.