ckEditor5

 1.安装依赖
"@ckeditor/ckeditor5-build-balloon": "^10.1.0", "@ckeditor/ckeditor5-build-classic": "^10.1.0", "@ckeditor/ckeditor5-build-inline": "^10.1.0", "vue-ckeditor5": "^0.1.5",

 2.html 

                <div class="col-sm-6" id="ckEditor">
                  <!-- <vue-editor v-model="content"></vue-editor> -->
                  <vue-ckeditor type="balloon"  v-model="content" :editors="editors1"
                    :config='config' ></vue-ckeditor>
                </div>

3.引入文件

  import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
  import BalloonEditor from '@ckeditor/ckeditor5-build-balloon'
  import InlineEditor from '@ckeditor/ckeditor5-build-inline'
  import VueCkeditor from 'vue-ckeditor5'

4.js

    data(){
      return {
        content: '',
        theme:'' ,
        brief:'',
        data1: [],
        data2: [],
        defaultProps: {
          children: 'children',
          label: 'departName'
        },
        departmentId:'',
        departmentName:'',
        receiveDeptIds:'',
        treeShow:false,
        treeShowReceive:true,
        editors1: {
          // classic: ClassicEditor,
          balloon: BalloonEditor
        },
        config:{
          language:'en',
          ckfinder: {
              uploadUrl: $.getCookie('prefixUrl') +'/file/uploads'
          },
          image:{
             toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' ],
             styles: [
                // This option is equal to a situation where no style is applied.
                'full',
                // This represents an image aligned to the left.
                'alignLeft',
                // This represents an image aligned to the right.
                'alignRight'
            ]
          },
          fontSize: {
              options: [
                  'tiny',
                  'small',
                  'big',
                  'huge'
              ]
          },
          fontFamily: {
              options: [
                  'default',
                  'Ubuntu, Arial, sans-serif',
                  'Ubuntu Mono, Courier New, Courier, monospace'
              ]
          },
          toolbar: [
              'heading',
            '|',
            'alignment',// <--- ADDED
            'bold',
            'italic',
            'link',
            'fontFamily',
            'fontSize',
            // 'bulletedList',
            // 'numberedList',
            'imageUpload',
            // 'blockQuote',
            'undo',
            'redo'
          ]
        }
      }
    },

猜你喜欢

转载自www.cnblogs.com/cx709452428/p/10148567.html