1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- <template>
- <div>
- <h1>富文本编辑器</h1>
- <div class="edit_container">
- <quill-editor
- :options="editorOption"
- @blur="onEditorBlur($event)"
- @change="onEditorChange($event)"
- @focus="onEditorFocus($event)"
- ref="myQuillEditor"
- v-model="content"
- ></quill-editor>
- <el-button plain @click="saveHtml">保存</el-button>
- </div>
- <h1>markdown编辑器</h1>
- <div class="edit">
- <mavon-editor v-model="model.content"></mavon-editor>
- <el-button type="primary" size="small" @click="submit">发表</el-button>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'App',
- data() {
- return {
- content: `<p>hello world</p>`,
- editorOption: {},
- model:{
- content:''
- }
- }
- },
- computed: {
- editor() {
- return this.$refs.myQuillEditor.quill
- }
- },
- methods: {
- // onEditorReady(editor) { // 准备编辑器
- // },
- onEditorBlur() {}, // 失去焦点事件
- onEditorFocus() {}, // 获得焦点事件
- onEditorChange() {}, // 内容改变事件
- saveHtml() {
- console.log(this.content)
- }, // 保存方法
- submit(){}
- }
- }
- </script>
|