iceEditor

=>源码在此处

ps:此富文本编辑器优点是可以直接通过js引入,便捷使用,缺点是教程太少,二次开发较为麻烦

项目中导入图片时,ice编辑器默认是粘贴时图片多大,富文本内图片的显示多大,需求是添加一个自定义组件可以选中富文本内图片时可以去更改图片大小,此处参考的源码插件开发这一块,如下图

根据插件开发的代码,弄好后如下图 

逻辑就是获取选中图片的html代码,然后通过replace转换成加上style样式代码的html,然后插到原来的位置,其实源码里面都写好了,就是找起来比较麻烦

ice.editor("editorContent", (iceEditor: any) => {
                    iceEditor.plugin({
                        menu:'弹窗演示',
                        name:'popup',
                        style:'.demo-p{margin-bottom:10px}.demo-button{padding:0 10px}',
                        popup:{
                            width:320,
                            height:100,
                            title:'我是一个demo',
                            content:'<div class="iceEditor-group"><label>宽：</label><input type="text" class="iceEditor-inputWidth" placeholder="宽" value="" /><label>高：</label><input type="text" class="iceEditor-inputHeight" placeholder="高" value="" /><i class="iceEditor-btn pic-button">确定</i></div>',
                        },
                        success:function(e,z){
                            //获取content中的按钮
                            var btn = e.getElementsByTagName('i')[0];
                            // //设置点击事件
                            var width = e.getElementsByTagName('input')[0]
                            var height = e.getElementsByTagName('input')[1]
                            btn.onclick= function() {
                                let imgWidth,
                                    imgHeight
                                if (width.value.trim()) imgWidth = width.value.trim();
						        if (height.value.trim()) imgHeight = height.value.trim();
                                console.log(width,height)
                                var str = z.getSelectHTML().replace(/<img/g,`<img style="width:${imgWidth}px;height:${imgHeight}px"`);
                                console.log(str)
								var image = z.c('p');
                                image.innerHTML = str
                                z.setHTML(image, true);
                                z.pd();
                                // 关闭本弹窗
                                e.close()
                            }	
                        }
                    });