CKEditor4
1. 在index.html中直接引入,注意这里引入的是 CKEditor 4,
<script src="https://cdn.ckeditor.com/4.12.1/standard/ckeditor.js"></script>
2. 在vue.config.js
文件中配置
module.exports = {
configureWebpack: {
externals: {
'CKEDITOR': 'window.CKEDITOR'
}
}
}
3. 在组件中使用
<template>
<div class="ckeditor-container">
<el-row type="flex" justify="center">
<el-col :span="8" style="text-align:center">
<h1>CKEditor Demo</h1>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="16" >
<textarea name="lmtEditor" id="lmtEditor"></textarea>
</el-col>
</el-row>
<el-row type="flex" justify="center" style="padding-top:26px;">
<el-col :span="3" style="text-align:center;">
<el-button type="warning" size="large" @click="cleanEditor">重置</el-button>
</el-col>
<el-col :span="1"></el-col>
<el-col :span="3">
<el-button type="primary" size="large" @click="copyData">复制</el-button>
</el-col>
<el-col :span="1"></el-col>
<el-col :span="3" style="text-align:center;">
<el-button type="info" size="large" @click="saveEditor">保存</el-button>
</el-col>
</el-row>
</div>
</template>
<script>
import CKEDITOR from 'CKEDITOR'
import Vue from 'vue'
import VueClipborad from 'vue-clipboard2'
Vue.use(VueClipborad)
export default {
name: 'cke',
data () {
return {
editorData: ''
}
},
mounted () {
this.initCKEditor()
},
methods: {
initCKEditor () {
CKEDITOR.replace('lmtEditor', {
langguage: 'zh-ch',
filebrowserWindowWidth: '800',
filebrowserWindowHeight: '600',
height: 600,
format_tags: 'p;h1;h2;h3;h4;h5;h6;pre;address;div'
})
},
cleanEditor () {
CKEDITOR.instances.lmtEditor.setData('')
},
saveEditor () {
this.editorData = CKEDITOR.instances.lmtEditor.getData()
},
copyData () {
this.editorData = CKEDITOR.instances.lmtEditor.getData()
this.$copyText(this.editorData).then(e => {
alert('复制成功')
}, e => {
alert('复制失败')
console.log(e, '失败原因')
})
}
}
}
</script>
<style lang="scss">
.ckeditor-container{
color: red;
}
</style>
CKEditor
效果如图:
注意:
项目中安装了Element
、vue-clipboard2
安装并使用 vue-clipboard2
(vue
剪切板功能, 将文本复制到剪切板需要它 )
1). 安装
yarn add vue-clipboard2 或者npm install --save vue-clipboard2
2). 在main.js
中引入:
import VueClipboard from "vue-clipboard2";
import Vue from "vue";
Vue.use(VueClipboard);
3). 使用:
let container = this.$refs.container
this.$copyText("Text to copy", container)
参考:https://github.com/Inndy/vue-clipboard2
对于CKEditor4
,
要检索编辑器数据,请调用编辑器实例的CKEDITOR.editor.getData
方法。对于ID为的编辑器实例editor1
,它将类似于以下内容:
<script>
var data = CKEDITOR.instances.editor1.getData();
</script>
- 定义一个
textarea
,并定义好id
名为如’lmtEditor
’,CKEDITOR.replace('lmtEditor',{写初始化内容,如language:zh-cn})
CKEDITOR.instances.lmtEditor.setData('')
可设置富文本编辑器里的内容为空,即清除,CKEDITOR.instances.lmtEditor.getData()
可获取编辑器里面的内容
参考官网:https://ckeditor.com/docs/ckeditor4/latest/guide/dev_savedata.html#retrieving-data-from-ckeditor