dangvanthanh / Vue Ckeditor2
Licence: mit
CKEditor 4 wrapper by Vue.js
Stars: ✭ 170
Projects that are alternatives of or similar to Vue Ckeditor2
ckeditor-youtube-plugin
CKEditor Plugin to embed Youtube videos.
Stars: ✭ 53 (-68.82%)
Mutual labels: ckeditor
Ckeditor5
Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
Stars: ✭ 5,406 (+3080%)
Mutual labels: ckeditor
Fosckeditorbundle
Provides a CKEditor integration for your Symfony project.
Stars: ✭ 387 (+127.65%)
Mutual labels: ckeditor
Ckeditor4
The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.
Stars: ✭ 5,502 (+3136.47%)
Mutual labels: ckeditor
React Ckeditor
CKEditor component for React with plugin and custom event listeners support
Stars: ✭ 124 (-27.06%)
Mutual labels: ckeditor
Fullycms
Fully CMS - Multi Language Content Management System - Laravel
Stars: ✭ 465 (+173.53%)
Mutual labels: ckeditor
Pbckcode
A CKEditor plugin to easily add code into your article
Stars: ✭ 42 (-75.29%)
Mutual labels: ckeditor
ckeditor4-sdk
A set of software development tools for CKEditor 4 along with samples.
Stars: ✭ 16 (-90.59%)
Mutual labels: ckeditor
Richfilemanager
An open-source file manager. Up-to-date for PHP, Java, ASHX, ASP, NodeJs & Python 3 Flask. Contributions are welcome!
Stars: ✭ 820 (+382.35%)
Mutual labels: ckeditor
Laravel Filemanager Example 5.3
Demo integration for laravel-filemanager (https://github.com/UniSharp/laravel-filemanager).
Stars: ✭ 100 (-41.18%)
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 (-78.82%)
Mutual labels: ckeditor
Ckeditor4 Releases
Official distribution releases of CKEditor 4.
Stars: ✭ 511 (+200.59%)
Mutual labels: ckeditor
Djangocms Text Ckeditor
Text Plugin for django CMS using CKEditor 4
Stars: ✭ 126 (-25.88%)
Mutual labels: ckeditor
Laravel Filemanager
Media gallery with CKEditor, TinyMCE and Summernote support. Built on Laravel file system.
Stars: ✭ 1,688 (+892.94%)
Mutual labels: ckeditor
Administrate Field Ckeditor
A plugin for adding CKEditor support to Administrate
Stars: ✭ 17 (-90%)
Mutual labels: ckeditor
vue-ckeditor
Ckeditor using for Vue.js 2
Requirements
Install
CDN
<script src="https://unpkg.com/vue-ckeditor2"></script>
NPM
$ npm install vue-ckeditor2 --save
Usage
This document applies to v2.0+. If you are looking for older versions, docs are here
Component
Then in your component:
<template>
<div>
<vue-ckeditor
v-model="content"
:config="config"
@blur="onBlur($event)"
@focus="onFocus($event)"
@contentDom="onContentDom($event)"
@dialogDefinition="onDialogDefinition($event)"
@fileUploadRequest="onFileUploadRequest($event)"
@fileUploadResponse="onFileUploadResponse($event)" />
</div>
</template>
<script>
import VueCkeditor from 'vue-ckeditor2';
export default {
components: { VueCkeditor },
data() {
return {
content: '',
config: {
toolbar: [
['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript']
],
height: 300
}
};
},
methods: {
onBlur(evt) {
console.log(evt);
},
onFocus(evt) {
console.log(evt);
},
onContentDom(evt) {
console.log(evt);
},
onDialogDefinition(evt) {
console.log(evt);
},
onFileUploadRequest(evt) {
console.log(evt);
},
onFileUploadResponse(evt) {
console.log(evt);
}
}
};
</script>
Props
Name | Type | Description |
---|---|---|
name |
String |
Name of instance ckedior. **Default: editor- ** |
id |
String |
Id of instance ckedior. Default: editor-1 |
types |
String |
Types of ckedior. Default: classic |
config |
Object |
All configuration of ckeditor. Default: {} |
instanceReadyCallback |
Function |
Optional function that will be attached to CKEditor instanceReady event. |
readOnlyMode |
Boolean |
Option setReadOnly editor initializes in the proper mode. Default: false |
Events
Name | Description |
---|---|
blur |
Fired when the editor instance loses the input focus. |
focus |
Fired when the editor instance receives the input focus. |
contentDom |
Event fired when the editor content (its DOM structure) is ready |
dialogDefinition |
Event fired when a dialog definition is about to be used to create a dialog into an editor instance |
fileUploadRequest |
Event fired when the file loader should send XHR |
fileUploadResponse |
Event fired when the file loader response is received and needs to be parsed |
Build Setup
You can use vue-cli with vue-rollup-boilerplate templates or other vue templates
Created By
Thanks to contributers
License
MIT © Dang Van Thanh
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].