vue2.x项目引入CKEditor4的两种方式

since �

已于 2023-06-17 10:29:37 修改

阅读量1.9k

点赞数 1

文章标签： vue.js javascript ecmascript

于 2023-06-14 18:37:41 首次发布

本文链接：https://blog.csdn.net/h5_since/article/details/131213786

版权

本文介绍了两种在Vue项目中引入CKEditor4的方法：一是通过npm安装并在main.js中导入使用；二是直接下载文件，放入public文件夹，并在index.html中引入。对于出现找不到CKEDITOR的问题，需检查引入路径是否正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度用了不行的看过来，本文专治各种流程不通的

一.直接npm下载型

下载ckeditor到vue项目

npm install ckeditor4-vue

2.在main.js里导入

import Vue from 'vue';
import CKEditor from 'ckeditor4-vue';

Vue.use( CKEditor );

3.在需要使用的组件里这样使用

<template>
    <div id="app">
        <ckeditor v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                editorData: '<p>Content of the editor.</p>',
                editorConfig: {
                    // The configuration of the editor.
                }
            };
        }
    }
</script>

不用做什么配置，傻瓜式安装。
另附官网文档：

vue2.x项目里引入cleditor4

二、下载文件引入型

1.先去官网下载你所需要的包
2.将下载好的包放在 public文件里面，如下图
在这里插入图片描述
3.在public/index.html里引入文件,路径一定要正确

4.在需要的组件使用即可

<template>
  <div style="text-align: center; margin: 20px">
    <textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  mounted() {
    CKEDITOR.replace("editor1")
  },

  methods: {},
}
</script>