wangeditor-xr-expand

西软wangeidtor功能拓展。

安装

npm install --save wangeditor-xr-expand

使用

wangeidtor注册

//将封装好的模块插件汇总，再由wangeditor注册
import { jumpModule, editorPlugin } from "wangeditor-xr-expand"

const { elemsToHtml: jumpElemsToHtml,
    menus: jumpMenus,
    parseElemsHtml: jumpParseElemsHtml,
    renderElems: jumpRenderElems } = jumpModule;

export const module = {
    editorPlugin: editorPlugin,
    elemsToHtml: [...jumpElemsToHtml],
    menus: [...attachmentMenus, ...positioningMenus, ...jumpMenus],
    parseElemsHtml: [ ...jumpParseElemsHtml],
    renderElems: [...jumpRenderElems]
}
	
import { Boot } from "@wangeditor/editor"
Boot.registerModule(module);

}

定位功能

//index.html中引入地图相关js
<script src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
<script src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=申请的key"></script>
//增加代理配置
module.exports = {
  devServer: {
    //代理配置
    proxy: {
      '/ws': {
        target: 'https://apis.map.qq.com',
        changeOrigin: true,
      }
    },
  },
},

import { editorConfig } from "wangeditor-xr-expand/src/utils";
const positioningProperties = {
  mapKey: "申请的key",
  keyName: "key的名称",
};
editorConfig.setConfig("positioningProperties", positioningProperties);

}

跳转功能

//在全局配置类中设置跳转选项
const jumpProperties = {
  options: [
    { label: "描述", value: "跳转的路径" },
    { label: "test2", value: "https://www.baidu.com" },
  ],
};
editorConfig.setConfig("jumpProperties", jumpProperties);

样式

ps：需在入口文件处导入样式文件

import 'wangeditor-xr-expand/src/constants/css/style.css';

生成HTML

ps：需为不同的元素绑定对应的点击事件、处理样式

import { getHtml } from "wangeditor-xr-expand/src/utils";
const html = getHtml('标题', '富文本内容');
//上传html到文件服务器