angular editor
2.1.0
Простой родной текстовый редактор Wysiwyg/Rich для Angular 6-19+
демо | Смотрите код в Stackblitz.
Установите через диспетчер пакетов NPM
npm install @kolkov/angular-editor --save3.0.0 и выше - для Angular V13 + (удаленные шрифты Awesome Icons Deps + CSS переменные)
2.0.0 и выше - для Angular V13.xx и выше
1.0.0 и выше - для Angular V8.xx и выше
0,18,4 и выше - для Angular V7.xx
0.15.x - для Angular V6.xx
Внимание! alpha и beta -версии могут содержать нарушающие изменения.
Импорт angular-editor
import { HttpClientModule } from '@angular/common/http' ;
import { AngularEditorModule } from '@kolkov/angular-editor' ;
@ NgModule ( {
imports : [ HttpClientModule , AngularEditorModule ]
} )Затем в HTML
< angular-editor [placeholder] =" 'Enter text here...' " [(ngModel)] =" htmlContent " > </ angular-editor >или для использования с реактивными формами
< angular-editor formControlName =" htmlContent " [config] =" editorConfig " > </ angular-editor > Если вы используете более одного редактора на той же странице, установленном id , идентификатором
< angular-editor id =" editor1 " formControlName =" htmlContent1 " [config] =" editorConfig " > </ angular-editor >
< angular-editor id =" editor2 " formControlName =" htmlContent2 " [config] =" editorConfig " > </ angular-editor >где
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' ]
]
} ; Чтобы ngModel работала ReactiveFormsModule вы должны импортировать FormsModule из @angular/forms @angular/forms для formControlName
Чтобы обслуживать файл значков, убедитесь, что ваш angular.json содержит следующую конфигурацию актива:
{
"glob": "**/*",
"input": "node_modules/@kolkov/angular-editor/assets/icons",
"output": "assets/ae-icons/"
}
Подключите файл темы по умолчанию к вашему angular.json или nx.json
"styles": [
"projects/angular-editor-app/src/styles.scss",
"node_modules/@kolkov/angular-editor/themes/default.scss"
],
Или @include или @use в файле вашего проекта styles.scss , а затем переопределите переменные тем по умолчанию, как это:
:root {
--ae-gap : 5 px ;
--ae-text-area-border : 1 px solid #ddd ;
--ae-text-area-border-radius : 0 ;
--ae-focus-outline-color : #afaeae auto 1 px ;
--ae-toolbar-padding : 1 px ;
--ae-toolbar-bg-color : #b3dca0 ;
--ae-toolbar-border-radius : 1 px solid #ddd ;
--ae-button-bg-color : #dadad7 ;
--ae-button-border : 3 px solid #3fb74e ;
--ae-button-radius : 5 px ;
--ae-button-hover-bg-color : #3fb74e ;
--ae-button-active-bg-color : red ;
--ae-button-active-hover-bg-color : blue ;
--ae-button-disabled-bg-color : gray ;
--ae-picker-label-color : rgb ( 78 , 84 , 155 );
--ae-picker-icon-bg-color : rgb ( 34 , 41 , 122 );
--ae-picker-option-bg-color : rgba ( 221 , 221 , 84 , 0.76 );
--ae-picker-option-active-bg-color : rgba ( 237 , 237 , 62 , 0.9 );
--ae-picker-option-focused-bg-color : rgb ( 255 , 255 , 0 );
}Вы можете определить свои пользовательские кнопки с помощью пользовательских действий, используя executeCommandfn. Он принимает команды от ExecCommand. Первым аргументом этого метода является AcommandName, а второй аргумент - AvalueArgument. Пример показывает кнопку, которая добавляет логотип углового редактора в редактор.
< angular-editor id =" editor1 " [(ngModel)] =" htmlContent1 " [config] =" config1 " (ngModelChange) =" onChange($event) "
(blur) =" onBlur($event) " >
< ng-template #customButtons let-executeCommandFn =" executeCommandFn " >
< ae-toolbar-set >
< button aeButton title =" Angular editor logo " (click) =" executeCommandFn('insertHtml', angularEditorLogo) " >
< svg viewBox =" -8 0 272 272 " xmlns =" http://www.w3.org/2000/svg "
preserveAspectRatio =" xMidYMid " fill =" #000000 " >
< g id =" SVGRepo_bgCarrier " stroke-width =" 0 " > </ g >
< g id =" SVGRepo_tracerCarrier " stroke-linecap =" round " stroke-linejoin =" round " > </ g >
< g id =" SVGRepo_iconCarrier " >
< g >
< path
d =" M0.0996108949,45.522179 L125.908171,0.697276265 L255.103502,44.7252918 L234.185214,211.175097 L125.908171,271.140856 L19.3245136,211.971984 L0.0996108949,45.522179 Z "
fill =" #E23237 " > </ path >
< path
d =" M255.103502,44.7252918 L125.908171,0.697276265 L125.908171,271.140856 L234.185214,211.274708 L255.103502,44.7252918 L255.103502,44.7252918 Z "
fill =" #B52E31 " > </ path >
< path
d =" M126.107393,32.27393 L126.107393,32.27393 L47.7136187,206.692607 L76.9992218,206.194553 L92.7377432,166.848249 L126.207004,166.848249 L126.306615,166.848249 L163.063035,166.848249 L180.29572,206.692607 L208.286381,207.190661 L126.107393,32.27393 L126.107393,32.27393 Z M126.306615,88.155642 L152.803113,143.5393 L127.402335,143.5393 L126.107393,143.5393 L102.997665,143.5393 L126.306615,88.155642 L126.306615,88.155642 Z "
fill =" #FFFFFF " > </ path >
</ g >
</ g >
</ svg >
</ button >
</ ae-toolbar-set >
</ ng-template >
</ angular-editor > | Вход | Тип | По умолчанию | Необходимый | Описание |
|---|---|---|---|---|
| идентификатор | string | - | нет | Свойство идентификатора, когда несколько редакторов используются на той же странице |
| [config] | AngularEditorConfig | default config | нет | Конфигурация для редактора |
| заполнитель | string | - | нет | Установите пользовательский заполнитель для области ввода |
| TabIndex | number | - | нет | Установите установить TabIndex на угловом редакторе |
| Выход | Описание |
|---|---|
| (HTML) | Вывод HTML |
| (ViewMode) | Выстрелил при переключении визуального и HTML -режима |
| (размытие) | Уволен, когда редактор размыт |
| (Фокус) | Уволен, когда редактор фокусируется |
| Имя | Описание |
|---|---|
| фокус | Фокусирует элемент редактора |
| Имя | Тип | Описание |
|---|---|---|
| AngulareditorConfig | конфигурация | Конфигурация для компонента AngularEditor. |
| Вход | Тип | По умолчанию | Необходимый | Описание |
|---|---|---|---|---|
| редактируемый | bolean | true | нет | Установите редактирование включено или нет |
| Проверка орфографии | bolean | true | нет | Установите включенную проверку SpellChecking или нет |
| переводить | string | yes | нет | Установить включенный перевод или нет |
| дезинфицировать | bolean | true | нет | Установите DOM Dainitizing включить или нет |
| высота | string | auto | нет | Установить высоту редактора |
| Минхейт | string | 0 | нет | Установите минимальную высоту редактора |
| Максхайт | string | auto | нет | Установите максимальную высоту редактора |
| ширина | string | auto | нет | Установить ширину редактора |
| MinWeidth | string | 0 | нет | Установите минимальную ширину редактора |
| eNableToolbar | bolean | true | нет | Установить панель инструментов включена или нет |
| Showtoolbar | bolean | true | нет | Установить панель инструментов видимой или нет |
| Упадок инструментов | string | top | нет | Установите панель инструментов верхняя или снизу |
| заполнитель | string | - | нет | Установите текст заполнителя |
| DefaultParagraphseParator | string | - | нет | Установить разделитель абзаца по умолчанию, такой как p |
| DefaultFontName | string | - | нет | Установите шрифт по умолчанию, такой как Comic Sans MS |
| defaultfontsize | string | - | нет | Установите размер шрифта по умолчанию, такой как 1 - 7 |
| uploadUrl | string | - | нет | Установите загрузку изображения конечная точка https://api.exapple.com/v1/image/upload и ответный ответ с помощью ключа Imageurl. {"ImageUrl":} |
| загрузить | function | - | нет | Установить функцию загрузки изображения |
| uploadwithcredentials | bolean | false | нет | Установить прохождение или не учетные данные в вызове загрузки изображения |
| шрифты | Font[] | - | нет | Установите массив доступных шрифтов [{name, class},...] |
| Пользовательские классы | CustomClass[] | - | нет | Установите массив доступных шрифтов [{name, class, tag},...] |
| контур | bolean | true | нет | Установите план редактора, если в фокусе |
| Toolbarhiddenbuttons | string[][] | - | нет | Набор массива имен или элементов кнопок, чтобы скрыть |
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'
]
] В рамках загрузки вы найдете следующие каталоги и файлы. Вы увидите что -то вроде этого:
angular-editor/
└── projects/
├── angular-editor/
└── angular-editor-app/
angular-editor/ - Библиотека
angular-editor-app/ -демонстрационное приложение
Документация для AngularEditor размещена на нашем сайте AngularEditor
Значки из символов лигатуры иконки
Пожалуйста, прочитайте наши рекомендации. Включены направления для открытия проблем, стандартов кодирования и заметок о разработке.
Настройки редактора доступны в конфигурации редактора для удобного использования в общих текстовых редакторах. Подробнее и скачать плагины по адресу http://editorconfig.org.
Для прозрачности в нашем цикле выпуска и стремлении поддерживать обратную совместимость, AngularEditor поддерживается в рамках руководящих принципов семантической версий.
См. Раздел «Релизы нашего проекта» для Changelogs для каждой версии выпуска.
Андрей Колков
Если вам нравится моя работа, и я сэкономлю ваше время, вы можете купить мне? или ?
