|
|
|
@@ -0,0 +1,83 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div class="edit_container"> |
|
|
|
<quill-editor |
|
|
|
style="height:500px;" |
|
|
|
v-model="content" |
|
|
|
ref="myQuillEditor" |
|
|
|
:options="editorOption" |
|
|
|
@blur="onEditorBlur($event)" |
|
|
|
@focus="onEditorFocus($event)" |
|
|
|
@change="onEditorChange($event)" |
|
|
|
> |
|
|
|
</quill-editor> |
|
|
|
</div> |
|
|
|
<div style="margin-top:100px;"> |
|
|
|
<el-button @click="upload">确定</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { quillEditor } from "vue-quill-editor"; //调用编辑器 |
|
|
|
import "quill/dist/quill.core.css"; |
|
|
|
import "quill/dist/quill.snow.css"; |
|
|
|
import "quill/dist/quill.bubble.css"; |
|
|
|
// 原型 |
|
|
|
// https://blog.csdn.net/senmage/article/details/82388728 |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
content: ``, |
|
|
|
editorOption: { |
|
|
|
placeholder: "请在这里输入", |
|
|
|
modules: { |
|
|
|
toolbar: [ |
|
|
|
["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线 |
|
|
|
["blockquote", "code-block"], //引用，代码块 |
|
|
|
[{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小 |
|
|
|
[{ list: "ordered" }, { list: "bullet" }], //列表 |
|
|
|
[{ script: "sub" }, { script: "super" }], // 上下标 |
|
|
|
[{ indent: "-1" }, { indent: "+1" }], // 缩进 |
|
|
|
[{ direction: "rtl" }], // 文本方向 |
|
|
|
[{ size: ["small", false, "large", "huge"] }], // 字体大小 |
|
|
|
[{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题 |
|
|
|
[{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色 |
|
|
|
[{ font: [] }], //字体 |
|
|
|
[{ align: [] }], //对齐方式 |
|
|
|
["clean"], //清除字体样式 |
|
|
|
["image", "video"], //上传图片、上传视频 |
|
|
|
], |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
components: { |
|
|
|
quillEditor, |
|
|
|
}, |
|
|
|
mounted() {}, |
|
|
|
computed: { |
|
|
|
editor() { |
|
|
|
return this.$refs.myQuillEditor.quill; |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
onEditorReady(editor) { |
|
|
|
// 准备编辑器 |
|
|
|
}, |
|
|
|
onEditorBlur() {}, // 失去焦点事件 |
|
|
|
onEditorFocus() {}, // 获得焦点事件 |
|
|
|
onEditorChange() {}, // 内容改变事件 |
|
|
|
upload() { |
|
|
|
console.log(this.content); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped > |
|
|
|
.edit_container{ |
|
|
|
height: 600px; |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
