[前端] 文本編輯器: CKEditor

日期：
CKEditor
https://ckeditor.com/

CKEditor 4
https://ckeditor.com/ckeditor-4/

CKEditor 是一款功能完整、擴充性強卻簡單易用的文字編輯器，也支援多語系，編輯所產出的 HTML 非常乾淨，套件多亦能客製化，屬於功能非常完善的文字編輯器。

CKEditor 目前有兩個版本 CKEditor 4 和 CKEditor 5，CKEditor 5 為了讓走向更前端瀏覽器的操作與使用性，已經是完全打掉重寫不相容舊版，所以 API  和介面都是新的，且瀏覽器支援上也不支援 IE ，勉強支援 Edge (撰文時間為2018/09/14)。記得要先確認使用者端的需求，再來決定用 4 或 5 版。

CKEditor 5 瀏覽器支援度
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/browser-compatibility.html

以下為vue版

vue-ckeditor2
https://github.com/dangvanthanh/vue-ckeditor2


以下為單html檔測試範例︰
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>CKEditor Vue Demo</title>

    <!--使用vue-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

    <!--使用ckeditor-->
    <script src="https://cdn.ckeditor.com/4.10.1/full/ckeditor.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-ckeditor2@2.0.9/dist/vue-ckeditor2.js"></script>

    <script type="text/javascript">

        let ckeditor_settings = {
            fontSize_sizes: '8pt;10pt;11pt;12pt;14pt;18pt;24pt;36pt;',
            resize_enabled: false,
            removePlugins: 'elementspath',
            toolbar: [
                {
                    name: 'save', items: ['Undo', 'Redo']
                },
                {
                    name: 'insert', items: ['Table', 'SpecialChar']
                },
                {
                    name: 'link', items: ['Link', 'Unlink']
                },
                {
                    name: 'basicstyles', items: ['FontSize', 'Bold', 'Italic', 'Underline', 'Subscript', 'Superscript']
                },
                {
                    name: 'align', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
                },
                {
                    name: 'lists', items: ['NumberedList', 'BulletedList', 'Outdent', 'Indent']
                },
            ],
            height: 250,
        };

    </script>

</head>
<body>

    <vue-ckeditor id="app" v-bind:config="ckeditor_settings" v-model="content"></vue-ckeditor>
 
    <script type="text/javascript">

        //使用Vue.component加載VueCkeditor.default
        Vue.component('vue-ckeditor', VueCkeditor.default);

        new Vue({
            el: '#app',
            data: {
                content: 'I am Example',
            },
        });

    </script>

</body>
</html>

載入後畫面為︰



#Javascript, CKEditor, vue, directly in browser, 富文本, 文本編輯器

留言

張貼留言