This commit is contained in:
faiz 2024-07-02 16:01:21 +08:00
parent 3dfac101ca
commit 0cf6219601
2 changed files with 119 additions and 9 deletions

View File

@ -0,0 +1,95 @@
<template>
<div style="border: 1px solid #ccc" class="relative">
<div v-if="disabled" class="disable-layer" />
<Toolbar ref="toolbar" style="border-bottom: 1px solid #ccc" :editor="editor" :default-config="toolbarConfig" :mode="mode" />
<Editor style="height: 300px; overflow-y: hidden" :value="value" :default-config="editorConfig" :mode="mode" @input="handleInput" @onCreated="onCreated" />
</div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
export default {
name: 'WangEditor',
components: { Editor, Toolbar },
props: {
value: String,
disabled: Boolean,
cusHeight: {
type: String,
default: '250px'
}
},
data() {
return {
editor: null,
html: '',
toolbarConfig:{
toolbarKeys:[
'headerSelect',
"blockquote",
"header1",
"header2",
"header3",
"|",
"bold",
"underline",
"italic",
"through",
"color",
"bgColor",
"clearStyle",
"|",
"bulletedList",
"numberedList",
"todo",
"justifyLeft",
"justifyRight",
"justifyCenter",
"|",
"insertLink",
"insertTable",
"codeBlock",
"|",
"undo",
"redo",
]
},
editorConfig: {
placeholder: '请输入内容...'
},
mode: 'default'
}
},
mounted() {},
created() {},
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() //
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor) // Object.seal()
},
handleInput(value) {
console.log(value)
this.$emit('input', value)
}
}
}
</script>
<style lang="scss" scoped>
.disable-layer {
width: 100%;
height: 100%;
background: #f5f7fa;
position: absolute;
top: 0;
left: 0;
z-index: 99;
opacity: 0.5;
}
</style>

View File

@ -61,9 +61,11 @@
</div> </div>
<div>内容</div> <div>内容</div>
<div style="border: 1px solid #ccc;"> <div style="border: 1px solid #ccc;">
<Toolbar <myEditor :value="item.content" />
<!-- <Toolbar
style="border-bottom: 1px solid #ccc" style="border-bottom: 1px solid #ccc"
:editor="editor" :editor="editor"
:key="index"
:defaultConfig="toolbarConfig" :defaultConfig="toolbarConfig"
:mode="mode" :mode="mode"
/> />
@ -74,7 +76,7 @@
:mode="mode" :mode="mode"
@onChange="onChange" @onChange="onChange"
@onCreated="onCreated" @onCreated="onCreated"
/> /> -->
</div> </div>
<!-- <el-input v-model="item.content" :rows="4" type="textarea" placeholder="内容" />--> <!-- <el-input v-model="item.content" :rows="4" type="textarea" placeholder="内容" />-->
</div> </div>
@ -150,11 +152,13 @@
</div> </div>
<div>内容</div> <div>内容</div>
<div style="border: 1px solid #ccc;"> <div style="border: 1px solid #ccc;">
<Toolbar <myEditor :value="item.content"/>
<!-- <Toolbar
style="border-bottom: 1px solid #ccc" style="border-bottom: 1px solid #ccc"
:editor="editor" :editor="editor"
:defaultConfig="toolbarConfig" :defaultConfig="toolbarConfig"
:mode="mode" :mode="mode"
:key="index"
/> />
<Editor <Editor
style="height: 400px; overflow-y: hidden;" style="height: 400px; overflow-y: hidden;"
@ -163,7 +167,7 @@
:mode="mode" :mode="mode"
@onChange="onChange" @onChange="onChange"
@onCreated="onCreated" @onCreated="onCreated"
/> /> -->
</div> </div>
<!-- <el-input v-model="item.content" :rows="4" type="textarea" placeholder="内容" />--> <!-- <el-input v-model="item.content" :rows="4" type="textarea" placeholder="内容" />-->
</div> </div>
@ -212,15 +216,25 @@
<script> <script>
import Pagination from '@/components/PaginationFixed' import Pagination from '@/components/PaginationFixed'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue' import myEditor from './components/wangeditor'
// import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default { export default {
name: 'GetQa', name: 'getQa',
components: { Pagination, Editor, Toolbar }, // components: { Pagination, Editor, Toolbar },
components: { Pagination, myEditor},
data() { data() {
return { return {
editor: null, editor: null,
toolbarConfig: { }, toolbarConfig:{
toolbarKeys:[
'headerSelect',
'|',
//
'bold','italic',
]
},
editorConfig: { placeholder: '请输入内容...' }, editorConfig: { placeholder: '请输入内容...' },
mode: 'default', // or 'simple' mode: 'default', // or 'simple'
@ -259,10 +273,11 @@ export default {
}, },
methods: { methods: {
onCreated(editor) { onCreated(editor) {
console.log('onCreated', editor);
this.editor = Object.seal(editor) // Object.seal() this.editor = Object.seal(editor) // Object.seal()
}, },
onChange(editor) { onChange(editor) {
console.log("onChange", editor.getHtml()); // onChange // console.log("onChange", editor.getHtml()); // onChange
}, },
handleAdd(){ handleAdd(){
this.anchors.qaQuestions.push({ this.anchors.qaQuestions.push({