Click here to Skip to main content
15,942,766 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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>
{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" />
<img alt="" src="{$Custom_bbcodesList['bbcode_switch']}" onclick="Custom_bbcodes('{$Custom_bbcodesList['bbcode_tag']}');" title="{$Custom_bbcodesList['bbcode_desc']}" class="editorbutton brd0" />
<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, '');
var editor = CKEDITOR.instances.text;
editor.insertHtml('['+bbcode_tag+'='+option+']' + getSelectedHtml(editor) + '[/'+bbcode_tag+']');
<fieldset class="pkr-b">
<legend class="pkr-b">{$lang['smiles']}</legend>
<?php $t=0;	?>
<table class="wd100 brd0 clp0 clpc1">
<tr class="va-t">
if($t== $PowerBB->_CONF['template']['_CONF']['info_row']['smil_columns_number']){
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" />
<?php $t=$t+1;?>
<div class="smallfont center_text_align">
<a href="javascript:void(0)" OnClick="'index.php?page=smile&all=1','Legends','width=250,height=550,resizable=yes,scrollbars=yes')">
<img class="brd0" onClick="cmd_allsmiles()" alt="{$lang['All_Smiles']}" src="{$image_path}/menu_open.gif" />

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

What I have tried:

insert custom bbcode in ckeditor5
Updated 22-Jan-24 21:31pm

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900