chymz / Ng2 Ckeditor
Licence: mit
Angular2 CKEditor component
Stars: ✭ 370
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ng2 Ckeditor
React Ckeditor
CKEditor component for React with plugin and custom event listeners support
Stars: ✭ 124 (-66.49%)
Mutual labels: ckeditor
ckeditor-youtube-plugin
CKEditor Plugin to embed Youtube videos.
Stars: ✭ 53 (-85.68%)
Mutual labels: ckeditor
myblog
An Open Source Multi-user Blog System that Powered by Flask.
Stars: ✭ 19 (-94.86%)
Mutual labels: ckeditor
t3x-rte ckeditor image
Image support in CKEditor for the TYPO3 ecosystem
Stars: ✭ 43 (-88.38%)
Mutual labels: ckeditor
Laravel Filemanager Example 5.3
Demo integration for laravel-filemanager (https://github.com/UniSharp/laravel-filemanager).
Stars: ✭ 100 (-72.97%)
Mutual labels: ckeditor
ckeditor4-sdk
A set of software development tools for CKEditor 4 along with samples.
Stars: ✭ 16 (-95.68%)
Mutual labels: ckeditor
laravel-responsivefilemanager
Laravel Responsive File Manager integration
Stars: ✭ 13 (-96.49%)
Mutual labels: ckeditor
html-integrations
The official JavaScript library for MathType, the leading formula editor and equation writer for the web by Wiris
Stars: ✭ 36 (-90.27%)
Mutual labels: ckeditor
Syliuscmsplugin
Content management system for eCommerce apps created on Sylius platform. Built with Sylius code quality, flexibility, BDD.
Stars: ✭ 178 (-51.89%)
Mutual labels: ckeditor
iOS-HTMLTextEditor
A simple implementation of an HTML Editor using CKEditor in a web view.
Stars: ✭ 57 (-84.59%)
Mutual labels: ckeditor
Djangocms Text Ckeditor
Text Plugin for django CMS using CKEditor 4
Stars: ✭ 126 (-65.95%)
Mutual labels: ckeditor
Laravel Filemanager
Media gallery with CKEditor, TinyMCE and Summernote support. Built on Laravel file system.
Stars: ✭ 1,688 (+356.22%)
Mutual labels: ckeditor
Codebe
CodeBe(码币)是一个是使用angular2整合各种插件的项目,包括(layer,bootstrap-table,markdown编辑器,highcharts,ckeditor,高德地图,fullcalendar 等等)。如果你有什么想要集成的插件,请告诉我,我来加进去。(请给我加个星,谢谢。)
Stars: ✭ 307 (-17.03%)
Mutual labels: ckeditor
Angular - CKEditor component
Use the CKEditor (4.x) wysiwyg in your Angular application.
Installation
- Include CKEditor javascript files in your application :
<script src="https://cdn.ckeditor.com/4.16.0/full/ckeditor.js"></script>
-
Install ng2-ckeditor
- JSPM :
jspm install npm:ng2-ckeditor
- NPM :
npm install ng2-ckeditor
- YARN:
yarn add ng2-ckeditor
- JSPM :
-
Install @types/ckeditor
- JSPM :
jspm install npm:@types/ckeditor
- NPM :
npm install --save @types/ckeditor
- YARN :
yarn add @types/ckeditor
- JSPM :
-
SystemJS Config :
System.config({
map: {
'ng2-ckeditor': 'npm:ng2-ckeditor',
},
packages: {
'ng2-ckeditor': {
main: 'lib/index.js',
defaultExtension: 'js',
},
},
});
- Please consider usage of the plugin
divarea
of CKEditor (see Issues)
Sample
Include CKEditorModule
in your main module :
import { CKEditorModule } from 'ng2-ckeditor';
import { FormsModule } from '@angular/forms';
@NgModule({
// ...
imports: [CKEditorModule, FormsModule],
// ...
})
export class AppModule {}
Then use it in your component :
import { Component } from '@angular/core';
@Component({
selector: 'sample',
template: `
<ckeditor
[(ngModel)]="ckeditorContent"
[config]="{uiColor: '#99000'}"
[readonly]="false"
(change)="onChange($event)"
(editorChange)="onEditorChange($event)" <!-- CKEditor change event -->
(ready)="onReady($event)"
(focus)="onFocus($event)"
(blur)="onBlur($event)"
(contentDom)="onContentDom($event)"
(fileUploadRequest)="onFileUploadRequest($event)"
(fileUploadResponse)="onFileUploadResponse($event)"
(paste)="onPaste($event)"
(drop)="onDrop($event)"
debounce="500">
</ckeditor>
`,
})
export class Sample {
ckeditorContent: string = '<p>Some html</p>';
}
Configuration
-
config
: The configuration object for CKEditor see http://docs.ckeditor.com/#!/api/CKEDITOR.config -
debounce
: You can add a delay (ms) when updating ngModel -
readonly
: Enabled / disable readonly on editor
Toolbar Directives
You can use the following directives to add custom buttons to CKEditor's toolbar and organize them into groups. For more info about CKEditor's Toolbar API refer to http://docs.ckeditor.com/#!/api/CKEDITOR.ui
-
<ckbutton>
: Note that thename
andcommand
attributes are mandatory for this one.
<ckeditor
[(ngModel)]="ckeditorContent">
<ckbutton [name]="'saveButton'"
[command]="'saveCmd'"
(click)="save($event)"
[icon]="'save.png'"
[label]="'Save Document'"
[toolbar]="'clipboard,1'">
</ckbutton>
</ckeditor>
-
<ckgroup>
: Can be used to organize multiple buttons into groups.
<ckeditor
[(ngModel)]="ckeditorContent">
<ckgroup
[name]="'documenthandling'"
[previous]="'1'">
<ckbutton .... ></ckbutton>
<ckbutton .... ></ckbutton>
</ckgroup>
</ckeditor>
Issues
Licence
See LICENSE
file
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].