vue+ckEditor5

1
2
3
4
1.安装依赖<br>   "@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);
      }

 

posted on   Mike17  阅读(2304)  评论(0编辑  收藏  举报

编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

导航

统计

搜狗
点击右上角即可分享
微信分享提示