Vue2.0+CKeditor

来源：互联网发布：淘宝营业执照代办真假编辑：程序博客网时间：2024/06/08 18:51

本篇博客主要解决在vue2.0中如何引入ckeditor的问题

1、npm 安装vue脚手架(vue-cli) ：在index.html页面引入ckeditor.js, 尽量采用绝对路径引入（刷新页面时，会根据路由相对路径加载该js文件，采用相对路径会有时会导致找不到该文件！）

<script src="/static/ckeditor/ckeditor.js" type="text/javascript"></script>

（static文件夹和index.html在同级目录下）

2、webpack文件配置(build/webpack.base.conf.js)：

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

3、模块引入ckeditor

在需要使用ckeditor插件的模块中插入textarea
<textarea id="editor" rows="10" cols="80"></textarea>

引入ckeditor
import CKEDITOR from "CKEDITOR";

最后在js中将textarea替换成编辑器

mounted() {      CKEDITOR.replace("editor", {height: "300px", width: "100%", toolbar: "Full"});      var editor = CKEDITOR.instances.editor2;    },

0 0