Problems with using pictures in ueditor rich text editor

The use of images in this editor has recently encountered two problems

1. After the image is uploaded, select the image, slide down the scroll bar and click the image again. The image is misaligned.

Find the attachTo function of the fiximgclick.js file and modify the top value in domUtils.setStyles

//修改前
'top': iframePos.y + imgPos.y - me.editor.document.body.scrollTop - editorPos.y - parseInt(resizer.style.borderTopWidth) + 'px'
                 
//修改后
'top': iframePos.y + imgPos.y - me.editor.document.documentElement.scrollTop - editorPos.y - parseInt(resizer.style.borderTopWidth) + 'px'

Please refer to the original text for this solution: http://t.zoukankan.com/douyage-p-10948748.html 

2. After the picture is selected, it cannot be released from the selected state. It requires multiple clicks to make the cursor appear.

Or find the fiximgclick.js file, pass the parameter true to hide, and make a judgment when receiving.

 Scale.prototype = {
            init: function (editor) {
                var me = this;
                me.editor = editor;
                me.startPos = this.prePos = { x: 0, y: 0 };
                me.dragId = -1;

                var hands = [],
                    cover = me.cover = document.createElement('div'),
                    resizer = me.resizer = document.createElement('div');

                cover.id = me.editor.ui.id + '_imagescale_cover';
                cover.style.cssText = 'position:absolute;display:none;z-index:' + (me.editor.options.zIndex) + ';filter:alpha(opacity=0); opacity:0;background:#CCC;';
                domUtils.on(cover, 'mousedown click', function () {
                    //传人参数 true
                    me.hide(true);
                });
hide: function (reset) {
                var me = this;
                me.hideCover();
                me.resizer.style.display = 'none';

                domUtils.un(me.resizer, 'mousedown', me.proxy(me._eventHandler, me));
                domUtils.un(me.doc, 'mouseup', me.proxy(me._eventHandler, me));
                me.editor.fireEvent('afterscalehide', me);
                //做判断
                reset && me.editor.setContent(me.editor.getContent())
            },

 

 Refer to the author’s reply comments:

 However, this method only reduces the blank space outside the picture after multiple clicks, and the cursor appears in the deselected state after clicking twice, which does not completely solve the problem.

If comrades have better solutions, please give us your advice and move forward together.

 

Guess you like

Origin blog.csdn.net/a_grain_of_wheat/article/details/126388613