TYPO3 v10

[zbychu555]

Do you have any plans for compatibility with v10?

[prdt3e]

I am currently working on a version. The JavaScript had to be rewritten because irreInsertAction was blown out in the AbstractElementBrowser. Furthermore I have rewritten the JavaScript so that a multiple selection of the pictures should be possible, but the edit function has to be rewritten as this expects a table and a uid. @thommyhh @muh-nr

[prdt3e]

require(['TYPO3/CMS/Backend/Modal'], function (Modal) {
    var $modal = Modal.advanced({
        type: Modal.types.iframe,
        title: editor.lang.common.image,
        content: url,
        size: Modal.sizes.large,
        callback: function(currentModal) {
            currentModal.find('iframe').on('load', function (e) {

                var AddImage = {
                    elements: {},

                    handle: function(e) {
                        var items = $(e).closest('#typo3-filelist').find('.typo3-bulk-item');
                        var selectedItems = [];
                        if (items.length) {
                            items.each(function(position, item) {
                                if (item.checked && item.name) {
                                    selectedItems.push({uid: AddImage.elements[item.name].uid, table: AddImage.elements[item.name].table});
                                }
                            });
                            if(selectedItems.length > 0){
                                AddImage.addedImage(selectedItems);
                            }
                        }
                    },

                    addedImage: function(selectedItems){
                        $modal.modal('hide');
                        //for (var i = 0; i < selectedItems.length; i++) {
                            //return true;
                            //alert(selectedItems[i].uid);
                        //}
                        deferred.resolve(selectedItems[0].table, selectedItems[0].uid);
                    },

                };

                $.extend(AddImage.elements, $(this).contents().find('body').data('elements'));

                $(this).contents().find('[data-close]').on('click', function (e) {
                    e.stopImmediatePropagation();
                    var selectedItems = [];
                    selectedItems.push({uid: AddImage.elements['file_' + $(this).data('fileIndex')].uid, table: AddImage.elements['file_' + $(this).data('fileIndex')].table});
                    AddImage.addedImage(selectedItems);
                });
                $(this).contents().find('#t3js-importSelection').on('click',  function (e) {
                    e.stopImmediatePropagation();

                    AddImage.handle($(this));
                });
            });
        }
    });
});

[prdt3e]

You are welcome to test my fork: Fork V10

[saitho]

You are welcome to test my fork: Fork V10

Maybe you could make a pull request with your changes? :)

[prdt3e]

Yes, actually I always do that with @muh-nr . However, I currently do not reach him via slack.

[infabo]

+1

[CybotTM]

Hi @prdt3e ,

what is it you need to create the pull request?

[prdt3e]

@CybotTM I did it. I send a email to you tomorrow.

[dschibalsky]

+1

[matin73]

You are welcome to test my fork: Fork V10

Maybe you could make a pull request with your changes? :)

not working for me. get error Too few arguments to function TYPO3\CMS\Core\Html\RteHtmlParser::__construct(), 0 passed in /var/www/vhosts/webspace/httpdocs/xxxx/typo3/sysext/core/Classes/Utility/GeneralUtility.php on line 3423 and exactly 1 expected

[prdt3e]

So I could not determine that (10.4.5). Which Typo3 version?

[matin73]

(10.4.5)

[matin73]

it is working now. I setup rte config new and now it is working

[matin73]

But I found another issue. Your extension is adding <p>&nbsp;</p> after each line. F.ex.:
<h3>xxxxx</h3>

<p class="big">sadfdasf</p>

is getting in frontend
<h3>xxxxx</h3>
<p>&nbsp;</p>
<p class="big">sadfdasf</p>

[prdt3e]

I don't think this comes from rte_ckeditor_image. we don't actually create empty tags. Uninstall the extension and check again.

[matin73]

Yes, uninstalling extension solved the problem

[bernd-reindl]

typo3/sysext/recordlist/Resources/Public/JavaScript/ElementBrowser.js in TYPO3 10.4.6 LTS has no "ElementBrowser.irre.insertAction". So onSelected in typo3image.js is never called and no image is inserted.

ElementBrowser.js uses window.postMessage (see typo3/sysext/backend/Resources/Public/JavaScript/Utility/MessageUtility.js) instead. So you have to listen for an Event "message".

My Changes. Works for me in TYPO3 10.4.6.

[EDIT] I use the dev-TYPO3_10.x branch

[prdt3e]

These lines no longer exist in the v10 branch. Check out the post from February 29th.

[prdt3e]

https://github.com/netresearch/t3x-rte_ckeditor_image/pull/85/files#diff-1eb59f7f92ca12d2a2e7820bca4fd092

[bernd-reindl]

@prdt3e But the changes are not merged to dev-TYPO3_10.x if i download it from github (https://github.com/netresearch/t3x-rte_ckeditor_image/tree/dev-TYPO3_10.x).

[prdt3e]

I don't know why it stands still for so long. Until version 11 comes out ^^ @CybotTM

[bernd-reindl]

@prdt3e your code results in an issue.

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig('RTE.default.proc.overruleMode = rtehtmlarea_images_db'); leads in \TYPO3\CMS\Core\Html\RteHtmlParser::transformTextForPersistence() to an $modes array containing only [rtehtmlarea_images_db]. So detectbrokenlinks, ts_links and css_transform are not processed. These are the default modes. If css_transform is not processed, the text inserted to the database contains newlines which results in empty paragraps between each textline. See \TYPO3\CMS\Core\Html\RteHtmlParser::css_transform()

You can solve this by replacing \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig('RTE.default.proc.overruleMode = rtehtmlarea_images_db');

with

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig('RTE.default.proc.overruleMode = default,rtehtmlarea_images_db');

or maybe better (This adds each entry to existing entries) \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig('RTE.default.proc.overruleMode := addToList(default)'); \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPageTSConfig('RTE.default.proc.overruleMode := addToList(rtehtmlarea_images_db)');

[prdt3e]

@bernd-reindl thank you very much, I am very happy when someone makes suggestions. I will include this in the pull request. Also fix extensionscanner and cleanup code from nhovratov .

[cocolocochris]

But I found another issue. Your extension is adding

 

after each line. F.ex.:

Same here. After installing this Fork all new CEs become empty p-Tags.

Backend Code/Code in DB:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem.</p>

Frontend Code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem.</p>
<p></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem.</p>
<p></p>

[bernd-reindl]

But I found another issue. Your extension is adding   after each line. F.ex.:

Same here. After installing this Fork all new CEs become empty p-Tags.

Backend Code/Code in DB:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem.</p>

Frontend Code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem.</p>
<p></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem.</p>
<p></p>

@cocolocochris see my post 8 days ago. This will solve the problem. But you have to save each edited text to remove the additional newline.

[cocolocochris]

But I found another issue. Your extension is adding   after each line. F.ex.:

Same here. After installing this Fork all new CEs become empty p-Tags. Backend Code/Code in DB:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem.</p>

Frontend Code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem.</p>
<p></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem.</p>
<p></p>

@cocolocochris see my post 8 days ago. This will solve the problem. But you have to save each edited text to remove the additional newline.

@bernd-reindl thank you! now it works fine!

[Atsyn]

Could somebody update require section in the TYPO3_10.x branch and switch typo3 version from 10.2.0 to 10.4.0?

[plojewski]

When the plugin will be visible to download over here please: https://packagist.org/packages/netresearch/rte-ckeditor-image ?

[rvock]

But I found another issue. Your extension is adding <p>&nbsp;</p> after each line. F.ex.:

<h3>xxxxx</h3>

<p class="big">sadfdasf</p>

is getting in frontend
<h3>xxxxx</h3>
<p>&nbsp;</p>
<p class="big">sadfdasf</p>

@matin73 I also had this issue and could solve it using the folllowing page tsconfig:

RTE.default.proc.overruleMode = default,rtehtmlarea_images_db

It's important, that also the default processing configuration is set.

[plojewski]

Anyone?

[dschibalsky]

Will there be TYPO3 10.4.xx support?

[mcmulman]

Here comes the current dev branch for TYPO3 v10. Please have a look at the diff and do a test everybody.

composer req netresearch/rte-ckeditor-image:dev-dev-TYPO3_10.x

[Atsyn]

Strange solution for a callback of modal disalog in the typo3image.js I made it easier:

/**

• Open a window with container iframe
• @param {Object} editor The CKEditor instance
• @return {$.Deferred} */ function selectImage(editor) { // @see \TYPO3\CMS\Recordlist\Browser\AbstractElementBrowser::getBParamDataAttributes // @see \TYPO3\CMS\Recordlist\Browser\FileBrowser::render let bparams = [ editor.name, // $fieldRef 'ckeditor', // $rteParams 'typo3image', // $rteConfig editor.config.typo3image.allowedExtensions || '', // allowedFileExtensions -> Defaults set in controller editor.name, // $irreObjectId '', // $irreCheckUniqueAction '', // $irreAddAction 'onSelected' // $irreInsertAction ], routeUrl = editor.config.typo3image.routeUrl, url = routeUrl
• (routeUrl.indexOf('?') === -1 ? '?' : '&')
• 'contentsLanguage=' + editor.config.contentsLanguage
• '&editorId=' + editor.id
• '&bparams=' + bparams.join('|'), deferred = $.Deferred(), $modal;

    require(['TYPO3/CMS/Core/Event/RegularEvent', 'TYPO3/CMS/Backend/Utility/MessageUtility'], function (RegularEvent, mu) {
        new RegularEvent("message", n => {
            if (!mu.MessageUtility.verifyOrigin(n.origin)) throw"Denied message sent by " + n.origin;
            if ("typo3:foreignRelation:insert" === n.data.actionName) {
                if (n.data.objectGroup === editor.name) {
                    $modal.modal('hide');
                    deferred.resolve(n.data.table, n.data.uid);
                }
            }
        }).bindTo(window)
    });

    require(['TYPO3/CMS/Backend/Modal'], function (Modal) {
        $modal = Modal.advanced({
            type: Modal.types.iframe,
            title: editor.lang.common.image,
            content: url,
            size: Modal.sizes.large
        });
    });

    return deferred;
}

[mcmulman]

@Atsyn I don't get it?! The modal initialisation is the same, you just removed the callback handler to add new images. Please point out what we should change in detail and why. Thanks.

[OLDOY]

I wish to install via composer the extension on TYPO3 10. Is there any roadmap for official TYPO3 10 release?

I tried composer req netresearch/rte-ckeditor-image:dev-TYPO3_10.x with a dev-minimal stability and I keep having the same error: [InvalidArgumentException] Could not find package netresearch/rte-ckeditor-image in a version matching dev-TYPO3_10.x

[wazum]

@OLDOY you have to use dev-dev-TYPO3_10.x as the branch's name is already dev-TYPO3_10.x, see https://getcomposer.org/doc/articles/versions.md#branches

[mcmulman]

Right @wazum, thanks. I fixed it in my comment above.

[mcmulman]

Done, please check out the new version 10.1.0!

[OLDOY]

@OLDOY you have to use dev-dev-TYPO3_10.x as the branch's name is already dev-TYPO3_10.x, see https://getcomposer.org/doc/articles/versions.md#branches

Thanks !!

[gedoens]

not working for me. get error Too few arguments to function TYPO3\CMS\Core\Html\RteHtmlParser::__construct(), 0 passed in /var/www/vhosts/webspace/httpdocs/xxxx/typo3/sysext/core/Classes/Utility/GeneralUtility.php on line 3423 and exactly 1 expected

So I ran into this same issue and I have no idea what I did to cause or fix it. I have a minimal extension that essentially does what the README says in Installation step 3 to enable images when editing text elements. Whenever trying to edit a text content element, this error appeared. Here is my log of the error:

 Uncaught TYPO3 Exception: Too few arguments to function TYPO3\CMS\Core\Html\RteHtmlParser::__construct(), 0 passed in /var/www/redacted/typo3_src-10.4.13/typo3/sysext/core/Classes/Utility/GeneralUtility.php on line 3441 and exactly 1 expected | ArgumentCountError thrown in file /var/www/redacted/typo3_src-10.4.13/typo3/sysext/core/Classes/Html/RteHtmlParser.php in line 123

The only thing I did to fix it was disable my minimal extension and then enable it again. I updated test instances of my website from 9.5 to 10.4 several times, each time updating rte_ckeditor_image as well, and only once did this issue appear.

[gedoens]

I just did the upgrade of my production website and the same problem appeared. Same solution helped as well. (Disabling and re-enabling my minimal helper extension).

@mcmulman In case you're interested or happen to know a possible cause for this..