ElementUI生成富文本编辑器
1.安装插件npm install vue-quill-editor --save安装成功后在package.json中查看2.全局引入插件(main.js)import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'...
·
1.安装插件
npm install vue-quill-editor --save
安装成功后在package.json中查看
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.页面实现
<template>
<div class="body">
<h2>富文本编辑器</h2>
<quill-editor ref="text" v-model="content" class="editor" :options="editorOption"/>
<el-button class="button" @click="onEditor">提交</el-button>
</div>
</template>
<script>
export default {
data() {
return {
content: "",
editorOption: {},
};
},
methods: {
onEditor() {
console.log("富文本内容=",this.$refs.text.value);
},
},
};
</script>
<style lang="less" scoped>
.body {
height: 700px;
.editor {
height: 500px;
}
.button {
margin-left: 50%;
margin-top: 50px;
}
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)