ngx-editor-plus
Version:
WYSIWYG Editor for Angular Applications
391 lines (320 loc) • 18.8 kB
HTML
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>NgxEditor</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top visible-xs">
<a href="./" class="navbar-brand">NgxEditor</a>
<button type="button" class="btn btn-default btn-menu fa fa-bars" id="btn-menu"></button>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search">
</div>
<nav>
<ul class="list">
<li class="title">
<a href="./index.html">NgxEditor</a>
</li>
<li class="divider"></li>
<li class="chapter">
<a data-type="chapter-link" href="./index.html"><span class="fa fa-home"></span>Getting started</a>
<ul class="links">
<li class="link">
<a
href="./overview.html"
href="./overview.html"
>
<span class="fa fa-th"></span>Overview
</a>
</li>
<li class="link">
<a href="./index.html" class="active" ><span class="fa fa-file-text-o"></span>README</a>
</li>
<li class="link">
<a href="./license.html"
>
<span class="fa fa-file-text-o"></span>LICENSE
</a>
</li>
</ul>
</li>
<li class="chapter">
<a data-type="chapter-link" href="./modules.html" >
<div class="menu-toggler linked" data-toggle="collapse"
data-target="#xs-modules-links"
>
<span class="fa fa-archive"></span>
<span class="link-name">Modules</span>
<span class="fa fa-angle-down"></span>
</div>
</a>
<ul class="links collapse "
id="xs-modules-links"
>
<li class="link">
<a href="./modules/NgxEditorModule.html" >NgxEditorModule</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-components-links"
>
<span class="fa fa-cogs"></span>
<span>Components</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-components-links"
>
<li class="link">
<a href="./components/NgxEditorComponent.html" >NgxEditorComponent</a>
</li>
<li class="link">
<a href="./components/NgxEditorMessageComponent.html" >NgxEditorMessageComponent</a>
</li>
<li class="link">
<a href="./components/NgxEditorToolbarComponent.html" >NgxEditorToolbarComponent</a>
</li>
<li class="link">
<a href="./components/NgxGrippieComponent.html" >NgxGrippieComponent</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-injectables-links"
>
<span class="fa fa-long-arrow-down"></span>
<span>Injectables</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-injectables-links"
>
<li class="link">
<a href="./injectables/CommandExecutorService.html" >CommandExecutorService</a>
</li>
<li class="link">
<a href="./injectables/MessageService.html" >MessageService</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-miscellaneous-links"
>
<span class="fa fa-cubes"></span>
<span>Miscellaneous</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-miscellaneous-links"
>
<li class="link">
<a href="./miscellaneous/functions.html" data-type="entity-link" >Functions</a>
</li>
<li class="link">
<a href="./miscellaneous/variables.html" data-type="entity-link" >Variables</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="hidden-xs menu">
<nav>
<ul class="list">
<li class="title">
<a href="./index.html">NgxEditor</a>
</li>
<li class="divider"></li>
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search">
</div>
<li class="chapter">
<a data-type="chapter-link" href="./index.html"><span class="fa fa-home"></span>Getting started</a>
<ul class="links">
<li class="link">
<a
href="./overview.html"
href="./overview.html"
>
<span class="fa fa-th"></span>Overview
</a>
</li>
<li class="link">
<a href="./index.html" class="active" ><span class="fa fa-file-text-o"></span>README</a>
</li>
<li class="link">
<a href="./license.html"
>
<span class="fa fa-file-text-o"></span>LICENSE
</a>
</li>
</ul>
</li>
<li class="chapter">
<a data-type="chapter-link" href="./modules.html" >
<div class="menu-toggler linked" data-toggle="collapse"
data-target="#modules-links"
>
<span class="fa fa-archive"></span>
<span class="link-name">Modules</span>
<span class="fa fa-angle-down"></span>
</div>
</a>
<ul class="links collapse "
id="modules-links"
>
<li class="link">
<a href="./modules/NgxEditorModule.html" >NgxEditorModule</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#components-links"
>
<span class="fa fa-cogs"></span>
<span>Components</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="components-links"
>
<li class="link">
<a href="./components/NgxEditorComponent.html" >NgxEditorComponent</a>
</li>
<li class="link">
<a href="./components/NgxEditorMessageComponent.html" >NgxEditorMessageComponent</a>
</li>
<li class="link">
<a href="./components/NgxEditorToolbarComponent.html" >NgxEditorToolbarComponent</a>
</li>
<li class="link">
<a href="./components/NgxGrippieComponent.html" >NgxGrippieComponent</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#injectables-links"
>
<span class="fa fa-long-arrow-down"></span>
<span>Injectables</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="injectables-links"
>
<li class="link">
<a href="./injectables/CommandExecutorService.html" >CommandExecutorService</a>
</li>
<li class="link">
<a href="./injectables/MessageService.html" >MessageService</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#miscellaneous-links"
>
<span class="fa fa-cubes"></span>
<span>Miscellaneous</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="miscellaneous-links"
>
<li class="link">
<a href="./miscellaneous/functions.html" data-type="entity-link" >Functions</a>
</li>
<li class="link">
<a href="./miscellaneous/variables.html" data-type="entity-link" >Variables</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="content getting-started">
<div class="content-data">
<h1 id="ngxeditor">NgxEditor</h1>
<p align="center">
<a href="https://github.com/Sibiraj-S/ngx-editor">
<img src="https://raw.githubusercontent.com/Sibiraj-S/ngx-editor/master/src/assets/icons/ngx-editor.png" alt="ngxEditor">
</a>
</p>
<p align="center">A Simple WYSIWYG Editor for Angular2+ Applications.</p>
<p align="center">
<a href="https://travis-ci.org/Sibiraj-S/ngx-editor">
<img alt="Build Status" src="https://travis-ci.org/Sibiraj-S/ngx-editor.svg?branch=master">
</a>
<a href="https://www.npmjs.com/package/ngx-editor">
<img alt="npm version" src="https://img.shields.io/npm/v/ngx-editor.svg">
</a>
<a href="https://www.npmjs.com/package/ngx-editor">
<img alt="npm" src="https://img.shields.io/npm/dm/ngx-editor.svg">
</a>
<a href="https://github.com/Sibiraj-S/ngx-editor/blob/master/LICENSE">
<img alt="licence" src="https://img.shields.io/npm/l/ngx-editor.svg">
</a>
</p>
<h2 id="getting-started">Getting Started</h2>
<h3 id="installation">Installation</h3>
<p>Install via Package managers such as <a href="https://www.npmjs.com/">npm</a> or <a href="https://yarnpkg.com/lang/en/">yarn</a></p>
<pre class="line-numbers"><code class="language-bash">npm install ngx-editor --save
# or
yarn add ngx-editor</code></pre><h3 id="usage">Usage</h3>
<p>Import <code>ngx-editor</code> module</p>
<pre class="line-numbers"><code class="language-typescript">import { NgxEditorModule } from 'ngx-editor';
@NgModule({
imports: [ NgxEditorModule ]
})</code></pre><p>Import <a href="https://github.com/FortAwesome/Font-Awesome">font-awesome</a> into your application</p>
<p>Then in HTML</p>
<pre class="line-numbers"><code class="language-html"><app-ngx-editor [placeholder]="'Enter text here...'" [spellcheck]="true" [(ngModel)]="htmlContent"></app-ngx-editor></code></pre><p>For <code>ngModel</code> to work, You must import <code>FormsModule</code> from <code>@angular/forms</code></p>
<h3 id="demo">Demo</h3>
<p>Demo at stackblitz <a href="https://ngx-editor.stackblitz.io/">ngx-editor</a></p>
<h3 id="documentation">Documentation</h3>
<p>Documentation is auto-generated using <a href="https://compodoc.github.io/website/">compodoc</a>, and can be viewed here: <a href="https://sibiraj-s.github.io/ngx-editor/">https://sibiraj-s.github.io/ngx-editor/</a></p>
<p>Wiki <a href="https://github.com/Sibiraj-S/ngx-editor/wiki/ngxEditor">here</a></p>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
<script src="./js/libs/bootstrap-native.js"></script>
<script src="./js/libs/es6-shim.min.js"></script>
<script src="./js/libs/EventDispatcher.js"></script>
<script src="./js/libs/promise.min.js"></script>
<script src="./js/libs/zepto.min.js"></script>
<script src="./js/compodoc.js"></script>
<script>var COMPODOC_CURRENT_PAGE_DEPTH = 0;</script>
<script src="./js/search/search.js"></script>
<script src="./js/search/lunr.min.js"></script>
<script src="./js/search/search-lunr.js"></script>
<script src="./js/tabs.js"></script>
<script src="./js/menu.js"></script>
<script src="./js/libs/prism.js"></script>
<script src="./js/sourceCode.js"></script>
<script src="./js/search/search_index.js"></script>
</body>
</html>