一个简单方便的富文本编辑器wangEditor

最新推荐文章于 2024-08-14 15:16:27 发布

weixin_33937913

最新推荐文章于 2024-08-14 15:16:27 发布

阅读量217

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/pingheyongfeng/blog/2413682

本文详细介绍如何在Angular2项目中集成wangEditor富文本编辑器，包括安装、配置及使用方法，提供具体代码示例及自定义上传图片事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

###我用的框架是angular2

1.使用npm install wangEditor

	还得在首页<script type="text/javascript" src="./assets/component/ueditorName/wangEditor.min.js"></script>
	在官网有可以下载 我用的wangEditor是版本号3的

2.在html页面中使用

	<div id="editor">
    	<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
	</div>

3.在ts里面做配置信息

 <div>我的因为是angular2使用这个wangEditor还要提前申明</div> declare let wangEditor:any;
 var E = wangEditor;
    var editor = new E('#editor');
    editor.customConfig.uploadImgServer = 'https://tdi-mmes.com/cmsComm/fileUpload';// 这是上传服务的url地址
    editor.customConfig.uploadFileName = 'file';//添加一个file的属性
    editor.customConfig.withCredentials = true//可以携带cookie信息
    // 颜色
    editor.customConfig.colors = [
        '#000000',
        '#eeece0',
        '#1c487f',
        '#4d80bf',
        '#c21e4d',
        '#8baa4a',
        '#7b5ba1',
        '#46acc8',
        '#f9963b',
        '#ffffff',
        '#C21E4D',
        '#30C223',
        '#3BC2B4',
        '#C2B42F',
        '#C28849',
        '#C24423'

    ];
    editor.customConfig.uploadImgHooks = {

        success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            var url = result.data[0] //这是返回的结果再插入编辑文本器中
            insertImg("http://img.gxcards.com/"+url)
            console.log(result);

            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
    };

    editor.create()

使用手册地址

	<a href="https://my.oschina.net/pingheyongfeng/blog/write">链接</a>

转载于:https://my.oschina.net/pingheyongfeng/blog/2413682