You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
3.0 KiB
124 lines
3.0 KiB
<template>
|
|
<!--工具条1-->
|
|
<!--如果有更多工具条,放开此注释
|
|
<el-col :span="24" class="toolbar" size="small" style="padding-bottom: 0px;">
|
|
<el-col :span="4">
|
|
</el-col>
|
|
</el-col>
|
|
-->
|
|
|
|
<!--新增界面 Archive 档案信息表-->
|
|
|
|
<quill-editor ref="archiveContextEditor"
|
|
v-model="value"
|
|
:options="editorOption"
|
|
@blur="onEditorBlur($event)"
|
|
@focus="onEditorFocus($event)"
|
|
@ready="onEditorReady($event)">
|
|
</quill-editor>
|
|
</template>
|
|
|
|
<script>
|
|
//begin富文本编辑器
|
|
import { quillEditor,Quill } from 'vue-quill-editor'
|
|
import 'quill/dist/quill.core.css'
|
|
import 'quill/dist/quill.snow.css'
|
|
import 'quill/dist/quill.bubble.css'
|
|
import { ImageDrop } from 'quill-image-drop-module'
|
|
import ImageResize from 'quill-image-resize-module'
|
|
Quill.register('modules/imageDrop', ImageDrop)
|
|
Quill.register('modules/imageResize', ImageResize)
|
|
//end 富文本编辑器
|
|
export default {
|
|
props:['value']
|
|
data() {
|
|
return {
|
|
editorOption: {
|
|
modules: {
|
|
toolbar: [
|
|
[{ 'size': ['small', false, 'large'] }],
|
|
['bold', 'italic'],
|
|
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
|
|
['link', 'image']
|
|
],
|
|
history: {
|
|
delay: 1000,
|
|
maxStack: 50,
|
|
userOnly: false
|
|
},
|
|
imageDrop: true,
|
|
imageResize: {
|
|
displayStyles: {
|
|
backgroundColor: 'black',
|
|
border: 'none',
|
|
color: 'white'
|
|
},
|
|
modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
computed: {
|
|
contentCode() {
|
|
return hljs.highlightAuto(this.content).value
|
|
},
|
|
},
|
|
methods: {
|
|
onEditorBlur(editor) {
|
|
// console.log('editor blur!', editor)
|
|
},
|
|
onEditorFocus(editor) {
|
|
// console.log('editor focus!', editor)
|
|
},
|
|
onEditorReady(editor) {
|
|
// console.log('editor ready!', editor)
|
|
}
|
|
},
|
|
components: {
|
|
//在下面添加其它组件 'archive-edit':ArchiveEdit
|
|
'quill-editor':quillEditor
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.quill-editor:not(.bubble) .ql-container,
|
|
.quill-editor:not(.bubble) .ql-container .ql-editor {
|
|
height: 30rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.quill-editor,
|
|
.quill-code {
|
|
width: 50%;
|
|
float: left;
|
|
}
|
|
.quill-code {
|
|
height: auto;
|
|
border: none;
|
|
> .title {
|
|
border: 1px solid #ccc;
|
|
border-left: none;
|
|
height: 3em;
|
|
line-height: 3em;
|
|
text-indent: 1rem;
|
|
font-weight: bold;
|
|
}
|
|
> code {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 1rem;
|
|
border: 1px solid #ccc;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-radius: 0;
|
|
height: 30rem;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
</style>
|