ng-wig

2018-08-20 admin

ng-wig是什么

什么是ng-wig,Small AngularJS WYSIWYG editor component

ng-wig介绍、ng-wig使用

Dependencies

it’s only AngularJS! No jQuery or other WYSIWYG monsters

  • ng-wig2+ - Angular1.3+
  • ng-wig3+ - Angular1.5+

Also suports latest Angular1.6

Usage

angular.module('yourApp', ['ngWig'])

it’s just attribute directive for textarea:

<ng-wig ng-model="text1"></ng-wig>

Sanitization

Important: ngWig is light weight solution that does not include sanitization module. So it’s your own responsiblity to be sure that contecnt that you placed there is already checked and does not have any possible injections. Credits to @MacJu for highlighting the issue.

Installation

ngWig could be simply installed via npm:

npm install ng-wig

or via bower:

bower install ng-wig

CDN

https://cdnjs.cloudflare.com/ajax/libs/ng-wig/3.0.14/ng-wig.min.js

https://cdnjs.cloudflare.com/ajax/libs/ng-wig/3.0.14/ng-wig.js

https://cdnjs.cloudflare.com/ajax/libs/ng-wig/3.0.14/css/ng-wig.css

Always last version CDN

https://cdn.rawgit.com/stevermeister/ngWig/master/dist/ng-wig.min.js

https://cdn.rawgit.com/stevermeister/ngWig/master/dist/ng-wig.js

https://cdn.rawgit.com/stevermeister/ngWig/master/dist/css/ng-wig.css

[Demo] (http://stevermeister.github.io/ngWig/demo/)

![Screenshot] (http://stevermeister.github.io/ngWig/images/ng-wig-demo.png)

Examples

<ng-wig ng-model="text1"></ng-wig>

<ng-wig ng-model="text1" ng-disabled="true"></ng-wig>

Edit Source option (plunker)

<ng-wig ng-model="text1" source-mode-allowed></ng-wig>

<ng-wig ng-model="text1" placeholder="'Enter instructions here.'"></ng-wig>

ngModel sync (plunker)

<ng-wig ng-model="text1"></ng-wig>
<ng-wig ng-model="text1"></ng-wig>

<ng-wig ng-model="text1" buttons="formats, bold, italic"></ng-wig>

Setup generic buttons (plunker)

.config(['ngWigToolbarProvider', function(ngWigToolbarProvider) {
  ngWigToolbarProvider.setButtons(['bold', 'italic']);
}]);

Add standard buttons (plunker)

.config(['ngWigToolbarProvider', function(ngWigToolbarProvider) {
  ngWigToolbarProvider.addStandardButton('underline', 'Underline', 'underline', 'fa-underline');
}]);

Add custom button (plugin) (plunker)

  • Javascript:

      angular.module('ngWig').config(['ngWigToolbarProvider', function(ngWigToolbarProvider) {
          ngWigToolbarProvider.addCustomButton('my-custom', 'nw-my-custom-button');
      }])
      .component('nwMyCustomButton', {
          template: '<button class="nw-button my-custom" title="My Custom Button" ng-click="$ctrl.click()">My Custom Button</button>',
          controller: function() {
              this.click = function(){
                  alert('My Custom Button');
              };
          }
      });
    
    
  • CSS:

      .nw-button.my-custom:before {
          content: '\f1b3';
      }
    
    

OnPaste Hook (plunker)

    <ng-wig ng-model="text1" on-paste="onPaste($event, pasteContent)"></ng-wig>

Formats (plugin) (plunker)

    <ng-wig ng-model="text1" buttons="formats"></ng-wig>

Forecolor (plugin) (plunker)

    <ng-wig ng-model="text1" buttons="forecolor"></ng-wig>

Clear Styles (plugin) (plunker)

    <ng-wig ng-model="text1" buttons="clear-styles"></ng-wig>

Contribution (Development Setup)

npm install
npm run devSetup

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-38470.html

文章标题:ng-wig

回到顶部