vue+element-ui 使用富文本编辑器

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

npm安装编辑器组件
npm install vue-quill-editor –save

在components文件夹创建ue.vue组件，如下

ue.vue代码如下：

<!-- 组件代码如下 -->
<template>
<div>
<script id="editor" type="text/plain"></script>
</div>
</template>
<script>
export default {
name: \'UE\',
data() {
return {
editor: null
}
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object
}
},
mounted() {
const _this = this;
this.editor = UE.getEditor(\'editor\', this.config); // 初始化UE
this.editor.addListener("ready", function () {
_this.editor.setContent(_this.defaultMsg) // 确保UE加载完成后，放入内容。
});
},
methods: {
getUEContent() { // 获取内容方法
return this.editor.getContent()
}
},
destroyed() {
this.editor.destroy()
}
}

</script>

页面代码部分
<template>
<div>
<el-card style="height: 610px;">
<quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
</quill-editor>
</el-card>
</div>
</template>

<script>
import {
quillEditor
} from \'vue-quill-editor\'
import \'quill/dist/quill.core.css\'
import \'quill/dist/quill.snow.css\'
import \'quill/dist/quill.bubble.css\'
export default {
name: \'FuncFormsEdit\',
components: {
quillEditor
},
data() {
return {
content: null,
editorOption: {}
}
}
}

</script>

<style scoped>
</style>


以上就是简单的在vue+element-ui 使用富文本编辑器，效果图如下


接下来，我们可以美化一下编辑器菜单栏。修改页面代码，如下：

<template>
<div>
<el-card style="height: 610px;">
<quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
<!-- 自定义toolar -->
<div id="toolbar" slot="toolbar">
<!-- Add a bold button -->
<button class="ql-bold" title="加粗">Bold</button>
<button class="ql-italic" title="斜体">Italic</button>
<button class="ql-underline" title="下划线">underline</button>
<button class="ql-strike" title="删除线">strike</button>
<button class="ql-blockquote" title="引用"></button>
<button class="ql-code-block" title="代码"></button>
<button class="ql-header" value="1" title="标题1"></button>
<button class="ql-header" value="2" title="标题2"></button>
<!--Add list -->
<button class="ql-list" value="ordered" title="有序列表"></button>
<button class="ql-list" value="bullet" title="无序列表"></button>
<!-- Add font size dropdown -->
<select class="ql-header" title="段落格式">
<option selected>段落</option>
<option value="1">标题1</option>
<option value="2">标题2</option>
<option value="3">标题3</option>
<option value="4">标题4</option>
<option value="5">标题5</option>
<option value="6">标题6</option>
</select>
<select class="ql-size" title="字体大小">
<option value="10px">10px</option>
<option value="12px">12px</option>
<option value="14px">14px</option>
<option value="16px" selected>16px</option>
<option value="18px">18px</option>
<option value="20px">20px</option>
</select>
<select class="ql-font" title="字体">
<option value="SimSun">宋体</option>
<option value="SimHei">黑体</option>
<option value="Microsoft-YaHei">微软雅黑</option>
<option value="KaiTi">楷体</option>
<option value="FangSong">仿宋</option>
<option value="Arial">Arial</option>
</select>
<!-- Add subscript and superscript buttons -->
<select class="ql-color" value="color" title="字体颜色"></select>
<select class="ql-background" value="background" title="背景颜色"></select>
<select class="ql-align" value="align" title="对齐"></select>
<button class="ql-clean" title="还原"></button>
<!-- You can also add your own -->
</div>
</quill-editor>
</el-card>
</div>
</template>

<script>
import {
Quill,
quillEditor
} from \'vue-quill-editor\'
import \'quill/dist/quill.core.css\'
import \'quill/dist/quill.snow.css\'
import \'quill/dist/quill.bubble.css\'

//引入font.css
import \'../../../assets/css/font.css\'

// 自定义字体大小
let Size = Quill.import(\'attributors/style/size\')
Size.whitelist = [\'10px\', \'12px\', \'14px\', \'16px\', \'18px\', \'20px\']
Quill.register(Size, true)

// 自定义字体类型
var fonts = [\'SimSun\', \'SimHei\', \'Microsoft-YaHei\', \'KaiTi\', \'FangSong\', \'Arial\', \'Times-New-Roman\', \'sans-serif\',
\'宋体\', \'黑体\'
]
var Font = Quill.import(\'formats/font\')
Font.whitelist = fonts
Quill.register(Font, true)

export default {
name: \'FuncFormsEdit\',
components: {
quillEditor
},
data() {
return {
content: null,
editorOption: {
placeholder: "请输入",
theme: "snow", // or \'bubble\'
modules: {
toolbar: {
container: \'#toolbar\'
}
}
}
}
}
}
</script>

<style scoped>
</style>


在 asset 文件夹下新建font.css 文件，如下图

font.css代码如下：

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
content: "宋体";
font-family: "SimSun";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
content: "黑体";
font-family: "SimHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
content: "微软雅黑";
font-family: "Microsoft YaHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
content: "楷体";
font-family: "KaiTi";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
content: "仿宋";
font-family: "FangSong";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
content: "Arial";
font-family: "Arial";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
content: "Times New Roman";
font-family: "Times New Roman";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
content: "sans-serif";
font-family: "sans-serif";
}

.ql-font-SimSun {
font-family: "SimSun";
}

.ql-font-SimHei {
font-family: "SimHei";
}

.ql-font-Microsoft-YaHei {
font-family: "Microsoft YaHei";
}

.ql-font-KaiTi {
font-family: "KaiTi";
}

.ql-font-FangSong {
font-family: "FangSong";
}

.ql-font-Arial {
font-family: "Arial";
}

.ql-font-Times-New-Roman {
font-family: "Times New Roman";
}

.ql-font-sans-serif {
font-family: "sans-serif";
}


设置后的效果如下图

原文件：https://blog.csdn.net/TauCrus/article/details/88801941

以上是 vue+element-ui 使用富文本编辑器 的全部内容， 来源链接： utcz.com/z/377343.html

回到顶部