1.为什么选择iceEditor
因为最近使用Laya项目开发,不好通过npm装包等方法去引入富文本编辑器的插件,于是找到iceEditor这款,只需要通过js引入,即可快捷使用
2.使用方法
基本使用方法参考官方文档 iceEditor 官方文档
3.在vue项目中使用iceEditor 富文本编辑器的使用方法
1).将iceEditor项目下载到vue项目中的plugins下
2).index.html中引入相关css和js ,
注意需要放到body里面,而且引入顺序不能反,不然可能会报错!
<body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app" /> <!-- built files will be auto injected --> <!--此处路径问题要注意,如果直接./plugins... 可能会有问题--> <link rel="stylesheet" href="<%= BASE_URL %>plugins/iceui/src/ui/ui.css"> <script type="text/javascript" src="<%= BASE_URL %>plugins/iceui/src/ice.js"></script> <script type="text/javascript" src="<%= BASE_URL %>plugins/iceui/src/ui/ui.js"></script> <script type="text/javascript" src="<%= BASE_URL %>plugins/iceui/src/editor/iceEditor.min.js"> </script> </body>
3).新建一个iceEditor组件,例如 iceEditor.vue
<template> <div class="editor"> <div :id="curEditorId" class="iceEditor"></div> </div> </template> <script> import { uuid2 } from '@/util/index' export default { props: { editorId: { type: String, default() { // 动态生成UUID return uuid2() } }, disabled: { type: Boolean, default: false }, value: { type: String, default: '' }, dir: { type: String, default: undefined } }, data() { return { curEditorId: 'editor' } }, created() { this.curEditorId = this.editorId const divDom = document.getElementById(this.curEditorId) console.debug(divDom) if (divDom != null) { this.curEditorId = 'editor2' } }, mounted() { this.init() }, methods: { init() { const domId = this.curEditorId const divDom = document.getElementById(domId) console.debug(divDom) // eslint-disable-next-line no-undef ice.editor(domId, (editor) => { // this.iceEditorObj[domId] = editor if (this.disabled) editor.inputDisabled() else editor.inputEnable() editor.notMenu = ['files', 'music', 'video'] // 不需要的工具栏菜单 editor.height = '200px' // 编辑器的高度 editor.screenshotUpload = 0 // 截图粘贴直接上传到服务器 // 创建编辑器 editor.create() // 设置编辑器的内容 editor.setValue(this.value) // 监听输入 editor.inputCallback((html, text) => { // this.formData[domId] = html console.debug(html, text) }) }) } } } </script> <style lang="less"> .iceEditor { color: #333; .iceEditor-noselect { body { color: #333; } } } </style>
此处对id做了处理,因为要做的是考试相关的业务,会出现很多富文本编辑器,所以要保证id的唯一性
如果需要可以下载相关代码 uuid2 方法代码
如果富文本编辑器不会重复出现,把domId写死就行了
4).按需引入,然后组件传值,就行了
显示效果如下,功能还是挺全的