Fork of @kolkov/angular-editor modified for specific needs of our company. Please use the original repo at https://github.com/kolkov/angular-editor
npm install @ndflexcore/angular-editor element,
thus webp images will be used, if possible on the target project.
If you do not plan using webp, use 1.0.80.
Getting Started
$3
Install via [npm][npm] package manager
`bash
npm install @ndflexcore/angular-editor --save
`
$3
Import angular-editor module
`js
import { HttpClientModule} from '@angular/common/http';
import { AngularEditorModule } from '@kolkov/angular-editor';
@NgModule({
imports: [ HttpClientModule, AngularEditorModule ]
})
`
Then in HTML
`html
`
or for usage with reactive forms
`html
`
if you using more than one editor on same page set id property
`html
`
where
`js
import { AngularEditorConfig } from '@ndflexcore/angular-editor';
editorConfig: AngularEditorConfig = {
editable: true,
spellcheck: true,
height: 'auto',
minHeight: '0',
maxHeight: 'auto',
width: 'auto',
minWidth: '0',
translate: 'yes',
enableToolbar: true,
showToolbar: true,
placeholder: 'Enter text here...',
defaultParagraphSeparator: '',
defaultFontName: '',
defaultFontSize: '',
fonts: [
{class: 'arial', name: 'Arial'},
{class: 'times-new-roman', name: 'Times New Roman'},
{class: 'calibri', name: 'Calibri'},
{class: 'comic-sans-ms', name: 'Comic Sans MS'}
],
customClasses: [
{
name: 'quote',
class: 'quote',
},
{
name: 'redText',
class: 'redText'
},
{
name: 'titleText',
class: 'titleText',
tag: 'h1',
},
],
uploadUrl: 'v1/image',
uploadWithCredentials: false,
sanitize: true,
toolbarPosition: 'top',
language: 'cs',
imageServerUrl: '',
imageType: 'preview',
presetWidth: 98,
presetHeight: 98,
toolbarHiddenButtons: [
['bold', 'italic'],
['fontSize']
]
};
`
For ngModel to work, you must import FormsModule from @angular/forms, or for formControlName, you must import ReactiveFormsModule from @angular/forms
API
$3
| Input | Type | Default | Required | Description |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| id | string | - | no | Id property when multiple editor used on same page |
| [config] | AngularEditorConfig | default config | no | config for the editor |
| placeholder | string | - | no | Set custom placeholder for input area |
| tabIndex | number | - | no | Set Set tabindex on angular-editor |
| ftpLink | DirectoryChild | - | no | The ftpLink (either Image or Generic File) from external browser component |
$3
| Output | Description |
| ------------- | ------------- |
| (html) | Output html |
| (viewMode) | Fired when switched visual and html source mode |
| (blur) | Fired when editor blur |
| (focus) | Fired when editor focus |
| (ftpNeeded) | Fired when 'Insert Image/File from FTP' toolbar button is clicked
$3
Name | Description |
| ------------- | ------------- |
| focus | Focuses the editor element |
$3
Name | Type | Description |
| ------------- | ------------- | ------------- |
| AngularEditorConfig | configuration | Configuration for the AngularEditor component.|
$3
| Input | Type | Default | Required | Description |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| editable | bolean | true | no | Set editing enabled or not |
| spellcheck | bolean | true | no | Set spellchecking enabled or not |
| translate | sting | yes | no | Set translating enabled or not |
| sanitize | bolean | true | no | Set DOM sanitizing enabled or not |
| height | string | auto | no | Set height of the editor |
| minHeight | string | 0 | no | Set minimum height of the editor |
| maxHeight | string | auto | no | Set maximum height of the editor |
| width | string | auto | no | Set width of the editor |
| minWidth | string | 0 | no | Set minimum width of the editor |
| enableToolbar | bolean | true | no | Set toolbar enabled or not |
| showToolbar | bolean | true | no | Set toolbar visible or not |
| toolbarPosition | string | top | no | Set toolbar position top or bottom |
| placeholder | string | - | no | Set placeholder text |
| defaultParagraphSeparator | string | - | no | Set default paragraph separator such as p |
| defaultFontName | string | - | no | Set default font such as Comic Sans MS |
| defaultFontSize | string | - | no | Set default font size such as 1 - 7 |
| uploadUrl | string | - | no | Set image upload endpoint https://api.exapple.com/v1/image/upload |
| uploadWithCredentials | bolean | false | no | Set passing or not credentials in the image upload call |
| fonts | Font[] | - | no | Set array of available fonts [{name, class},...] |
| customClasses | CustomClass[] | - | no | Set array of available fonts [{name, class, tag},...] |
| outline | bolean | true | no | Set outline of the editor if in focus |
| toolbarHiddenButtons | string[][] | - | no | Set of the array of button names or elements to hide |
| language | 'cs' | 'en' | cs | yes | The language of the editor tooltips |
string | - | yes | The URL of the Image Server |
string | preview | yes | The Image Type |
number | 98 | yes | The preset width of the image, used when user does not enter one |
number | 98 | yes | The preset height of the image, used when user does not enter one |
js
toolbarHiddenButtons: [
[
'undo',
'redo',
'bold',
'italic',
'underline',
'strikeThrough',
'subscript',
'superscript',
'justifyLeft',
'justifyCenter',
'justifyRight',
'justifyFull',
'indent',
'outdent',
'insertUnorderedList',
'insertOrderedList',
'heading',
'fontName'
],
[
'fontSize',
'textColor',
'backgroundColor',
'customClasses',
'link',
'unlink',
'insertImage',
'insertVideo',
'insertHorizontalRule',
'removeFormat',
'toggleEditorMode'
]
]
`
What's included
Within the download you'll find the following directories and files. You'll see something like this:
`
angular-editor/
└── projects/
├── angular-editor/
└── angular-editor-app/
`
angular-editor/ - library
angular-editor-app/` - demo application