在商城的项目里面需要添加新闻，使用富文本编辑器，我用的是
wangEditor这个编辑器挺好用的，而且也方便简单，官网也是中文的wangEditor
这是做的添加新闻的页面
我用的是SCUI框架,引入的是npm,具体可看官网
npm install @wangeditor/editor-for-vue --savehtml的页面
<template><el-form :model="form" :rules="rules" label-width="100px"label-position="rigth"><el-form-item label="标题" prop="title"><el-input v-model="form.title" placeholder="请输入标题" clearable></el-input></el-form-item><el-form-item label="正文" prop="content"><div style="border: 1px solid #ccc;" >//编辑器<Toolbarstyle="border-bottom: 1px solid #ccc":editor="editor":defaultConfig="toolbarConfig":mode="model"/><Editorstyle="height: 500px; overflow-y: hidden;"v-model="form.content":defaultConfig="editorConfig":mode="model"@onCreated="onCreated"/></div></el-form-item></el-form>
</template>js
<script>
//引入编辑器 和 编辑器样式
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'export default {components: { Editor, Toolbar },//编辑器data() {form: {id: null,content: null,title: null},editor: null,toolbarConfig: { },editorConfig: {placeholder: "请输入内容...",// 所有的菜单配置，都要在 MENU_CONF 属性下MENU_CONF: {//配置上传图片uploadImage: {customUpload: this.uploadImg,},},},model: 'default', // or 'simple'//验证规则rules: {title: [{required: true, message: '请输入标题'}],content: [{required: true, message: '请输入正文'}]},}},methods: {//编辑器onCreated(editor) {this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错}, //编辑器里面的图片async uploadImg(file, insertFn) {let imgData = new FormData();imgData.append("file", file);调自己配置的接口，上传图片(imgData).then((res) => {let url = res.data;//获取后台返回的图片数据insertFn(url);//渲染到页面});},
}
</script>
