- ckeditor: 老牌,稳定,扩展性、功能性强。
- quill: 项目比较新,稳定,扩展性高、功能性好。
- medium-editor: 老牌,维护的一般,较长时间未更新。
- wangEditor: 国货,使用方便。
- ueditor: 百度业务集成,稳定,已不再维护。
- tinymce: 功能和扩展性都不错。
该怎样选择?
- 功能、生态强大
- 近期还在维护的
上传图片配置
-
如不经过配置,上传图片只能输入网络链接地址‘’
-
如需要支持本地上传:配置接口
参考:wangEditor 官方配置文档
配置代码
// @/components/TextEditor/index.vue
<template>
<div ref="editor" class="text-editor"></div>
</template>
<script lang="ts">
import Vue from "vue";
import E from "wangeditor";
export default Vue.extend({
name: "TextEditor",
props: {
// 拿取父组件传入的 v-model 对象
value: {
type: String,
default: "",
},
},
// 组件已经渲染好,可以初始化操作 DOM 了
mounted() {
this.initEditor();
},
methods: {
initEditor() {
const editor = new E(this.$refs.editor as any);
// 注意:事件监听必须在 create 之前
editor.config.onchange = (value: string) => {
// 将变化的数据同步给父组件 v-model 的对象
this.$emit("input", value);
};
editor.create();
// 注意:设置初始化必须在 create 之后
editor.txt.html(this.value);
},
},
});
</script>
<style lang="scss" scoped></style>