欢迎使用 wangEditor-Antd 富文本编辑器
文档 github 下载

欢迎使用 wangEditor-Antd 富文本编辑器

Wangeditor-antd

基于ant-design风格重构的wangeditor富文本编辑器,主要趋于样式重构,javascript部分未修改。

修改说明

基础配置和官方原文的一致

  • 重构图标
  • 重构下拉样式
  • 重构input输入框
  • 新增配置minHeihgtmaxheightextBgColor

安装

直接使用

下载zip,将目录中 dist/wange-ditor-antd.js或是dist/wange-ditor-antd.js引入项目直接调取

<script src="./dist/wang-editor-antd.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#editor')
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.customConfig.uploadImgServer = '/upload'
    editor.create()
</script>

在Vue中使用

npm install wangeditor-antd --save //或是使用cnpm

components形式使用

<template>
    <div ref="editor"></div>
</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;
            editor.customConfig.uploadImgParams = {
                from: 'editor'
            };
            editor.create();
            //如果默认传递content值则渲染默认内容
            if(this.content){
                editor.txt.html(this.content)
            }
        }
    }
</script>