Vue中如何引入CKeditor 文本编辑器

1、下载编辑器包:https://www.npmjs.com/package/ckeditor

2、放到静态资源目录中


 在index.html中引入文件ckeditor.js

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


3、配置webpack文件配置  build/webpack.base.conf.js

module.exports = {

 externals: {
    "CKEDITOR": "window.CKEDITOR"
  },

}

4、使用

<textarea id="editor" rows="10" cols="80"></textarea>

js中需要引入,生命周期中mounted需要引入如下代码

import CKEDITOR from 'CKEDITOR';

mounted() {
  CKEDITOR.replace('editor', {height: '400px', width: '100%', toolbar: 'toolbar_Full'});
  this.editor = CKEDITOR.instances.editor;
}






   
   
   


猜你喜欢

转载自blog.csdn.net/timebeign/article/details/79870227