JiHong88
Indent / Outdent icons reversed?
Describe the bug When replacing the icons used for Indent / Outdent with the Font Awesome duo-style icons (for example) the indent and outdent icons seem to be mapped backwards. Indeed, looking at the default icons seems to show that they are assigned backwards as well.
Hi @500Foods Sorry, I didn't understand the question. The icon seems to be normal.. please tell me in more detail.
Sorry, guess it could've been more clear. It is a small issue, really.
When setting up a suneditor instance, I use the icons property to change the icons to the FontAwesome duotone icons, like this:
icons: {
undo: '<span><i class="fas fa-undo"></i></span>',
save: '<span class="HTMLSave" style="margin-top: -2px;"><i class="fas fa-check fa-xl"></i></span>',
redo: '<span><i class="fas fa-redo"></i></span>',
paragraph_style: '<span><i class="fad fa-paragraph"></i></span>',
blockquote: '<span><i class="fas fa-quote-left"></i></span>',
horizontal_rule: '<span><i class="fad fa-horizontal-rule"></i></span>',
bold: '<span><i class="fad fa-bold"></i></span>',
underline: '<span><i class="fad fa-underline"></i></span>',
italic: '<span><i class="fad fa-italic"></i></span>',
strike: '<span><i class="fad fa-strikethrough"></i></span>',
subscript: '<span><i class="fad fa-subscript"></i></span>',
superscript: '<span><i class="fad fa-superscript"></i></span>',
math: '<span><i class="fad fa-abacus"></i></span>',
font_color: '<span><i class="fad fa-pen-nib"></i></span>',
highlight_color: '<span><i class="fad fa-highlighter"></i></span>',
text_style: '<span><i class="fad fa-text"></i></span>',
erase: '<span><i class="fad fa-eraser"></i></span>',
list_bullets: '<span><i class="fad fa-list"></i></span>',
list_number: '<span><i class="fad fa-list-ol"></i></span>',
outdent: '<span><i class="fad fa-indent"></i></span>',
indent: '<span><i class="fad fa-outdent"></i></span>',
align_left: '<span><i class="fad fa-align-left"></i></span>',
align_right: '<span><i class="fad fa-align-right"></i></span>',
align_justify: '<span><i class="fad fa-align-justify"></i></span>',
align_center: '<span><i class="fad fa-align-center"></i></span>',
line_height: '<span><i class="fad fa-text-height"></i></span>',
table: '<span><i class="fad fa-table"></i></span>',
link: '<span><i class="fad fa-link"></i></span>',
image: '<span><i class="fad fa-image"></i></span>',
video: '<span><i class="fad fa-video"></i></span>',
audio: '<span><i class="fad fa-microphone"></i></span>',
expansion: '<span><i class="fad fa-expand"></i></span>',
reduction: '<span><i class="fad fa-compress"></i></span>',
show_blocks: '<span><i class="fad fa-tasks-alt"></i></span>',
code_view: '<span><i class="fad fa-code"></i></span>',
print: '<span><i class="fad fa-print"></i></span>'
}
This works really well. However, in the case of the indent / outdent icons, they have to be assigned backwards (indent = outdent icon, outdent = indent icon). I think in the source code the default icons are mapped backwards as well, so you don't notice this normally.
It looks like indent and outdent custom icons are inverted here:
https://github.com/JiHong88/SunEditor/blob/2b8c9bcff357d092822cdf1c85d1113f9125b67f/src/lib/constructor.js#L626
