发表于： 2019-10-06 23:26:40
1 679
今天完成的事情：
1.今天换了一个富文本，成功显示使用了：
<template>
<div class="edit_container">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
></quill-editor>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
content: `<p>在此添加内容</p>`,
editorOption: {
theme: "snow"
},
};
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
}
},
methods: {
onEditorReady(editor) {
// 准备编辑器
},
onEditorBlur() {}, // 失去焦点事件
onEditorFocus() {}, // 获得焦点事件
onEditorChange() {}, // 内容改变事件
saveHtml: function(event) {
alert(this.content);
}
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.ql-toolbar.ql-snow {
max-height: 80px;
}
.ql-editor {
min-height: 150px;
}
</style>
main.js：
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
明天计划：
1.学习一下路由守卫，然后进行复盘ppt的编辑
返回列表
评论