富文本编辑器 ckeditor 完整
后台项目用到太多的富文本编辑器，目前发现能整的最明白的就是ckeditor了，原谅技术不高吧 先上效果图：
代码开始：
- 先去官网下载ckeditor v4.0 压缩包呗，我下载的是标准套餐，附上地址：ckeditor.com/ckeditor-4/…，下载下来的check文件放到根目录下的public文件中 然后在index.html中引入js
<script type="text/javascript" src="public/ckeditor/ckeditor.js"></script>
- 定义一个组件 ckeditor.vue,代码如下：
<template>
<div>
<textarea style="height:640px;" :id="id" v-model="center"></textarea>
</div>
</template>
<script>
export default {
name: 'ckeditor4',
props: [
'centerText'
],
watch:{ //检测父组件变化
centerText(val,oldval){
this.center = val
this.center = this.center.substring(0,this.center.length)
this.ckEditorFun()
},
deep: true
},
data: function() {
return {
id: parseInt(Math.random() * 10000).toString(),
ckeditor: null,
center:this.centerText,
}
},
methods:{
ckEditorFun() {
var that = this
// 渲染编辑器
this.ckeditor = window.CKEDITOR.replace(this.id)
// // 设置初始内容
this.ckeditor.setData(this.center)
// 监听内容变更事件
this.ckeditor.on('change', function() {
that.$emit('input', that.ckeditor.getData())
that.$emit('func',that.center) //向父组件发送数据
})
}
},
mounted: function() {
},
}
</script>
<style type="text/css">
.cke_contents.cke_reset{
height:640px!important;
}
</style>
- 父组件中代码：
<ckeditor v-model="ruleForm.content" :centerText="centerText" @func="getMsgDataFun"></ckeditor>
import ckeditor from './ckEditor'
export default {
components: {
ckeditor
},
data() {
return {
getMsgData:'',
centerText:'',
}
},
methods:{
//从子组件获取数据
getMsgDataFun(data){
this.getMsgData = data
this.getMsgData = this.getMsgData.substring(0,this.getMsgData.length) //为啥这样整一下，不整一下的话我提交时数据没变化
},
}
}
// 父组件中需要给conterText赋值，当没有值的时候赋值' '（此处中间是空格）,因为子组建是检测context变化后才执行编辑器操作的
4.打开check文件中的config.js文件，代码如下
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
{ name: 'styles' },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'colors' },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'forms' },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'clipboard' },
{ name: 'tools' },
];
config.format_tags = 'p;h1;h2;h3;pre';
config.image_previewText = ''
config.filebrowserImageUploadUrl = sessionStorage.getItem('admin_api') + "/upload/commit/1";
config.removeDialogTabs = 'image:advanced;image:Link'
config.colorButton_colors = 'CF5D4E,454545,FFF,CCC,DDD,CCEAEE,66AB16';
config.colorButton_enableAutomatic = true;
config.extraPlugins = 'floatpanel'
// config.removeButtons = 'Source,Save,NewPage,Preview,Print,Templates,Cut,Paste,Copy,PasteText,PasteFromWord,Undo,Redo,Find,Replace,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Subscript,Superscript,CopyFormatting,RemoveFormat,NumberedList,BulletedList,Outdent,Indent,CreateDiv,Blockquote,JustifyLeft,JustifyCenter,JustifyRight,JustifyBlock,BidiLtr,BidiRtl,Language,Unlink,Anchor,Flash,Table,HorizontalRule,Smiley,PageBreak,SpecialChar,Iframe,Styles,Format,Font,FontSize,Maximize,ShowBlocks,About';
config.removeButtons = 'Save,NewPage,Preview,Print,Templates,PasteFromWord,Find,Replace,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Subscript,Superscript,NumberedList,Outdent,Indent,CreateDiv,Blockquote,BidiLtr,BidiRtl,Language,Anchor,Flash,Smiley,PageBreak,SpecialChar,Iframe,ShowBlocks,Styles,Font,About';
//超链接高级设置选项不显示
config.linkShowAdvancedTab = false;
//超链接目标选项不显示
config.linkShowTargetTab = false;
//鼠标悬停不展示title
config.title = false;
};
主要的配置是config.removeButtons 中的这些，你删掉一个就出来一个， 对照表：没找见对照表，您自己根据英文意思自己想吧，
坑：上传图片的接口的让后台根据ckeditor的格式改下，因为我没找见在哪改格式，您要找见了一定说下啊
