JaneYork
commented
3 months ago <template>
<div>
<!-- <div>-->
<!-- <button @click="printEditorHtml">print html</button>-->
<!-- <button @click="getEditorText">print text</button>-->
<!-- </div>-->
<div style="border: 1px solid #ccc; margin-top: 10px">
<!-- 工具栏 -->
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
<!-- 编辑器 -->
<Editor
style="height: 400px; overflow-y: hidden"
:defaultConfig="editorConfig"
v-model="html"
@onChange="onChange"
@onCreated="onCreated"
/>
</div>
<!-- <div style="margin-top: 10px">-->
<!-- <textarea v-model="html" readonly style="width: 100%; height: 200px; outline: none"></textarea>-->
<!-- </div>-->
</div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor-next/editor-for-vue2'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
export default {
name: 'WangNextEditor',
props: {
value: {
type: String,
default: '',
},
},
components: { Editor, Toolbar },
data() {
return {
uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload',
headers: {
Authorization: 'Bearer ' + storage.get(ACCESS_TOKEN),
Accept: 'application/json, text/plain, */*'
},
editor: null,
html: '',
toolbarConfig: {
// toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
// excludeKeys: [ /* 隐藏哪些菜单 */ ],
},
editorConfig: {
placeholder: '请输入内容...',
// autoFocus: false,
// 所有的菜单配置，都要在 MENU_CONF 属性下
MENU_CONF: {},
},
}
},
created() {
this.editorConfig.MENU_CONF['uploadImage'] = {
server: this.uploadImgUrl,
// server: '/api/upload-img-10s', // test timeout
// server: '/api/upload-img-failed', // test failed
// server: '/api/xxx', // test 404
timeout: 5 * 1000, // 5s
fieldName: 'file',
meta: { token: 'xxx', a: 100 },
metaWithUrl: true, // join params to url
headers: this.headers,
maxFileSize: 10 * 1024 * 1024, // 10M
base64LimitSize: 1 * 1024, // insert base64 format, if file's size less than 5kb
// maxNumberOfSize: 1,
onBeforeUpload(file) {
console.log('onBeforeUpload', file)
return file // will upload this file
// return false // prevent upload
},
onProgress(progress) {
console.log('onProgress', progress)
},
onSuccess(file, res) {
console.log('onSuccess', file, res)
},
onFailed(file, res) {
alert(res.message)
console.log('onFailed', file, res)
},
onError(file, err, res) {
alert(err.message)
console.error('onError', file, err, res)
},
customInsert(res, insertFn) {
console.log('customInsert', res)
const imgInfo = res.data
const { url, alt, href } = imgInfo
if (!url) throw new Error(`Image url is empty`)
console.log('Your image url ', url)
insertFn(url, 'pusdn', '')
},
// customUpload(file, insertFn) {
// console.log('customUpload', file)
// return new Promise((resolve) => {
// // Simulate async insert image
// setTimeout(() => {
// const src = `https://www.baidu.com/img/flexible/logo/pc/result@2.png?r=${Math.random()}`
// insertFn(src, 'baidu logo', src)
// resolve('ok')
// }, 500)
// })
// },
// customBrowseAndUpload(insertFn) {
// alert('Custom browse and upload')
// // Simulate async insert image
// setTimeout(() => {
// const src = 'https://www.baidu.com/img/flexible/logo/pc/result@2.png'
// insertFn(src, 'baidu logo', src) // insert a image
// }, 500)
// },
}
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
console.log(this.editor.id)
},
onChange(editor) {
console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
this.$emit('input', editor.getHtml())
},
getEditorText() {
const editor = this.editor
if (editor == null) return
console.log(editor.getText()) // 执行 editor API
},
printEditorHtml() {
const editor = this.editor
if (editor == null) return
console.log(editor.getHtml()) // 执行 editor API
},
},
watch: {
value: {
handler (val) {
// if (val !== this.currentValue) {
// this.currentValue = val === null ? '' : val
// if (this.editor) {
// this.editor.txt.html(this.currentValue)
// }
// }
// if (this.editor) {
// // 假设你有一个方法来设置编辑器的HTML
// this.editor.setContent(this.html = newVal)
// }
this.html = val
},
immediate: true
}
},
mounted() {
// 模拟 ajax 请求，异步渲染编辑器
// setTimeout(() => {
// this.html = '<p>Ajax 异步设置内容 HTML</p>'
// }, 1500)
},
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
},
}
</script>
<style src="@wangeditor-next/editor/dist/css/style.css"></style>使用组件
<WangNextEditor v-model="form.details" />
<WangNextEditor v-model="form.details2" />
<WangNextEditor v-model="form.details3" />
cycleccc
bug 描述
【BUG】vue2多个编辑器复制粘贴报错
你预期的样子是？
控制台报错
系统和浏览器及版本号
wangEditor-next 版本
demo 能否复现该 bug ？
能
在线 demo