Magento2, custom widget save data wrong encoding

Question

I create a custom widget for magento2. I have one text parameter:

<parameter name="title" xsi:type="text"  visible="true" sort_order="1" >
            <label translate="true">Title</label>
        </parameter>

When I save data, if I use characters like à, or ã, or ü por example, the are saved with wrong encoding. For example ü became ü. This only happens on my widget. All the rest is saving with right encoding.

How can I set right encoding for a widget or a parameter?

thank you

Answer 1

Apparently, I have no direct answer to your question as it seems to be an issue with Magento (see Issue #5132 of Magento2 on GitHub).

Workaround

Just utf8_decode your variables before echoing them. For example:

$text_w_correct_umlauts = utf8_decode($this->getData('text_w_incorrect_umlauts'));

Answer 2

There is a commit on GitHub that provides a fix for this, which is not merged into a released version yet. You can find it on https://github.com/magento/magento2/commit/54df23a2cddd92d6961dfda3b80e480c6d7c822e.

Basically you have to update the encode and decode functions of the Base64 object in lib/web/mage/adminhtml/tools.js, vendor/magento/magento2-base/lib/web/mage/adminhtml/tools.js, lib/web/legacy-build.min.js and vendor/magento/magento2-base/lib/web/legacy-build.min.js.

---

Files lib/web/mage/adminhtml/tools.js and vendor/magento/magento2-base/lib/web/mage/adminhtml/tools.js

Base64.encode (lines ± 330-363):

    encode: function (input) {
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;

        input = Base64._utf8_encode(input);

        if( typeof window.btoa === "function" ){
            return window.btoa(input);
        }

        while (i < input.length) {

            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(i++);

            enc1 = chr1 >> 2;
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
            enc4 = chr3 & 63;

            if (isNaN(chr2)) {
                enc3 = enc4 = 64;
            } else if (isNaN(chr3)) {
                enc4 = 64;
            }
            output = output +
                     this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
                     this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
        }

        return output;
    },

Base64.decode (lines ± 366-401):

    decode: function (input) {
        var output = "";
        var chr1, chr2, chr3;
        var enc1, enc2, enc3, enc4;
        var i = 0;

        if( typeof window.atob === "function" ){
            return Base64._utf8_decode(window.atob(input));
        }

        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

        while (i < input.length) {

            enc1 = this._keyStr.indexOf(input.charAt(i++));
            enc2 = this._keyStr.indexOf(input.charAt(i++));
            enc3 = this._keyStr.indexOf(input.charAt(i++));
            enc4 = this._keyStr.indexOf(input.charAt(i++));

            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;

            output = output + String.fromCharCode(chr1);

            if (enc3 != 64) {
                output = output + String.fromCharCode(chr2);
            }
            if (enc4 != 64) {
                output = output + String.fromCharCode(chr3);
            }
        }

        return Base64._utf8_decode(output);
    },

---

Files lib/web/legacy-build.min.js and vendor/magento/magento2-base/lib/web/legacy-build.min.js

Replace:

encode:function(e){var b="";var p,n,h,o,l,g,f;var d=0;if(typeof window.btoa==="function"){return window.btoa(e)}e=Base64._utf8_encode(e);while(d<e.length){p=e.charCodeAt(d++);n=e.charCodeAt(d++);h=e.charCodeAt(d++);o=p>>2;l=((p&3)<<4)|(n>>4);g=((n&15)<<2)|(h>>6);f=h&63;if(isNaN(n)){g=f=64}else{if(isNaN(h)){f=64}}b=b+this._keyStr.charAt(o)+this._keyStr.charAt(l)+this._keyStr.charAt(g)+this._keyStr.charAt(f)}return b},decode:function(e){var b="";var p,n,h;var o,l,g,f;var d=0;if(typeof window.atob==="function"){return window.atob(e)}e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(d<e.length){o=this._keyStr.indexOf(e.charAt(d++));l=this._keyStr.indexOf(e.charAt(d++));g=this._keyStr.indexOf(e.charAt(d++));f=this._keyStr.indexOf(e.charAt(d++));p=(o<<2)|(l>>4);n=((l&15)<<4)|(g>>2);h=((g&3)<<6)|f;b=b+String.fromCharCode(p);if(g!=64){b=b+String.fromCharCode(n)}if(f!=64){b=b+String.fromCharCode(h)}}b=Base64._utf8_decode(b);return b}

With:

encode:function(e){var b="";var p,n,h,o,l,g,f;var d=0;e=Base64._utf8_encode(e);if(typeof window.btoa==="function"){return window.btoa(e)}while(d<e.length){p=e.charCodeAt(d++);n=e.charCodeAt(d++);h=e.charCodeAt(d++);o=p>>2;l=((p&3)<<4)|(n>>4);g=((n&15)<<2)|(h>>6);f=h&63;if(isNaN(n)){g=f=64}else{if(isNaN(h)){f=64}}b=b+this._keyStr.charAt(o)+this._keyStr.charAt(l)+this._keyStr.charAt(g)+this._keyStr.charAt(f)}return b},decode:function(e){var b="";var p,n,h;var o,l,g,f;var d=0;if(typeof window.atob==="function"){return Base64._utf8_decode(window.atob(e))}e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(d<e.length){o=this._keyStr.indexOf(e.charAt(d++));l=this._keyStr.indexOf(e.charAt(d++));g=this._keyStr.indexOf(e.charAt(d++));f=this._keyStr.indexOf(e.charAt(d++));p=(o<<2)|(l>>4);n=((l&15)<<4)|(g>>2);h=((g&3)<<6)|f;b=b+String.fromCharCode(p);if(g!=64){b=b+String.fromCharCode(n)}if(f!=64){b=b+String.fromCharCode(h)}}return Base64._utf8_decode(b)}