简体   繁体   中英

Set list item tag to [*]x instead of [li]x[/li] in SCEditor for vBulletin compatibility

TL;DR

SCEditor uses [li]test[/li] for list items. To make it compatible for VB, I want to change this to [*]test . But my approach doesn't full work. I can make the editor to insert [*] for list items. However they always contain an unwanted line break before their content.

So the question is: How can I change [li]x[/li] to [*]x without the line break after [*] of my current solution (see above)?

Detailled explanation and my approach

I want SCEditor to be compatible with VBulletin. Many BBCodes works but lists doesn't. When creating a list in SCEditor, it generates the following BBCode:

[ul]
[li]x[/li]
[li]y[/li]
[/ul]

VBulletin doesn't parse this since it uses [list] instead of [ul] . By understand bbcode.js I could fix this by replacing the format of the BBCode:

sceditor.formats.bbcode.set('ul', {
    tags: {
        ul: null
    },
    breakStart: true,
    isInline: false,
    skipLastLineBreak: true,
    format: '[list]{0}[/list]',
    html: '<ul>{0}</ul>'
})

But when I change But the [li]x[/li] also doesn't work since VB uses [*] x without closing tag. Tried modifing this item too:

sceditor.formats.bbcode.remove('li')
sceditor.formats.bbcode.set('li', {
    tags: {
        li: null,
        '*': null
    },
    isInline: false,
    excludeClosing: true,
    isSelfClosing: true,
    skipLastLineBreak: true,
    closedBy: ['/ul', '/ol', '/list', '*', 'li'],
    format: '[*]{0}',
    html: '<li>{0}</li>'
})
sceditor.formats.bbcode.remove('*')
sceditor.formats.bbcode.set('*', {
    isInline: false,
    //excludeClosing: true,
    isSelfClosing: true,
    //skipLastLineBreak: true,
    html: '<li>{0}</li>'
})

Now when pressing the list button, the editor inserts BBCodes nearly as I need them:

[list]
[*]
x[/list]

Since it creates a line break between [*] and the content, it looks broken:

在此处输入图片说明

It seems that li is used for the editor controls (insert list button), where * (last entry) handles the parsing from BBCode to Editor HTML (when toggling between source code and WYSIWYG view).

Found out that I need setting isSelfClosing to false in * BBCode. skipLastLineBreak is not required as well as deleting the tag with sceditor.formats.bbcode.remove('*') since set() overrides any existing tags (described in the documentation).

The following works:

sceditor.formats.bbcode.set('*', {
    isInline: false,
    // Avoid automatically closing tag [/*]
    excludeClosing: true,
    // Avoids line break between [*] and list point content
    isSelfClosing: false,
    html: '<li>{0}</li>'
})

Results in

[list]
[*]x
[*]y
[/list]

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM