netresearch / t3x-rte_ckeditor_image

Image support in CKEditor for the TYPO3 ecosystem
GNU Affero General Public License v3.0
56 stars 65 forks source link

Title, style attributes are lost when content is modified - height and width attributes are modified #173

Closed YolfTypo3 closed 2 years ago

YolfTypo3 commented 2 years ago

Using rte_ckeditor_image 10.2.1 with TYPO3 10.4.21, when images are inserted in news and then are modified, the title attribute is lost. If a style attribute was added with the editor, e.g. float: right to have the image at the RHS of the text, it is also lost. The height and width attribute are modified.

YolfTypo3 commented 2 years ago

Possible workarounds:

      // When instance is ready, sets the title, height, width and style attributes
          editor.on('instanceReady',function(){
              var $shadowEditor = $('<div>').append(editor.element.$.innerText),
                  existingImages = $shadowEditor.find('img');

                  if (existingImages.length) {
                      $.each(existingImages, function(i,curImg) {
                          var $curImg = $(curImg),
                              uid = $curImg.attr('data-htmlarea-file-uid'),
                              realEditor = $('#cke_' + editor.element.$.id).find('iframe').contents().find('body'),
                              imTag = realEditor.contents().find('img[data-htmlarea-file-uid='+uid+']');      

                          // Sets the title attribute if any                          
                          if (typeof $curImg.attr('title') !== 'undefined' && $curImg.attr('title').length) {
                              imTag.attr('title', $curImg.attr('title'));
                          }

                          // Sets the width attribute if any
                          if (typeof $curImg.attr('width') !== 'undefined' && $curImg.attr('width').length) {
                              imTag.attr('width', $curImg.attr('width'));
                          }

                          // Sets the height attribute if any
                          if (typeof $curImg.attr('height') !== 'undefined' && $curImg.attr('height').length) {
                             imTag.attr('height', $curImg.attr('height'));
                          }   

                          // Sets the style attribute if any
                          if (typeof $curImg.attr('style') !== 'undefined' && $curImg.attr('style').length) {
                             imTag.attr('style', $curImg.attr('style'));
                          }                               

                      })
                  // Replaces the current html with the updated one
                  realEditor.html(realEditor.html());
              }
          });
thommyhh commented 2 years ago

@YolfTypo3 Could you test the branch in #178, which is for the 10.x version?