Bỏ qua để đến Nội dung
Menu
Câu hỏi này đã bị gắn cờ
1 Trả lời
1764 Lượt xem

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!

Ảnh đại diện
Huỷ bỏ
Tác giả Câu trả lời hay nhất

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!

Ảnh đại diện
Huỷ bỏ
Bài viết liên quan Trả lời Lượt xem Hoạt động
1
thg 7 23
4024
1
thg 3 23
2620
1
thg 3 22
2260
0
thg 3 16
3244
2
thg 7 25
409