CKEditor 富文本编辑器

GitHub 项目地址 文档

引用

// CKEditor 5
<script src="https://cdn.ckeditor.com/ckeditor5/16.0.0/classic/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/16.0.0/balloon/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/16.0.0/balloon-block/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/16.0.0/inline/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/16.0.0/decoupled-document/ckeditor.js"></script>

<div id="editor">
    <p>Here goes the initial content of the editor.</p>
</div>

然后调用ClassicEditor.create()来代替的 <textarea> 一个元素经典的编辑器：

经典编辑器

ClassicEditor.create( document.querySelector('#editor') ).then( editor => {
    console.log( editor );
}).catch( error => {
    console.error( error );
});

内联编辑器

InlineEditor.create( document.querySelector('#editor') ).then( editor => {
    console.log( editor );
}).catch( error => {
    console.error( error );
});

气球编辑器

BalloonEditor.create( document.querySelector('#editor') ).then( editor => {
    console.log( editor );
}).catch( error => {
    console.error( error );
});

转载请注明出处：吖Go博客 » CKEditor 富文本编辑器