zoukankan      html  css  js  c++  java
  • ckeditor5富文本编辑器在vue中的使用

    安装依赖:

    npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

    要创建编辑器实例,必须首先将编辑器构建和组件模块导入应用程序的根文件中(例如,main.js在由Vue CLI生成时)。然后,使用以下Vue.use()方法启用组件:

    import Vue from 'vue';
    import CKEditor from '@ckeditor/ckeditor5-vue';
    
    Vue.use( CKEditor );

    在组件中的具体使用方式如下:

    <template>
        <div id="app">
            <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
        </div>
    </template>
    
    <script>
        import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
    
        export default {
            name: 'app',
            data() {
                return {
                    editor: ClassicEditor,
                    editorData: '<p>Content of the editor.</p>',
                    editorConfig: {
                        // The configuration of the editor.
                    }
                };
            }
        }
    </script>

    设置ckeditor5输入区域的高度:

    <style>
    .ck-editor__editable { min-height: 100px; }
    </style>

  • 相关阅读:
    Python Day23
    Python Day22
    Python Day21
    Python Day20
    Python Day19
    Python Day18
    Python Day17
    Python Day15
    Appium python unittest pageobject如何实现加载多个case
    Appium python Uiautomator2 多进程问题
  • 原文地址:https://www.cnblogs.com/miaosen/p/10912538.html
Copyright © 2011-2022 走看看