WebsiteBaker Support (2.12.x) > General Help & Support

CK Editor question

(1/3) > >>

rumen:
Hi there,

1. When I click in Ck Editor  the icon "blockquote" it apply code

--- Code: ---<blockquote>
--- End code ---

How can I put class (not to make it manually every time) so when I click the icon to get direct

--- Code: ---<blockquote class="nice_quote">
--- End code ---
It is defined in the CSS of the template, but now have to be added manually .. the class.

2. Droplets icon missing and it is defined in the WB_CKConfig.js


Thanks a lot in advance!

Rumen

dbs:
Hi, @2: in the toolbar pic the last entry is About.
In the code pic last entry is FontSize. So it looks like this is not the used wb_ckconfig.js.
Maybe you have another one in /templates or /templates/your-template ?

rumen:
No, but I keep a backup of the original. Can they mess? I changed the extension from .js to .js.original

Gast:
#1 - not possible, to change the base definition from "blockquote" in ckeditor, because, its defined directly in the minified ckeditor.js and you'll lost everything in the next upgrade

but, maybe another solution for you

go to modules / ckeditor / wb_config / editor.styles.js - open this file with a editor like notepad++  etc

you see the the definition of the STYLE-Dropdownbar from the Editor  started with a code like this


--- Code: --- CKEDITOR.addStylesSet( 'wb',
[
--- End code ---

you see active and inactive lines, search there for the right place, to add a new definition in the list. every definition start's with a bracket and ends with comma like


--- Quote ---    { name : 'Blue Title'       , element : 'h3', attributes  : { 'class' : 'marker-blue' } },
--- End quote ---

blue is the name in the list
orange is the Tag-type, here <h3></h3>
green is a additional attribute, here class = marker-blue
you can also add style here like styles : {'color' : 'red' }


add now a new line, maybe directly in the top with this example code


--- Code: ---    { name: 'BQ-Div-Nice1'  , element: 'div', attributes: { 'class': 'nice_quote1'} },
    { name: 'BQ-P-Nice2'  , element: 'p', attributes: { 'class': 'nice_quote2'} },
--- End code ---

#1 builds a <div class="nice_quote1></div>"
#2 build a <p class="nice_quote2"></p>

save this file, go in the backend to a page without wysiwyg-editor, maybe to admintools, and then back to a wysiwyg section (with this action, you start a new browser-instance) - result in the Dropdownlist:



now, we need a little css

if you want to see the blockquote-style also direktly in the wysiwyg editor, you have to add this code in a file, named: editor.css


--- Code: ---.nice_quote1 {
  background: transparent;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
.nice_quote1:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
.nice_quote1 p {
  display: inline;
}
--- End code ---

you can save this file in your -frontend-template-directory and load it in the index.php, then you need only one css-defintion. otherwhise, you add the css also into the css-file from the frontend-template

results

in wysiwyg-area in backend


in frontend-output

rumen:
Thanks a lot mate! I will give it a try now! Perfect workaround solution!

You are great!

Navigation

[0] Message Index

[#] Next page