zx-editor
Version:
ZxEditor is a HTML5 rich text editor
103 lines (90 loc) • 2.47 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>ZxEditor - 移动端H5富文本编辑器</title>
<link rel="stylesheet" href="./dist/css/zx-editor.css">
<style>
body {
margin: 0;
padding: 0;
}
#editorContainer {
padding: 15px;
/*box-sizing: border-box;*/
}
</style>
</head>
<body>
<div id="editorContainer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.42/polyfill.min.js"></script>
<!--exif获取照片参数插件-->
<script src="./demo/libs/exif.min.js"></script>
<!--debug-->
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<!--编辑器-->
<script src="./dist/js/zx-editor.js"></script>
<script>
// 实例化 ZxEditor
var zxEditor = new ZxEditor('#editorContainer', {
editable: true,
// placeholder: '自定义placeholder',
// lineHeight: 1,
// padding: '0 0 30px',
// placeholderColor: 'red',
cursorColor: 'red',
// toolbarBtns: ['select-picture', 'text-style']
})
// Custom button for the toolbar
// zxEditor.toolbar.addButton(buttonOptions, index);
zxEditor.toolbar.addButton({
name: 'custom-button',
// button className
className: '',
// ElementHTML or $()
el: null,
// innerHTML
innerHtml: '自定义<br>按钮',
// style
style: 'background: green;',
// obj{type: 'click', handler: fn, capture: false} or array[obj1, obj2]
events: [
{
type: 'click',
handler() {
alert('click 自定义按钮')
}
}
]
})
// 实例化 VConsole
new VConsole()
// console.log(debug)
console.log('实例化 ZxEditor', zxEditor);
zxEditor.on('change', function () {
console.log('change input')
})
zxEditor.on('paste', function (e) {
console.log('paste', e)
})
zxEditor.on('keydown', function () {
// console.log('keydown')
})
zxEditor.on('keyup', function () {
// console.log('keyup')
})
zxEditor.on('selectPictureInputChange', function (file, ze, e) {
// console.log(file, ze, e)
})
zxEditor.on('error', function (e, methodName) {
console.log(methodName)
console.error(e)
})
zxEditor.on('windowResize', function () {
console.error('windowResize', window.innerHeight)
})
</script>
</body>
</html>