NCF 如何在Xncf中使用富文本编辑器

简介

开发者后台最常用到的编辑器就是富文本编辑器了

NCF框架中可以根据自己的实际需要集成各种各样的富文本编辑器，那么今天我就抛转引玉，给大家说一下如何在XncfModule中加入富文本编辑器

 

 

资源

案例以CKEditor 5来讲解，以下是一些资源地址

CKEditor的官方地址：https://ckeditor.com/

CKEditor 5的官方地址：https://ckeditor.com/ckeditor-5/

CKEditor的参考文档：https://ckeditor.com/docs/ckeditor5/latest/builds/

CKEditor的API：https://ckeditor.com/docs/ckeditor5/latest/api/index.html

 CKFinder官方地址：https://ckeditor.com/ckfinder/

 

步骤

Xncf Module中支持Vue2.0

Xncf Module使用的是Element UI

基于以上2个条件，要使用富文本编辑器，就需要一些步骤才能完成

1.首先引入基础的CKEditor的js

2.建立Vue的Component

3.在页面中引入Vue插件

4.引入CKFinder，来完成图片上传的要求

 

实施

1.先来看下引入js的方式

• 可以直接引用cdn地址：
  
  

  <script src="https://cdn.ckeditor.com/ckeditor5/23.0.0/classic/ckeditor.js"></script>

   

• 【推荐】也可以下载ckeditor.js到本地

 2.建立Vue的Component

Vue.component('ckeditor', {
    // 声明 props
    props: ['content'],
    // 同样也可以在 vm 实例中像 "this.content" 这样使用
    template: `
  <!-- 富文本编辑器组件 -->
   <div class="goods-editor">
        <!-- 工具栏容器 -->
        <div id="toolbar-container"></div>
        <!-- 编辑器容器 -->
        <div id="editor">
          <p>{{ content }}</p>
        </div>
      </div>`,
    name: 'ckeditor',
    data() {
        return {
            editor: null, // 编辑器实例
        };
    },
    mounted() {
        let that = this
        that.init()
    },
    methods: {
        init() {
            let that = this
            ClassicEditor
                .create(document.querySelector('#editor'), {
                    toolbar: ['imageUpload', '|', 'bold', 'italic', 'link', '|', 'heading', 'bulletedList', 'numberedList', 'blockQuote', 'fontFamily', 'undo', 'redo'],
                    ckfinder: {
                        uploadUrl: '/',

                        // Define the CKFinder configuration (if necessary).
                        options: {
                            resourceType: 'Images'
                        }
                    }
                })
                .then(editor => {
                    that.editor = editor;
                })
                .catch(error => {
                    console.error(error);
                });
        },
    }
})

3.在页面中引入建立好的Component

<ckeditor v-bind:content="helloWorld"></ckeditor>

4.引入CKFinder.js到项目中

• 可以直接引用cdn地址：需要百度一下
• 【推荐】可以下载js到本地引用

　　

以上就是Xncf Module里面集成CKEditor的全部过程

内容不是太复杂，仔细阅读，预祝成功

如遇问题可以联系我。