VUE中使用CKEditor5富文本插件
首先需要安装ckeditor-5
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic
然后,在main.js中:
import CKEditor from '@ckeditor/ckeditor5-vue';
Vue.use( CKEditor );
再次,进行组件化,新建一个ckeditor.vue文件:
<template>
<div class="hello">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</template>
<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
export default {
name: 'HelloWorld',
data () {
return {
editor: ClassicEditor,
editorData: '<p>Content of the editor.</p>',
editorConfig: {
removePlugins: ['MediaEmbed'], //除去视频按钮
language: 'zh-cn',//中文包
ckfinder: {
'uploaded': 1,
'url': '/'
// 后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
},
toolbar: [
'heading',//段落
'|',//分隔
'bold',//加粗
'italic',//倾斜
'link', //超链接
'bulletedList', //项目列表
'numberedList', //编号列表
'blockQuote',//块引用
'undo', //撤销
'redo',//重做
'imageStyle:full', //图片通栏显示
'imageStyle:side', //图片侧边显示
'imageTextAlternative',//更换图片替换文本
'imageUpload',//插入图像
],//工具栏显示
}
}
}
}
</script>
<style scoped>
</style>
经典效果如下:
下面是document模式
<template>
<div>
<ckeditor style="min-height: 200px; max-height: 620px; border: 1px solid #ccc;" :editor="editor"
@ready="onReady" :value="contentData" @input="$emit('input',$event)"
:config="editorConfig"></ckeditor>
</div>
</template>
<script>
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn'
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
export default {
name: "V5",
model: {
prop: "content",
event: "input"
},
props: {
// content: {
// required: true,
// type: String,
// default() {
// return ''
// }
// },
uploadImgHook: {
type: Function,
default() {
return () => {
console.error("undefined uploadImg Hook")
}
}
}
},
computed: {
contentData() {
return this.content
}
},
data() {
return {
editor: DecoupledEditor,
//contentData:this.content,
editorConfig: {
language: "zh-cn",
fontSize: {
options: [8, 10, 'default', 14, 16, 18, 20, 22, 24, 26, 28, 32, 48]
},
fontFamily: {
options: ["宋体", "仿宋", "微软雅黑", "黑体", "仿宋_GB2312", "楷体", "隶书", "幼圆"]
}
}
}
},
methods: {
onReady(editor) {
// Insert the toolbar before the editable area.
editor.ui.getEditableElement().parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement()
);
editor.plugins.get('FileRepository').createUploadAdapter = loader => {
//let val = editor.getData();
return {
upload: async () => {
return await loader.file.then(f => {
const F = new FileReader();
F.readAsArrayBuffer(f);
console.log(f)
return new Promise(resolve => {
F.onload = function () {
resolve({bufAsArray: F.result, file: f})
};
})
}).then(v => {
//执行上传上传
return this.uploadImgHook(v)
//返回标准格式
/*return {
default: 'http://mmcl.maoming.gov.cn/ys/css/img/BG.png'
}*/
});
}
}
};
}
}
}
</script>
<style scoped>
</style>
效果如下:
(资源库 www.zyku.net)
原文链接:https://www.jianshu.com/p/bc3c345e890b
上一篇:企业MES系统及MES作用
栏 目:工具资源
下一篇:一条命令更新Composer版本
本文标题:VUE中使用CKEditor5富文本插件
本文地址:https://www.zyku.net/gongju/2105.html
您可能感兴趣的文章
- 03-16使用Swiper插件实现轮播图的方法
- 06-26highlightjs网页代码高亮插件调用方法
- 06-24SyntaxHighlighter网页代码高亮插件build构造方法
- 05-11FastAdmin cms插件标题和描述截取字数怎么设置
- 03-30Sublime Text3-sublimerge 文本对比插件安装与使用
- 08-14织梦DedeCMS安装模块(插件)后台空白的解决方法
- 01-10代码高亮插件codesnippet添加行号的方法
- 11-30CKEditor 4.x 代码高亮插件SyntaxHighlighter和Code S
- 11-30SyntaxHighlighter代码高亮插件构建使用方法
- 07-27详解win7 cmd执行vue不是内部命令的解决方法
- 10-11realmegtneo2如何关闭夜间自动更新
- 02-23小米手机开启小爱方言唤醒方法
- 04-21荣耀v40轻奢版NFC功能使用教程
- 03-12帝国CMS后台admin管理员帐号密码忘记
- 02-23高德地图开启横屏模式设置方法
- 05-07iPhone开启自动切换壁纸教程
- 03-19iqooneo5设置抬手自动接听电话设置方
- 02-28WordPress获取当前日志的所有附件的方
- 01-11云上阅读-云上阅读应用软件功能介绍
- 03-01华为freebudspro设置降噪方式教程
最近更新
阅读排行
猜你喜欢
- 03-12帝国CMS如何调用相关文章
- 12-23HTML <big> 标签 - HTML5 不支持
- 02-22一加9pro隐藏手势指示条设置方法
- 02-21一加9pro桌面角标更改方法
- 10-19高德地图怎么录制个人语音包
- 03-13notepad++插入时间和调用ASCII码表的
- 03-10vivos10隐藏应用操作方法
- 02-18用ajax传递json到前台中文出现问号乱
- 04-05详谈php ip2long 出现负数的原因及解
- 11-29procreate pocket设置压力曲线方法介