Trumbowyg: Simple replace Plugin

[ajarti]

Hi guys,
I am really struggling to get my head around the plugins and altering selected text. Can any one point me to a simple demo where I can, for example, just replace commas in the selected text with a
'<br>' when pressing a custom button.

Many thanks in advance!

[Alex-D]

https://alex-d.github.io/Trumbowyg/documentation/plugins/#create-your-own

[ajarti]

Thanks @Alex-D I did read the documentation and look at the plugins code .. but I can't figure out how to get the selected text and how to re-insert it after massaging it. Hence the request for a simpler example or maybe a jsfiddle or similar :)

[Globulopolis]

@ajarti look at preformatted plugin code.

[Shonetow]

I have a same question.

I was expecting something like this:

btnName: {
  fn: function (content) {
    // Do something with content
    return new_content 
  }
}

[Alex-D]

In each button fn, it's juste JavaScript vanilla... I can't help you... I've write tons of doc recently on how to use each Trumbowyg methods. Maybe the "Range" section of the doc can help you, but you need to code in pure JavaScript, that's it.

[ajarti]

Thanks @Alex-D , I think the challenge I had, and possibly others, is that the in the range documentation you mention that one can get the selected range using:

// range contains a JavaScript range
var range = $('#editor').trumbowyg('getRange');

but then the save e.g. looks like:

// Save current range
$('#editor').trumbowyg('saveRange');

There does not seem to be a way to assign parameters or a way of "returning/assigning" the content(range) you have just massaged/manipulated. I saw in the preformatted plugin you used:

trumbowyg.execCmd('insertHTML', range);

So Trumbowyg keeps a handle/reference on what range was selected and replaces it. In which case I was not sure what $('#editor').trumbowyg('saveRange'); was for? I see now it's what the editor uses to keep a handle on what you selected.

Below my simple plugin to hopefully help anyone else:

(function($){
    'use strict';

    $.extend(true, $.trumbowyg, {
        langs   : {
            en : {
                commatobr : 'Comma(,) to <br/>'
            }
        },
        plugins : {
            commatobr : {
                ico  : 'commatobr',
                init : function(trumbowyg){
                    var btnDef = {
                        fn : function(){
                            trumbowyg.saveRange();  // <- Save a reference to the selection.
                            var range = trumbowyg.getRangeText();
                            if ( range.replace(/\s/g, '') !== '' ) {
                                try {
                                    var replacement = range.replace(/(,)/g, '<br />'); // <- Trumbowyg automatically converts the <br>'s to <p>'s, will sort that later, keeping example simple.
                                    trumbowyg.execCmd('insertHTML', replacement); // <- Replace the referenced('saved') selection.
                                } catch ( e ) {
                                }
                            }
                        }
                    };

                    trumbowyg.addBtnDef('commatobr', btnDef);
                },
            }
        }
    });

})(jQuery);

N.B. N.B. for the icon, you need to add a svg to the styles or take the easy route I did and just it into the html of the page e.g:

<div class="hidden">
    <svg xmlns="http://www.w3.org/2000/svg">
        <symbol id="trumbowyg-commatobr" viewBox="0 0 72 72">
            <path style="line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;block-progression:tb;isolation:auto;mix-blend-mode:normal" d="M 25 11 C 17.301223 11 11 17.301223 11 25 C 11 32.605589 16.301223 39 24 39 C 25.083853 39 26.48622 38.684001 27.826172 38.431641 C 25.766076 43.70622 22.21875 45.5 22.21875 45.5 L 20.914062 46.101562 L 24.923828 50.109375 L 25.474609 49.96875 C 25.474609 49.96875 28.97769 49.050649 32.34375 45.457031 C 35.70981 41.863413 39 35.568916 39 25 C 39 17.301223 32.698777 11 25 11 z" font-weight="400" font-family="sans-serif" white-space="normal" overflow="visible"/>
        </symbol>
    </svg>
</div>

Thanks again for a great editor @Alex-D much appreciated! :)

[Alex-D]

The fact is: insertHTML does not works well anywhere. So it depends on browsers you want to support. As Trumbowyg core supports IE9, we can't use this and can't provide an API to set HTML in range or something. So yep, you need to do it by your own :)

Thanks for your explanations!