Ir al contenido
Menú
Se marcó esta pregunta
1 Responder
1391 Vistas

Hello fellow Odoo users,

I wrote a snippet for my website that highlights code, but sometimes whenever I try to paste some code inside my snippet that needs highlighting it adds https://​ and a trailing /​ to some parts of the pasted content. I reckon this is due to the standard Odoo behaviour for a paste event. For this reason, I want to overwrite the default paste event with that of my own so that this no longer happens. 

My template looks like this:

<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
    <template id="website_snippets_s_code_highlight" name="Code Highlight">
        <section class="s_code_highlight">
            <div class="container py-2">
                <pre><code class="language-python" data-prismjs-copy="copy" contenteditable="true">def test():
    pass</code></pre>
            </div>
        </section>
    </template>

</odoo>

My snippet javascript file (i.e., 000.js):

odoo.define('website_snippets.s_code_highlight', function (require) {
    'use strict';
   
    const publicWidget = require('web.public.widget');

    const CodeHighlightWidget = publicWidget.Widget.extend({
        selector: '.s_code_highlight',
        events: {
            'paste pre': '_onPaste',
            'paste code': '_onPaste',
        },
        jsLibs: [
            '/website_snippets/static/src/lib/prism/prism.js',
        ],
       
        start: function () {
            // other parts of my code
            this._render();
            Prism.highlightAll();

            return this._super.apply(this, arguments);
        },


        //--------------------------------------------------------------------------
        // Private
        //--------------------------------------------------------------------------

        _render: function () {
            // where the magic happens
        },

        /**
         * @private
         */
        _onPaste: function (ev) {
            ev.preventDefault();
            console.log("Paste event triggered on", ev.target.tagName);
        },

    })

    publicWidget.registry.code_highlight = CodeHighlightWidget;

    return CodeHighlightWidget;

})

The snippet works fine, except for the pasting issue. My paste event handler also works on the website, but not inside the website editor. How can I capture the paste event inside the website editor and overwrite the default event handler?

Many thanks for your help!

Avatar
Descartar
Autor Mejor respuesta

I solved this problem by attaching an event handler function to the element in the start function:


start: function () {

    $(document).off('paste', '.s_code_highlight, .s_code_highlight *').on('paste', '.s_code_highlight, .s_code_highlight *', this._onPaste.bind(this));

    // other parts of my code
    this._render();
    Prism.highlightAll();

    return this._super.apply(this, arguments);
},


This outputs 'Paste event triggered on CODE'​ in the console.


I hope it might help someone else!

Avatar
Descartar
Publicaciones relacionadas Respuestas Vistas Actividad
1
jul 23
3647
1
mar 23
2231
1
mar 22
2008
0
mar 16
2910
1
may 25
272