基于ant-design v3 风格重构的wangeditor富文本编辑器,主要趋于样式重构,javascript部分未修改。
从wangeditor-team v3 版本重构风格
- 计划跟新适配Vue3
- 风格统一为 ant-design-vue 2.0风格
- 重构图标
- 重构下拉样式
- 重构input输入框
dist ---主文件
-- fonts --- 图标文件
-- wangeditor.css
-- wangeditor.js
index --- 演示html
直接下载,将release目录放入您的项目
引入 wang-editor-antd.js
或是wang-editor-antd.min.js
文件使用即可
//工具条高度 默认 50px small为40px
editor.customConfig.toolBarSize = 'small';
//最小高度 默认 100px
editor.customConfig.minHeight = '100px';
//最大高度 默认 500px
editor.customConfig.maxHeight = '200px';
npm install wangeditor-antd --save //推荐使用cnpm
//或是
yarn wangeditor-antd
在项目中使用如下
<template>
<section ref="editor">
</section>
</template>
<script>
import E from 'wangeditor-antd'
export default {
name: 'editor',
props:['get-full-text','content'], //回调方法
mounted() {
let editor = new E(this.$refs.editor);
editor.customConfig.onchange = (html) => {
this.getFullText(html) //内容赋值
};
editor.customConfig.uploadImgServer ='你的上传地址';
editor.customConfig.uploadFileName = 'file';
//新增
editor.customConfig.zIndex = 100;
//工具条高度 默认 50px small为40px
editor.customConfig.toolBarSize = 'small';
//最小高度 默认 100px
editor.customConfig.minHeight = '100px';
//最大高度 默认 500px
editor.customConfig.maxHeight = '200px';
editor.customConfig.menus=[
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'image', // 插入图片
];
editor.customConfig.uploadImgParams = {
from: 'editor'
};
editor.create();
//如果默认传递content值则渲染默认内容
if(this.content){
editor.txt.html(this.content)
}
}
}
</script>
更多详细使用文档请详细参考 wangeditor官方文档
wangeditor官方文档