WebsiteBaker Community Forum
WebsiteBaker Support (2.12.x) => General Help & Support => Topic started by: rumen on February 27, 2019, 09:46:20 PM
-
Hi there,
1. When I click in Ck Editor the icon "blockquote" it apply code
<blockquote>
How can I put class (not to make it manually every time) so when I click the icon to get direct
<blockquote class="nice_quote">It is defined in the CSS of the template, but now have to be added manually .. the class.
2. Droplets icon missing (https://prnt.sc/mr1do6) and it is defined in the WB_CKConfig.js (https://prnt.sc/mr1cva)
Thanks a lot in advance!
Rumen
-
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 ?
-
No, but I keep a backup of the original. Can they mess? I changed the extension from .js to .js.original
-
#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
CKEDITOR.addStylesSet( 'wb',
[
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
{ name : 'Blue Title' , element : 'h3', attributes : { 'class' : 'marker-blue' } },
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
{ name: 'BQ-Div-Nice1' , element: 'div', attributes: { 'class': 'nice_quote1'} },
{ name: 'BQ-P-Nice2' , element: 'p', attributes: { 'class': 'nice_quote2'} },
#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:
(https://i.gyazo.com/c2b47e2e63d6b2b33658c2239f67a20e.png)
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
.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;
}
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
(https://i.gyazo.com/191d30ac30b157b447922a286aaeb6ef.png)
in frontend-output
(https://i.gyazo.com/2c3b5e6949fd1b53f5ee2cc8819ce48a.png)
-
Thanks a lot mate! I will give it a try now! Perfect workaround solution!
You are great!
-
#2 - see answer from dbs - maybe another wb_ckconfig there??
to check it, make in the backend on the page with the editor and the missing Droplet-Icon outside from the editor-field a right-mouse-click and select: View Source
scroll down to this code here
(https://i.gyazo.com/34a915c4a9b9a5656e0dfbee742b9647.png)
there, you find the path's to the config-files , marked in pink
the skin - marked in yellow
the extra plugins - marked in blue
remove plugins - marked in red
the toolbar - marked in green
be sure, that you search in the correct toolbar and also, that you have wbDroplets in the extraPlugins, not in removePlugins
-
one more
use browser tools (F12-key) to search for the Icon
in my browser
Network-analysis -> select Grafics only -> reload the page , push the keys STRG + F and write "droplet" in the search field
it will show the _wbDroplet.gif and the loading status - but only, it the script sends this order (needs a activated plugin and no error in Javascript)
(https://i.gyazo.com/a80a57e84b576b24f666961be0866558.png)
do you have it only in this wb-installation or in every bulgarian wb? (maybe a language problem) - see also in console for more info's (if avaiable)
-
if you want..... the ckeditor works with browser language detection, but maybe, it works not in every case or for every language
go to modules/ckeditor/ckeditor/pluging/wbDroplet
and open there the file plugins.js
you see in the top the language definition
lang: [
CKEDITOR.config.defaultLanguage,
CKEDITOR.lang.detect(CKEDITOR.config.language )
],
and in the next line all avaiable language files for this plugin, but deactivated
switch the deactivation to the first code and activate the files like
// lang: [
// CKEDITOR.config.defaultLanguage,
// CKEDITOR.lang.detect(CKEDITOR.config.language )
// ],
lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,el,en-au,en-ca,en-gb,en,eo,es,et,eu,fa,fi,fo,fr-ca,fr,gl,gu,he,hi,hr,hu,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt-br,pt,ro,ru,sk,sl,sr-latn,sr,sv,th,tr,ug,uk,vi,zh-cn,zh', // %REMOVE_LINE_CORE%
now, you can translate the file modules/ckeditor/ckeditor/pluging/wbDroplet/lang/bg.js
reload the page and see, whats happend
-
Very very elegant solution (https://prnt.sc/mr3ifv) - For the first point!
Kudos to you!
-
Language changed as per instructions, but no changes. Also try to find the _wbdroplets.gif but it doesn't find it. I checked and the file is there in folder /orionstudio.rocks/modules/ckeditor/ckeditor/plugins/wbdroplets/icons/
if you want..... the ckeditor works with browser language detection, but maybe, it works not in every case or for every language
go to modules/ckeditor/ckeditor/pluging/wbDroplet
and open there the file plugins.js
you see in the top the language definition
lang: [
CKEDITOR.config.defaultLanguage,
CKEDITOR.lang.detect(CKEDITOR.config.language )
],
and in the next line all avaiable language files for this plugin, but deactivated
switch the deactivation to the first code and activate the files like
// lang: [
// CKEDITOR.config.defaultLanguage,
// CKEDITOR.lang.detect(CKEDITOR.config.language )
// ],
lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,el,en-au,en-ca,en-gb,en,eo,es,et,eu,fa,fi,fo,fr-ca,fr,gl,gu,he,hi,hr,hu,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt-br,pt,ro,ru,sk,sl,sr-latn,sr,sv,th,tr,ug,uk,vi,zh-cn,zh', // %REMOVE_LINE_CORE%
now, you can translate the file modules/ckeditor/ckeditor/pluging/wbDroplet/lang/bg.js
reload the page and see, whats happend
-
sorry, i mean wbdroplets.png (not the GIF)
but i found it also in this folder on your webspace
do you found any help in this post -> https://forum.WebsiteBaker.org/index.php/topic,31345.msg218824.html#msg218824?
-
The icon is there, but missing in the toolbar. Never mind. I will show them how to call the droplets from the AdinTools / Droplets
-
CKEditor - re uploaded via FTP and the problem was solved!
-
(Y) (Y)