基于ant-design风格重构的wangeditor富文本编辑器,可以用于vue

浏览:6929 发布日期:2020/05/22 分类:前端开发 关键字: wangeditor wangeditor-antd
wangeditor-antd
基于ant-design-vue风格重构的wangeditor富文本编辑器,主要趋于样式重构,javascript部分未修改。
截图演示

演示地址:https://top-dante.github.io/wangeditor-antd/index.html
github:https://github.com/top-dante/wangeditor-antd.git

修改部分说明
图标替换为ant-design图标,
输入框 下拉样式参考ant-design
新增自动minHeight和maxHeight限制


直接使用
直接下载,将dist目录放入您的项目
引入 wangeditor.css和wangeditor.js文件使用即可

在vue中使用npm install wangeditor-antd --save //推荐使用cnpm在项目中使用如下<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>
更多详细使用文档请详细参考 wangeditor官方文档
http://www.kancloud.cn/wangfupeng/wangeditor3/332599
最佳答案
评论( 相关
后面还有条评论,点击查看>>