ngx-editor-sodo
Version:
WYSIWYG Editor for Angular Applications
738 lines (624 loc) • 31.7 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" data-type="index-link">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"
data-type="chapter-link">
<span class="fa fa-fw fa-th"></span>Overview
</a>
</li>
<li class="link">
<a href="index.html" data-type="chapter-link"><span class="fa fa-file-text-o"></span>README</a>
</li>
<li class="link">
<a href="license.html"
data-type="chapter-link">
<span class="fa fa-fw fa-file-text-o"></span>LICENSE
</a>
</li>
<li class="link">
<a href="dependencies.html"
data-type="chapter-link">
<span class="fa fa-fw fa-list"></span>Dependencies
</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-additional-pages"
>
<span class="fa fa-fw fa-book"></span>
<span>Wiki</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse"
id="xs-additional-pages"
>
<li class="link ">
<a href="additional-documentation/prerequisites.html" data-type="entity-link" data-context-id="additional">Prerequisites</a>
</li>
<li class="link ">
<a href="additional-documentation/configuration.html" data-type="entity-link" data-context-id="additional">Configuration</a>
</li>
<li class="link ">
<a href="additional-documentation/toolbar.html" data-type="entity-link" data-context-id="additional">Toolbar</a>
</li>
<li class="link ">
<a href="additional-documentation/font-size.html" data-type="entity-link" data-context-id="additional">Font Size</a>
</li>
<li class="link ">
<a href="additional-documentation/colors.html" data-type="entity-link" data-context-id="additional">Colors</a>
</li>
<li class="link ">
<a href="additional-documentation/image-uploader.html" data-type="entity-link" data-context-id="additional">Image Uploader</a>
</li>
<li class="link ">
<a href="additional-documentation/insert-video.html" data-type="entity-link" data-context-id="additional">Insert Video</a>
</li>
<li class="link ">
<a href="additional-documentation/resizer.html" data-type="entity-link" data-context-id="additional">Resizer</a>
</li>
<li class="link ">
<a href="additional-documentation/errors.html" data-type="entity-link" data-context-id="additional">Errors</a>
</li>
</ul>
</li>
<li class="chapter modules">
<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-fw 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" data-type="entity-link">NgxEditorModule</a>
<li class="chapter inner">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-components-links-module-NgxEditorModule-839ea65a-ab8c-410e-bac6-f433ae77f0e2"
>
<span class="fa fa-fw fa-cogs"></span>
<span>Components</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse"
id="xs-components-links-module-NgxEditorModule-839ea65a-ab8c-410e-bac6-f433ae77f0e2"
>
<li class="link">
<a href="components/NgxEditorComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules">NgxEditorComponent</a>
</li>
<li class="link">
<a href="components/NgxGrippieComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules">NgxGrippieComponent</a>
</li>
<li class="link">
<a href="components/NgxEditorMessageComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules">NgxEditorMessageComponent</a>
</li>
<li class="link">
<a href="components/NgxEditorToolbarComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules">NgxEditorToolbarComponent</a>
</li>
</ul>
</li>
<li class="chapter inner">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-injectables-links-module-NgxEditorModule-839ea65a-ab8c-410e-bac6-f433ae77f0e2"
>
<span class="fa fa-fw fa-long-arrow-down"></span>
<span>Injectables</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse"
id="xs-injectables-links-module-NgxEditorModule-839ea65a-ab8c-410e-bac6-f433ae77f0e2"
>
<li class="link">
<a href="injectables/CommandExecutorService.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules"}>CommandExecutorService</a>
</li>
<li class="link">
<a href="injectables/MessageService.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules"}>MessageService</a>
</li>
</ul>
</li>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-injectables-links"
>
<span class="fa fa-fw 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" data-type="entity-link">CommandExecutorService</a>
</li>
<li class="link">
<a href="injectables/MessageService.html" data-type="entity-link">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-fw 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" data-type="index-link">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"
data-type="chapter-link">
<span class="fa fa-fw fa-th"></span>Overview
</a>
</li>
<li class="link">
<a href="index.html" data-type="chapter-link"><span class="fa fa-file-text-o"></span>README</a>
</li>
<li class="link">
<a href="license.html"
data-type="chapter-link">
<span class="fa fa-fw fa-file-text-o"></span>LICENSE
</a>
</li>
<li class="link">
<a href="dependencies.html"
data-type="chapter-link">
<span class="fa fa-fw fa-list"></span>Dependencies
</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#additional-pages"
>
<span class="fa fa-fw fa-book"></span>
<span>Wiki</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse"
id="additional-pages"
>
<li class="link ">
<a href="additional-documentation/prerequisites.html" data-type="entity-link" data-context-id="additional">Prerequisites</a>
</li>
<li class="link ">
<a href="additional-documentation/configuration.html" data-type="entity-link" data-context-id="additional">Configuration</a>
</li>
<li class="link ">
<a href="additional-documentation/toolbar.html" data-type="entity-link" data-context-id="additional">Toolbar</a>
</li>
<li class="link ">
<a href="additional-documentation/font-size.html" data-type="entity-link" data-context-id="additional">Font Size</a>
</li>
<li class="link ">
<a href="additional-documentation/colors.html" data-type="entity-link" data-context-id="additional">Colors</a>
</li>
<li class="link ">
<a href="additional-documentation/image-uploader.html" data-type="entity-link" data-context-id="additional">Image Uploader</a>
</li>
<li class="link ">
<a href="additional-documentation/insert-video.html" data-type="entity-link" data-context-id="additional">Insert Video</a>
</li>
<li class="link ">
<a href="additional-documentation/resizer.html" data-type="entity-link" data-context-id="additional">Resizer</a>
</li>
<li class="link ">
<a href="additional-documentation/errors.html" data-type="entity-link" data-context-id="additional">Errors</a>
</li>
</ul>
</li>
<li class="chapter modules">
<a data-type="chapter-link" href="modules.html">
<div class="menu-toggler linked" data-toggle="collapse"
data-target="#modules-links"
>
<span class="fa fa-fw 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" data-type="entity-link">NgxEditorModule</a>
<li class="chapter inner">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#components-links-module-NgxEditorModule-839ea65a-ab8c-410e-bac6-f433ae77f0e2"
>
<span class="fa fa-fw fa-cogs"></span>
<span>Components</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse"
id="components-links-module-NgxEditorModule-839ea65a-ab8c-410e-bac6-f433ae77f0e2"
>
<li class="link">
<a href="components/NgxEditorComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules">NgxEditorComponent</a>
</li>
<li class="link">
<a href="components/NgxGrippieComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules">NgxGrippieComponent</a>
</li>
<li class="link">
<a href="components/NgxEditorMessageComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules">NgxEditorMessageComponent</a>
</li>
<li class="link">
<a href="components/NgxEditorToolbarComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules">NgxEditorToolbarComponent</a>
</li>
</ul>
</li>
<li class="chapter inner">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#injectables-links-module-NgxEditorModule-839ea65a-ab8c-410e-bac6-f433ae77f0e2"
>
<span class="fa fa-fw fa-long-arrow-down"></span>
<span>Injectables</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse"
id="injectables-links-module-NgxEditorModule-839ea65a-ab8c-410e-bac6-f433ae77f0e2"
>
<li class="link">
<a href="injectables/CommandExecutorService.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules"}>CommandExecutorService</a>
</li>
<li class="link">
<a href="injectables/MessageService.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules"}>MessageService</a>
</li>
</ul>
</li>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#injectables-links"
>
<span class="fa fa-fw 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" data-type="entity-link">CommandExecutorService</a>
</li>
<li class="link">
<a href="injectables/MessageService.html" data-type="entity-link">MessageService</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#miscellaneous-links"
>
<span class="fa fa-fw 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>
<!-- START CONTENT -->
<div class="content injectable">
<div class="content-data">
<ol class="breadcrumb">
<li>Injectables</li>
<li>MessageService</li>
</ol>
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#info" id="info-tab" role="tab" data-toggle="tab" data-link="info">Info</a>
</li>
<li>
<a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="c-info">
<p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/app/ngx-editor/common/services/message.service.ts</code>
</p>
<section>
<h3 id="index">Index</h3>
<table class="table table-sm table-bordered index-table">
<tbody>
<tr>
<td class="col-md-4">
<h6><b>Methods</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#getMessage">getMessage</a>
</li>
<li>
<a href="#sendMessage">sendMessage</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="constructor">Constructor</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<code>constructor()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="13" class="link-to-prism">src/app/ngx-editor/common/services/message.service.ts:13</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="methods">
Methods
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getMessage"></a>
<span class="name">
<b>
getMessage
</b>
<a href="#getMessage"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>getMessage()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="18" class="link-to-prism">src/app/ngx-editor/common/services/message.service.ts:18</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>returns the message sent by the editor </p>
</div>
<div class="io-description">
<b>Returns : </b> <code>Observable<string></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="sendMessage"></a>
<span class="name">
<b>
sendMessage
</b>
<a href="#sendMessage"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>sendMessage(message: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="27" class="link-to-prism">src/app/ngx-editor/common/services/message.service.ts:27</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>sends message to the editor</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>message</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</td>
<td>
no
</td>
<td>
<code><p>message to be sent</p>
</code>
</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="tab-pane fade tab-source-code" id="c-source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
/** time in which the message has to be cleared */
const DURATION = 7000;
@Injectable()
export class MessageService {
/** variable to hold the user message */
private message: Subject<string> = new Subject();
constructor() { }
/** returns the message sent by the editor */
getMessage(): Observable<string> {
return this.message.asObservable();
}
/**
* sends message to the editor
*
* @param message message to be sent
*/
sendMessage(message: string): void {
this.message.next(message);
this.clearMessageIn(DURATION);
return;
}
/**
* a short interval to clear message
*
* @param milliseconds time in seconds in which the message has to be cleared
*/
private clearMessageIn(milliseconds: number): void {
setTimeout(() => {
this.message.next(undefined);
}, milliseconds);
return;
}
}
</code></pre>
</div>
</div>
</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>
<!-- END CONTENT -->
</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 = 1;
var COMPODOC_CURRENT_PAGE_URL = 'MessageService.html';
</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>