CKEditor BBCode图片标签自定义报错：切换编辑器出现candidate is null

Hey there! Let's dig into this CKEditor BBCode image issue you're facing. Your suspicion about the bbcodeMap mapping [img] to <span> is spot-on — that's likely the root cause of the "candidate is null" error in the WYSIWYG view. Here's how to fix it step by step:

1. Fix the BBCode-to-HTML Mapping (bbcodeMap) #

The default bbcodeMap uses a <span> to simulate images, which breaks when you add custom attributes like width. Let's update it to properly handle your desired format and avoid element mismatches:

// Locate the bbcodeMap section in plugin.js (usually near the top of the file)
img: {
    element: 'img', // Use a native <img> element instead of span for direct compatibility
    attributes: {
        'src': '({content})', // Maps the inner content of [img] to the src attribute
        'width': '{width}',   // Capture the width attribute from BBCode
        'alt': '{imagealt}'   // Bind to the imagealt attribute you added earlier
    }
}

If you need to keep using <span> for legacy reasons, adjust it to store attributes in data-* properties:

img: {
    element: 'span',
    attributes: {
        'class': 'bbc-img',
        'data-src': '({content})',
        'data-width': '{width}',
        'data-alt': '{imagealt}'
    }
}

2. Update the HTML Filter Logic #

Tweak your existing htmlFilter rule to handle the width attribute and ensure smooth conversion between HTML and BBCode:

editor.dataProcessor.htmlFilter.addRules({
    elements: {
        img: function( element ) {
            const attributes = element.attributes;
            
            // Pass alt attribute to imagealt (your existing code)
            attributes.alt && (element.attributes.imagealt = attributes.alt);
            
            // Add width attribute handling
            if (attributes.width) {
                element.attributes.imagewidth = attributes.width;
            }

            // If using span simulation, add this block to convert span back to img for WYSIWYG:
            // } else if (element.name === 'span' && element.attributes['class'] === 'bbc-img') {
            //     const img = new CKEDITOR.htmlParser.element('img');
            //     img.attributes.src = element.attributes['data-src'];
            //     element.attributes['data-width'] && (img.attributes.width = element.attributes['data-width']);
            //     element.attributes['data-alt'] && (img.attributes.alt = element.attributes['data-alt']);
            //     return img;
        }
    }
});

3. Adjust the BBCodeWriter Attribute Output #

Update the attribute method in your BBCodeWriter class to output the width attribute correctly in the BBCode source:

var BBCodeWriter = CKEDITOR.tools.createClass({
    // ... existing class code ...
    proto: {
        attribute: function( attrName, attrValue ) {
            switch ( attrName ) {
                // ... existing cases ...
                case 'imagealt':
                    this.writeAttribute('alt', attrValue);
                    break;
                case 'imagewidth': // Matches the imagewidth attribute from the HTML filter
                    this.writeAttribute('width', attrValue);
                    break;
            }
        }
    }
});

4. Troubleshoot the "candidate is null" Error #

This error happens when CKEditor can't find a matching HTML element to render your custom BBCode tag. By aligning the bbcodeMap to properly handle width and using a native <img> (or properly configured <span>), you eliminate the element mismatch that causes this null reference.

After making these changes:

1. Clear your browser cache to ensure the updated plugin loads
2. Test in source view: Input [img width=300 alt="Sample Image"]https://example.com/image.jpg[/img]
3. Switch to WYSIWYG view — it should render without errors
4. Switch back to source view to confirm the BBCode format stays intact

内容的提问来源于stack exchange，提问作者MaxPerl