vue 使用CKEditor 富文本

Myth丶恋晨 2023-10-09 11:14 45阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]

### 引入： ###

CKEditor 去官网下载文件包 https://ckeditor.com/ckeditor-4/download/

解压程序包到 vue-cli 的静态资源目录 /static 中

在 index.html 页面引入 ckeditor.js 文件，尽量采用绝对路径引入（刷新页面时，会根据路由相对路径加载该 js 文件，采用相对路径会有时会导致找不到该文件！）

修改 webpack 配置文件 build/webpack.base.conf.js，cli3在根目录下新建vue.config.js文件里面写，内容如下：

module.exports = {
      externals: {
        "CKEDITOR": "window.CKEDITOR"
      }
    }

项目中即可使用

### 使用： ###

<template>
      <div id="all">
            <textarea id="content" rows="10" cols="80"></textarea>
            <el-button type="primary" class="community_submit_btn" @click='clickBtn'>提交</el-button>
      </div>
    </template>
    
    <script>
     import CKEDITOR from 'CKEDITOR'
      export default {
        name: 'editor',
        data() {
          return {
    
          };
        },
        mounted() {
        //构造一个富文本编辑器 给一个div用id绑定
          CKEDITOR.replace('content', {height: '300px', width: '600px', toolbar: 'toolbar_Full'});
          this.editor = CKEDITOR.instances.editor;
        },
        methods:{
            clickBtn(){
                var stemTxt=CKEDITOR.instances.content.document.getBody().getText(); //取得纯文本     
                console.log(stemTxt)
                var stem = CKEDITOR.instances.content.getData();  //取得带标签的文本 给后端的传值
                console.log(stem)
            }
        }
    }
    </script>
    
    <style scoped>
    #all{
        background: #fff;
    }
    .community_submit_btn{
        margin-top: 20px;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190925092759965.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70