samclarke / SCEditor

A lightweight HTML and BBCode WYSIWYG editor
http://www.sceditor.com/
Other
657 stars 187 forks source link

custom BBCode tag for images - Need help #622

Open MaxPerl opened 6 years ago

MaxPerl commented 6 years ago

Hello, First thank you very much for your wonderful editor. Unfortunately I don't accomplish to create a custom image tag. I want the following form: [img=/path/to/image.png]Title/alternative Text[/img].

At the moment I tried this:


sceditor.command.set("image-new", {
                exec: function(caller) {
                    var editor = this;
                    var $content = $("<div\>");

                    $('<form><input type="text" id="sceditor-image-src">').appendTo($content);
                    $('<input type="text" id="sceditor-image-title">').appendTo($content);

                    $('<button>Add image</button>')
                        .click(function (e) {
                            var src = $("#sceditor-image-src").val();
                            var title = $("#sceditor-image-title").val();
                            editor.insertText("[img=" + src + "]" + title + "[/img]");
                            e.preventDefault();
                        })
                        .appendTo($content);

                    $('</form>').appendTo($content);

                    editor.createDropDown(caller,"test-picker",$content.get(0));
                    }
            });

            var obj = {
                    allowsEmpty: true,
                    tags: {
                        img: {
                            src: null
                        }
                    },
                    allowedChildren: ['#'],
                    quoteType: sceditor.BBCodeParser.QuoteType.never,
                    format: function (element, content) {
                        var title = '';
                        title = attr(element, 'title') || '';
                        return "[img=" + attr(element,'src') + "]" + title + "[/img]";              
                    },
                    html: function (token, attrs, content) {
                        var src = '';

                        src = attrs.src;

                        return '<img title="' + content + ' src="' + src + '" />';
                    }
                };
            sceditor.formats.bbcode.set("img", obj);

Unfortunately the image tag get lost after switching to/from Source editor. And also in HTML View the image isn't shown but only the BBCode text.

Could anyone help me?

Thanks in advance, Max

MaxPerl commented 6 years ago

Okay, I found the error. It was a simple misspelling in html function of the BBCode object: return '<img title="' + content + ' src="' + src + '" />'; must be return '<img title="' + content + '"(!!!!) src="' + src + '" />';

Now I have another problem. The image is only shown if I toogle to SourceMode and back to WYSIWYG mode. I could solve this with a little hack in the command setting:


$.sceditor.command.set("image-new", {
                [...]
                    $('<p><button>Add image</button></p>')
                        .click(function (e) {
                            var src = $("#sceditor-image-src").val();
                            var title = $("#sceditor-image-title").val();
                            editor.insert("[img=" + src + "]" + title + "[/img]");

                            // A very dirty hack.. Otherwise the image is not shown!!!
                            editor.toggleSourceMode;
                            editor.toggleSourceMode;

                            editor.closeDropDown(true);
                            e.preventDefault();
                        }) [...]

But this cannot be the right soution???