当前位置：首页 > 软件库 > 应用工具 > 文档/文本编辑 >

angular-editor

授权协议 MIT License

开发语言 C/C++

所属分类应用工具、文档/文本编辑

软件类型开源软件

地区不详

投递者扶开诚

操作系统跨平台

开源组织无

适用人群未知

软件概览

AngularEditor

A simple native WYSIWYG/Rich Text editor for Angular 6-12+

Demo

demo | See the code in StackBlitz.

Getting Started

Installation

Install via npm package manager

npm install @kolkov/angular-editor --save

Versions

1.0.0 and above - for Angular v8.x.x and above

0.18.4 and above - for Angular v7.x.x

0.15.x - for Angular v6.x.x

Usage

Import angular-editor module

import { HttpClientModule} from '@angular/common/http';
import { AngularEditorModule } from '@kolkov/angular-editor';

@NgModule({
  imports: [ HttpClientModule, AngularEditorModule ]
})

Then in HTML

<angular-editor [placeholder]="'Enter text here...'" [(ngModel)]="htmlContent"></angular-editor>

or for usage with reactive forms

<angular-editor formControlName="htmlContent" [config]="editorConfig"></angular-editor>

if you using more than one editor on same page set id property

<angular-editor id="editor1" formControlName="htmlContent1" [config]="editorConfig"></angular-editor>
<angular-editor id="editor2" formControlName="htmlContent2" [config]="editorConfig"></angular-editor>

where

import { AngularEditorConfig } from '@kolkov/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',
    upload: (file: File) => { ... }
    uploadWithCredentials: false,
    sanitize: true,
    toolbarPosition: 'top',
    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

Inputs

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

Outputs

Output	Description
(html)	Output html
(viewMode)	Fired when switched visual and html source mode
(blur)	Fired when editor blur
(focus)	Fired when editor focus

Methods

Name	Description
focus	Focuses the editor element

Other

Name	Type	Description
AngularEditorConfig	configuration	Configuration for the AngularEditor component.

Configuration

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` and return response with imageUrl key. {"imageUrl" : }
upload	`function`	`-`	no	Set image upload function
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

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

Documentation

The documentation for the AngularEditor is hosted at our website AngularEditor

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at http://editorconfig.org.

Versioning

For a transparency into our release cycle and in striving to maintain backward compatibility, AngularEditor is maintained under the Semantic Versioning guidelines.

See the Releases section of our project for changelogs for each release version.

Creators

Andrey Kolkov

https://github.com/kolkov

Donate

If you like my work and I save your time you can buy me a �� or ��

使用案例

angular整合editor.md

下载editor的文件进入官网进行下载https://pandao.github.io/editor.md/,解压后放入assets目录下全局加载editormd资源文件全局加载js文件在angular.json中引入editormd.min.js,在引入editormd.min.js文件前需要先引入jQuery 安装jQuery npm install jquery --save 在s
Angular 英雄编辑器

应用程序现在有了基本的标题。接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。创建英雄组件使用 Angular CLI 创建一个名为 heroes 的新组件。 ng generate component heroes CLI 创建了一个新的文件夹， src/app/heroes/，并生成了 HeroesComponent 的 4 个文件。 HeroesCompon
angular7+editor.md

1.下载editor.md源文件 https://pandao.github.io/editor.md/#download 2.将下载的源文件放在项目某目录下：例如：src/assets/editor.md/ 3.在angular.json文件中，将所需要引入的css、js文件添加进来 "styles": [ "src/assets/editor.md/css/ed
Angular6 + Editor.md markdown Directive指令实现

Angular6 + Editor.md angular markdown directive指令方法想要在angular中使用Markdown编辑器,怪我太笨,搞了三天才算有了自己想要的结果,主要是使用了Editor.md,其中碰到了一些坑,觉得有必要记录一下.有两种方法,一种是editor.md作为指令Directive进行构建,还有一种是使用自定义表单集成Editor.md.(方法)…比较
ngx-monaco-editor初用（angular2及以上）

monaco-editor是一款优秀的在线编辑器，能够智能提示多种开发语言、脚本语言，还能做文本比较... 项目GitHub：https://github.com/atularen/ngx-monaco-editor 本人node等版本： Angular CLI: 6.2.9 Node: 8.12.0 OS: win32 x64 Angular: 6.1.10 一、安装： npm instal
ng2-ace-editor 在 angular 12+ 高版本中无法经过 Ivy编译问题

在低版本的 angular 例如 angular7 中使用 ng2-ace-editor 包，当项目的 angular 升级到高版本例如 angular 12 版本，由于 ng2-ace-editor 不兼容 angular 12，经过 lvy 编译时就会报错，可以将 ng2-ace-editor 包替换成 ng12-ace-editor 包即可，npm 地址：ng12-ace-editor -