商城后台管理系统---＞新闻简报（富文本编辑器,文章，图片上传）

在商城的项目里面需要添加新闻，使用富文本编辑器，我用的是

wangEditor这个编辑器挺好用的，而且也方便简单，官网也是中文的wangEditor

这是做的添加新闻的页面

我用的是SCUI框架,引入的是npm,具体可看官网

npm install @wangeditor/editor-for-vue --save

html的页面

<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;" >
          //编辑器
            <Toolbar
             style="border-bottom: 1px solid #ccc"
             :editor="editor"
             :defaultConfig="toolbarConfig"
             :mode="model"
            />
           <Editor
             style="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>