引入:
CKEditor 去官网下载文件包 https://ckeditor.com/ckeditor-4/download/
解压程序包到 vue-cli 的静态资源目录 /static 中
在 index.html 页面引入 ckeditor.js 文件,尽量采用绝对路径引入(刷新页面时,会根据路由相对路径加载该 js 文件,采用相对路径会有时会导致找不到该文件!)
<script src="/static/ckeditor/ckeditor.js" type="text/javascript"></script>
修改 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>