vue-quill-editor组件基本用法

243 阅读1分钟

1.配置富文本工具栏,需要用option属性,传入配置项

<el-form 
:model="ruleForm" 
:rules="rules" 
ref="ruleForm" 
label-width="100px" 
class="demo-ruleForm">
    <el-form-item label="答案解析:" prop="answer" class="select">
            <quillEditor
            :options="editorOption"
            v-model="ruleForm.answer"
            style="width: 1332px" />
</el-form-item>

// 配置项设置
data(){
    return {
          editorOption: {
          placeholder: '',
          modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'],
              [{ list: 'ordered' }, { list: 'bullet' }],
              ['blockquote'],
              ['code-block', 'image', 'link']
            ]
          }
       }
    }
}

2.内容区域高度设置 应该直接给类名 ql-container 设置高度,否则会出现下面的标准流盒子样式位置发生偏移

<style>
.ql-container{
    height: 200px;
}
</style>