https://www.np-aldefeanen.nl/wp-content/plugins/bo-elementor-addon…o-rich-text-styles-widget.js?ver=1782304606

1(function ($) {
2
3    function injectTinyMCECSS(ed) {
4        const css = `
5            span.bo-style-1 {
6                outline: 2px dashed rgba(255, 190, 0, .6) !important;
7                background: rgba(255, 230, 140, .25) !important;
8            }
9            span.bo-style-2 {
10                outline: 2px dashed rgba(0, 150, 255, .6) !important;
11                background: rgba(0, 150, 255, .15) !important;
12            }
13        `;
14        ed.dom.addStyle(css);
15    }
16
17    function ensureTinyMCE(ed) {
18        if (ed._boInitDone) return;
19
20        ed.formatter.register('bostyle1', {
21            inline: 'span',
22            classes: 'bo-style-1'
23        });
24        ed.formatter.register('bostyle2', {
25            inline: 'span',
26            classes: 'bo-style-2'
27        });
28
29        injectTinyMCECSS(ed);
30
31        ed._boInitDone = true;
32    }
33
34    // sync direct naar Elementor (textarea)
35    function syncElementorNow() {
36        if (!tinymce.activeEditor) return;
37
38        const ed = tinymce.activeEditor;
39
40        // ✨ CRUCIAAL → forceer TinyMCE om textarea nu meteen bij te werken
41        ed.save();
42
43        // textarea heeft nu de nieuwste HTML
44        const textarea = document.querySelector('.elementor-control-content textarea');
45        if (!textarea) return;
46
47        textarea.dispatchEvent(new Event('input', { bubbles: true }));
48    }
49
50    function applyStyle(styleNumber) {
51        const ed = tinymce.activeEditor;
52        if (!ed) return;
53
54        ensureTinyMCE(ed);
55
56        ed.formatter.toggle("bostyle" + styleNumber);
57        ed.nodeChanged();
58
59        // 🧠 direct textarea sync + Elementor refresh
60        syncElementorNow();
61    }
62
63    function clearStyles() {
64        const ed = tinymce.activeEditor;
65        if (!ed) return;
66
67        ensureTinyMCE(ed);
68
69        let html = ed.selection.getContent({ format: 'raw' }) || '';
70
71        html = html.replace(
72            /<span class="bo-style-(?:1|2)"[^>]*>([\s\S]*?)<\/span>/gi,
73            '$1'
74        );
75
76        ed.selection.setContent(html);
77        ed.nodeChanged();
78
79        syncElementorNow();
80    }
81
82    $(document).on('tinymce-editor-init', function (event, editor) {
83        ensureTinyMCE(editor);
84
85        // ⭐ HIGHLIGHT DIRECT VISIBLE BIJ EERSTE LOAD
86        setTimeout(() => {
87            editor.setContent(editor.getContent()); // force render
88            editor.nodeChanged(); // force redraw
89        }, 10);
90    });
91
92
93    $(document).on('click', '.bo-style-btn[data-style]', function (e) {
94        e.preventDefault();
95        applyStyle($(this).data("style"));
96    });
97
98    $(document).on('click', '.bo-style-btn-clear', function (e) {
99        e.preventDefault();
100        clearStyles();
101    });
102
103})(jQuery);