Insert custom bbcode ckeditor5

See more:

CKEditor

bbc

I'm trying to insert custom bbcode in ckeditor5 by adding a button like in this image
If i click on image there's nothing inserted in ckeditor5
bbcode insert

i would like to insert the correspendant bbcode in ckeditor5 to show the code after submit like this
bbcode after submit

this is the code i use

<pre><dd class="smiles-bbcode">
<?php if($PowerBB->_CONF['template']['while']['Custom_bbcodesList']){?>
<fieldset class="pkr-b">
<legend class="pkr-b">{$lang['custom_bbcodes_mor']} BBcode</legend>
{Des::while}{Custom_bbcodesList}
{if {$Custom_bbcodesList['bbcode_useoption']} == '1'}
<img alt="" src="{$Custom_bbcodesList['bbcode_switch']}" onclick="Custom_bbcodes_option('{$Custom_bbcodesList['bbcode_tag']}');" onmouseover="overIcon(this)" onmouseout="outIcon(this)" title="{$Custom_bbcodesList['bbcode_desc']}" class="editorbutton brd0" />
{else}
<img alt="" src="{$Custom_bbcodesList['bbcode_switch']}" onclick="Custom_bbcodes('{$Custom_bbcodesList['bbcode_tag']}');" title="{$Custom_bbcodesList['bbcode_desc']}" class="editorbutton brd0" />
{/if}
<script type='text/javascript'>
function getSelectedHtml(editor)
{
var selection = editor.getSelection();
if( selection )
{
var bookmarks = selection.createBookmarks(),
range = selection.getRanges()[ 0 ],
fragment = range.clone().cloneContents();
selection.selectBookmarks( bookmarks );
var retval = "",
childList = fragment.getChildren(),
childCount = childList.count();
for ( var i = 0; i < childCount; i++ )
{
var child = childList.getItem( i );
retval += ( child.getOuterHtml?
child.getOuterHtml() : child.getText() );
}
return retval;
}
};
function Custom_bbcodes(bbcode_tag){
var editor = CKEDITOR.instances.text;
editor.insertHtml('['+bbcode_tag+']' + getSelectedHtml(editor) + '[/'+bbcode_tag+']');
}
function Custom_bbcodes_option(bbcode_tag,option){
var option = cbPrompt(bbcode_tag, '');
if(option){
var editor = CKEDITOR.instances.text;
editor.insertHtml('['+bbcode_tag+'='+option+']' + getSelectedHtml(editor) + '[/'+bbcode_tag+']');
}
}
</script>
{/Des::while}
</fieldset>
{/if}
<fieldset class="pkr-b">
<legend class="pkr-b">{$lang['smiles']}</legend>
<?php $t=0;	?>
<table class="wd100 brd0 clp0 clpc1">
<tr class="va-t">
{Des::while}{SmileRows}
<?php
if($t== $PowerBB->_CONF['template']['_CONF']['info_row']['smil_columns_number']){
$t=0;
echo "</tr><tr>";
}?>
<td class="wd10">
<a href="javascript:void(0)">
<img src="{$SmileRows['smile_path']}" OnClick="AddSmileyIcon('{$SmileRows['smile_path']}');" alt="{$SmileRows['smile_path']}" class="brd0" />
</a>
</td>
<?php $t=$t+1;?>
{/Des::while}
</tr>
</table>
<div class="smallfont center_text_align">
<a href="javascript:void(0)" OnClick="javascript:window.open('index.php?page=smile&all=1','Legends','width=250,height=550,resizable=yes,scrollbars=yes')">
{$lang['All_Smiles']}
<img class="brd0" onClick="cmd_allsmiles()" alt="{$lang['All_Smiles']}" src="{$image_path}/menu_open.gif" />
</a>
</div>
</fieldset>
</dd>
</dl>

i hope that i'm clear in my question and thanks for help

What I have tried:

insert custom bbcode in ckeditor5