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.

<bn-wysiwyg [inline]="false"></bn-wysiwyg>
<!-- anywhere else -->
<bn-editor></bn-editor>

Toggle edit mode

By default the bn-wysiwyg element is editable. You can disable this by setting the editable attribute.

<bn-wysiwyg [editable]="false"></bn-wysiwyg>

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.

<bn-wysiwyg class="example" [inline]="false"></bn-wysiwyg>
<!-- anywhere else -->
<bn-editor for=".example"></bn-editor>

Restrict commands

You can restrict commands by adding the commands attribute to the <bn-editor>:

<!-- this editor will just show a redo & undo command -->
<bn-editor commands="bn-redo,bn-undo">
</bn-editor>

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.