according to the needs of the project, when editing rich text, there is a corresponding button on the side that can be clicked to add fixed-format text at the cursor.
such as:
in "111111" when the cursor clicks the button at the end, the text in the rich text will become "111111222" if the light changes after the first "1", it will become "122211111" this form
I directly in the click when the trigger function, directly at the end of the text in a fixed format, okay, I think too much.
<template>
<div>
<quill-editor
ref="myTextEditor"
v-model="content"
:config="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
>
</quill-editor>
<el-button
type="primary"
@click="demo"
>demo</el-button>
</div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
export default {
components: {
quillEditor
},
data() {
return {
content: "I am Example",
str: "",
editorOption: {
// something config
}
};
},
mounted() {
console.log("this is my editor", this.content);
},
computed: {
editor() {
return this.$refs.myTextEditor.quillEditor;
}
},
methods: {
//
onEditorBlur(editor) {
console.log("editor blur!", editor);
},
//
onEditorFocus(editor) {
console.log("editor focus!", editor);
},
//
onEditorReady(editor) {
console.log("editor ready!", editor);
},
//
onEditorChange({ editor, html, text }) {
// console.log("editor change!", editor, html, text)
this.content = html;
},
demo() {
let acc = "123456";
this.content = this.content + acc;
}
}
};
</script>is about a form like this