1.0.2 • Published 6 years ago
cceditor v1.0.2
CC editor is a simple small extensible mobile-friendly WYSIWYG text editor for web, with no dependencies
Live demo: https://jaredreich.com/pell
Features
- Pure JavaScript, no dependencies, written in ES6
Included actions:
- Bold
- Italic
- Underline
- Strike-through
- Heading 1
- Heading 2
- Paragraph
- Quote
- Ordered List
- Unordered List
- Code
- Horizontal Rule
- Link
- Image
Other available actions (listed at https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand):
- Justify Center
- Justify Full
- Justify Left
- Justify Right
- Subscript
- Superscript
- Font Name
- Font Size
- Indent
- Outdent
- Clear Formatting
- Undo
- Redo
Or create any custom action!
Browser Support
- IE 9+
- Chrome 5+
- Firefox 4+
- Safari 5+
- Opera 11.6+
Installation
npm:
npm install --save cceditor
Usage
API
// Initialize CCEditor on an HTMLElement
new CCEditor({
// <HTMLElement>, required
element: document.getElementById('some-id'),
// <Function>, optional 默认为
// (html) => console.log(html)
onChange: html => console.log(html),
// <Array[string | Object]>, string if overwriting, object if customizing/creating
// action.name<string> (only required if overwriting)
// action.icon<string> (optional if overwriting, required if custom action)
// action.title<string> (optional)
// action.result<Function> (required)
// Specify the actions you specifically want (in order)
actions: {
bold: {},
custom: {
name: 'custom',
icon: 'C',
title: 'Custom Action',
handler: () => console.log('Do something!')
},
underline:{}
},
// classes<Array[string]> (optional)
// Choose your custom class names
classesConfig: {
editorClass: 'CCEditor',
toolsbarClass: 'cc-toolsbar',
contentClass: 'cc-content'
},
})
List of overwriteable action names
- bold
- italic
- underline
- strikethrough
- heading1
- heading2
- paragraph
- quote
- orderlist
- unorderlist
- code
- line
- link
- image
Example
<script src='./dist/cceditor/bundle.js'></script>
<div id="cc-editor"></div>
<div>
HTML output:
<div id="html-output" style="white-space:pre-wrap;"></div>
</div>
const editor = new CCEditor({
element: document.getElementById('pell'),
onChange: html => {
document.getElementById('html-output').textContent = html
},
actions: {
custom: {
name: 'custom',
icon: '<b><u><i>C</i></u></b>',
title: 'Custom Action',
result: () => console.log('YOLO')
},
},
})
Example
<h2>CC Editor Demo</h2>
<div id="cc-editor" style='width: 400px; height: 400px; border-width: 1px;'></div>
<div>
Output:
<div id="output"></div>
</div>
(function (window) {
var $el = document.querySelector('#cc-editor');
var newCCEditor = new CCEditor({
el: $el,
onChange: (html) => {
document.querySelector('#output').innerHTML = html;
}
});
})(window)
Custom Styles
CSS
.CCEditor {
width: 400px;
height: 400px;
border-width: 1px;
}
.CCEditor .cc-content {
height: 400px;
}
License
MIT