smart-editor

一款基于 wangeditor 实现的富文本编辑器插件

本地项目初始化

yarn install

查看例子

yarn dev

组件打包

yarn run lib

基于 elementui，使用响应式处理元素 PC、手机样式

本地开发调试

本地项目 执行组件打包命令

yarn run lib

开启文件链接

yarn link

vue 项目中安装

yarn add @south-rd/smarthub-editor

本地项目环境安装本组件

项目链接引用

yarn link @south-rd/smarthub-editor

引入组件

import smarthubEditor from '@south-rd/smarthub-editor'
import '@south-rd/smarthub-editor/lib/smarthub-editor.css'
Vue.use(smarthubEditor)

使用组件

组件名称

<smarthub-editor></smarthub-editor>

组件参数

<template>
  <div id="app">
    <div style="width: 700px">
      <smarthub-editor
        :imgObj="imgObj"
        :emotions="emotions"
        :colorList="colorList"
        :newvalve.sync="newvalve"
        :id="id"
        :height="height"
        :max="max"
        :disabled="disabled"
        ref="editor"
      />
    </div>
  </div>
</template>
export default {
  name: "App",
  data() {
    return {
      imgObj: {
        headers: {},//配置上传图片请求头
        action: "",//上传图片接口地址
        initUrl: "",//显示图片url中的href
        title: "点击上传",
        text: "",
      },
      id: "div",//文本id可填可不填
      emotions: {
        // title: "表情组名字", // tab 的标题
        // type: "image", // 'emoji' 或 'image' ，即 emoji 形式或者图片形式
        // content: [
        //   {
        //     alt: "[坏笑]",
        //     src: ``,
        //   },
        //   { alt: "[舔屏]", src: `` },
        //   { alt: "[污]", src: `` },
        // ],
      },
      colorList: [],//配置颜色
      height:'600'
      newvalve:'',
      disabled:false,
      max:1
    };
  },
  methods: {
    getEditorData() {
      let data = this.$refs.editor.getEditorData();
      console.log(data);
    },
    clear() {
      this.$refs.editor.clear();
    },
  },
};