Редактор Wysiwyg для angular4

Кто-нибудь знает хороший бесплатный редактор wysiwyg, совместимый с angular 4?

Фроала, похоже, хороша, но, к сожалению, она не бесплатна.

Возможно, использование angular 4 не было хорошей идеей, потому что трудно найти много основных вещей...

Спасибо

Ответы

Ответ 1

Так как у меня была та же проблема, я поделюсь результатами моего исследования здесь:

NG2-CKEditor

демо здесь

enter image description here

NGX-редактор

демо здесь

РЕДАКТИРОВАТЬ 2019/01/12 - ЭТОТ ПРОЕКТ НЕ ПОДДЕРЖИВАЕТСЯ НИКОГДА

enter image description here

quill.js для угловых

демо здесь

Примечание: Quill использует JSON для внутреннего хранения данных, а не html.

enter image description here

ПРАЙМ НГ

Коллекция тем, которая также включает в себя WYSIWYG-редактор на основе Quill, демонстрация здесь. Некоторые темы бесплатны.

NGX-мкр

WYSIWYG редактор, который использует MarkDown, а не HTML, демо здесь

редактировать

Если вы выбрали quill.js, вы можете использовать реализацию KillerCodeMonkey, поскольку она совместима с angular 5.

Ответ 2

Попробуйте этот простой, но мощный редактор WYSIWYG для Andular 6+ (родной)

AngularEditor

Примечание: этот собственный редактор Angular 6+ WYSIWYG был создан как библиотека с Angular CLI v6.0.5.

![AngularEditor

Демо здесь

PR или запрос новых функций приветствуются.

Этот редактор изначально создавался как часть моего корпоративного проекта https://kassar.ru/, но я выделил его в отдельную библиотеку и разместил как проект с открытым исходным кодом. Я надеюсь, что это помогает кому-то решить свои проблемы.

Ответ 3

Спасибо @Ronin за то, что поделились своими исследованиями. Вот мой отзыв о паре, которую я проверял.

NGX-РЕДАКТОР

Сначала я попробовал ngx-редактор и был относительно прост в установке и использовании. Нужны только ngs-boostrap и fontAwesome в качестве зависимостей. Однако единственным недостатком, который я нашел для своих требований, был виджет добавления ссылки. Эта библиотека не запоминает введенную вами ссылку, поэтому, если вы хотите изменить их, вам нужно удалить и повторно добавить ее. Другое ограничение заключалось в том, что нельзя указывать значение максимальной длины.

NGX-QUILL

В итоге я использовал NGX-QUILL. Это лучший способ работы со ссылками, а также возможность указать максимальную длину. Также было очень легко установить:

npm install ngx-quill
npm install quill  // Needed for CSS styles

import { QuillModule } from 'ngx-quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'

@NgModule({
  imports: [
    ...,

    QuillModule
  ],
  ...
})
class YourModule { ... }

Ответ 4

Вы можете использовать редактор ng2. Он имеет множество возможностей для управления.

https://github.com/chymz/ng2-ckeditor