在vue項目中使用富文本編輯器（vue自帶的編輯器vue-quill-editor'）
1.下包npm i??vue-quill-editor
2.在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);
3.在頁面中使用
<quill-editor class="editor"
? ? ? ? ? ? ? ? ? ? ref="myTextEditor"
? ? ? ? ? ? ? ? ? ? v-model="content"
? ? ? ? ? ? ? ? ? ? :options="editorOption"
? ? ? ? ? ? ? ? ? ? @blur="onEditorBlur($event)"
? ? ? ? ? ? ? ? ? ? @focus="onEditorFocus($event)"
? ? ? ? ? ? ? ? ? ? @ready="onEditorReady($event)"
? ? ? ? ? ? ? ? ? ? @change="onEditorChange($event)">
? ? ? ? ? ? ? </quill-editor>
export default {
data(){
? ? return {
? ? ? ? content: null,
? ? ? ? ? ? contenttype: null,
? ? ? ? ? ? editorOption: {
? ? ? ? ? ? ? modules: {
? ? ? ? ? ? ? ? toolbar: [
? ? ? ? ? ? ? ? ? ["bold", "italic", "underline", "strike"], // 加粗 斜體 下劃線 刪除線
? ? ? ? ? ? ? ? ? ["blockquote", "code-block"], // 引用? 代碼塊
? ? ? ? ? ? ? ? ? [{ header: 1 }, { header: 2 }], // 1氓拼、2 級標(biāo)題
? ? ? ? ? ? ? ? ? [{ list: "ordered" }, { list: "bullet" }], // 有序你画、無序列表
? ? ? ? ? ? ? ? ? [{ script: "sub" }, { script: "super" }], // 上標(biāo)/下標(biāo)
? ? ? ? ? ? ? ? ? [{ indent: "-1" }, { indent: "+1" }], // 縮進(jìn)
? ? ? ? ? ? ? ? ? // [{'direction': 'rtl'}],? ? ? ? ? ? ? ? ? ? ? ? // 文本方向
? ? ? ? ? ? ? ? ? [{ size: ["small", false, "large", "huge"] }], // 字體大小
? ? ? ? ? ? ? ? ? [{ header: [1, 2, 3, 4, 5, 6, false] }], // 標(biāo)題
? ? ? ? ? ? ? ? ? [{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色
? ? ? ? ? ? ? ? ? [{ font: [] }], // 字體種類
? ? ? ? ? ? ? ? ? [{ align: [] }], // 對齊方式
? ? ? ? ? ? ? ? ? ["clean"], // 清除文本格式
? ? ? ? ? ? ? ? ? ["link", "image", "video"] // 鏈接桃漾、圖片坏匪、視頻
? ? ? ? ? ? ? ? ], //工具菜單欄配置
? ? ? ? ? ? ? },
? ? ? ? ? ? ? placeholder: '請輸入內(nèi)容...', //提示
? ? ? ? ? ? ? readyOnly: false, //是否只讀
? ? ? ? ? ? ? theme: 'snow', //主題 snow/bubble
? ? ? ? ? ? ? syntax: true, //語法檢測
? ? },
? ? }
? },
computed:{
? ? ? editor() {
? ? ? ? ? ? return this.$refs.myTextEditor.quillEditor;
? ? ? ? ? }
? },
methods:{
? ? ? // 失去焦點(diǎn)
? ? ? ? ? onEditorBlur(editor) {},
? ? ? ? ? // 獲得焦點(diǎn)
? ? ? ? ? onEditorFocus(editor) {},
? ? ? ? ? // 開始
? ? ? ? ? onEditorReady(editor) {},
? ? ? ? ? // 值發(fā)生變化
? ? ? ? ? onEditorChange(editor) {
? ? ? ? ? ? this.content = editor.text;
? ? ? ? ? }
? },
}
