Selection Range Bug

[iam1me]

I've created a custom data-field bbcode that translates to an HTML Canvas in the WYSIWYG Editor. I created a data-field-plugin that handles rendering, updating, etc. these canvas elements. That's all working well.

Currently I am using the style attribute to control things like the canvas font-family, font-size, and color. However, I'd prefer if I could just use the standard BBCodes to handle these things. Example: "[b][data-field field-name="TotalAmount"][/data-field][/b]". This would tell me the field name to draw on the canvas, and I would determine that it is bold due to the parent bold tag.

The editor seems like it should be able to support this, except for what appears to be a bug with the range selection. If I have a some text before and after a field, and I highlight all of it and click the Bold button (or use another formatting command) the text before and after the canvas element are bolded, but there is no bold tag around the data-field. Example:

[b]b[/b][data-field data-source="DS" field-name="F"][/data-field][b]a[/b]

The data-field BBCode is marked as Inline, so it seems like it should be bolded as well. Perhaps someone knows of a config setting I maybe missing? Otherwise this is a bug. Hopefully Sam will return to take a look.

[brunoais]

What are your definitions for the data-field BBCode? (for both the WYSIWYG editor and for the BBCode editor)

[iam1me]

Hi brunoais,

Sorry for the delay in getting back to you, I've been out sick for a few days. Below is my current code for registering the BBCode specifically. I also have a 'data-field-plugin' that handles the rendering/event handling for the WYSIWYG side of things. Let me know if you'd like to see that.

//// BEGIN "data-field" BBCode
    $.sceditor.plugins.bbcode.bbcode.set('data-field', {
        tags: {
            'canvas': {
                'class': ['data-field']
            }
        },
        isHtmlInline: true,
        //allowedChildren: [],
        allowsEmpty: true,
        excludeClosing: false,
        skipLastLineBreak: false,

        breakBefore: false,
        breakStart: false,
        breakEnd: false,
        breakAfter: false,

        format: function(element, content) {
            var result = '[data-field';

            var attr = null;
            if((attr = element.attr('data-source')))
                result += ' data-source="' + attr + '"';

            if((attr = element.attr('field-name')))
                result += ' field-name="' + attr + '"';

            if((attr = element.attr('numerical-format')))
                result += ' numerical-format="' + attr + '"';

            result += ']';

            if(content)
            {
                if(content.trim) content = content.trim();
                result += content;
            }

            result += '[/data-field]';
            return result;
        },

        html: function(token, attrs, content) {
            var result = '<canvas class="data-field" draggable="true"';

            var attr = null;
            if(attrs['data-source'])
                result += ' data-source="' + attrs['data-source'] + '"';

            if(attrs['field-name'])
                result += ' field-name="' + attrs['field-name'] + '"';

            if(attrs['numerical-format'])
                result += ' numerical-format="' + attrs['numerical-format'] + '"';

            result += '>';

            if(content)
            {   
                if(content.trim) content = content.trim();
                result += content;
            }

            result += '</canvas>';

            return result;
        },       
        quoteType: $.sceditor.BBCodeParser.QuoteType.always
    }); //// END "data-field" BBCode 

[brunoais]

Where's the definition for the WYSIWYG editor? That's the definition for the BBCode editor (transforming from and to BBCode). For this, I believe I need both.

[iam1me]

Here is my current setup code for the WYSIWYG Editor itself:

        // Replace all textarea's
        // with SCEditor
        $("textarea").sceditor({
            plugins: "bbcode,data-field-plugin",
            toolbar: "bold,italic,underline,strike|font,size,color|link,insert-data-field|removeformat|maximize,source",
            fixInvalidNesting: false,
            style: "styles/sceditor.custom.css" //"scripts/sceditor/minified/jquery.sceditor.default.min.css"
        });

I tried setting fixInvalidNesting to false, but that doesn't seem to have helped.