vue+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 id="ckEditor">
     <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: '',
        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'
          ]
        }
      }
    },

　　　　components:{

　　　　　　'vue-ckeditor': VueCkeditor.component

　　　　}

5.处理数据

      ctbrife(str){
        // str = str.replace(/\<c:if\b[^>]*>([\s\S]*?)c:if>/g,'')
        str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag
        str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白
        //str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
        str=str.replace(/ /ig,'');//去掉 
        return str.substring(0,40);
      }

 

转载于:https://www.cnblogs.com/cx709452428/p/10148567.html