vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB4 Programming Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=252)
-   -   Adding Full CKEditor to CMS Static Page editor (https://vborg.vbsupport.ru/showthread.php?t=265295)

Meestor_X 06-16-2011 01:56 PM
Adding Full CKEditor to CMS Static Page editor
 
So, tried this in 4.1.3 and it worked fine except that the CKEditor CSS was quite messed up with vb's CSS. I figured once vb had integrated CKEditor they probably would fix all the CSS issues. I was right. https://vborg.vbsupport.ru/

Under 4.1.3, I had only uploaded CKEditor to a forum sub-folder, and done 2 simple changes to the vbcms_content_staticpage_inline template.

First was, changing, at the top of the template:
PHP Code:
<div class="fullwidth">
        {vb:raw editbar}
    </div> 
to:
PHP Code:
<div class="fullwidth">
        {vb:raw editbar}
                <script type="text/javascript" src="/testvb/ckeditor/ckeditor.js"></script>
    </div> 
and changing:
PHP Code:
<div class="blockrow">
                    <label class="quarter" for="pagetext">{vb:rawphrase content}: </label>
                    <div class="threequarters"><textarea  name="pagetext" cols="80" rows="20">{vb:raw  pagetext}</textarea>
                    </div>
                </div> 
to:
PHP Code:
<div class="blockrow">
                    <label class="quarter" for="pagetext">{vb:rawphrase content}: </label>
                    <div class="threequarters"><textarea  class="ckeditor" name="pagetext" cols="80" rows="20">{vb:raw  pagetext}</textarea>
                    </div>
                </div> 
So today I upgraded my test site to 4.1.4 to see what would happen.

CSS is fixed, but toolbar icons are missing. Toolbar functions all work, but are missing the proper icon.

Any suggestions on what to do to fix this?

https://vborg.vbsupport.ru/external/2011/06/46.jpg
Thanks!

-Andy.

Lynne 06-16-2011 03:07 PM
It looks like you are trying to add all the other buttons, but do you have the images for them? If you look at the sprint.png file here, I don't think it has the images you need - https://www.vbulletin.com/forum/imag...tor/sprite.png That is the default that comes with vbulletin. I think you will need to get another sprite file that has the additional images.

Actually, I tried this. The problem is all the buttons are using this CSS as default:
HTML Code:
.cke_skin_kama span:not(.cke_browser_ie) .cke_button .cke_icon {    background: url("images/editor/sprite.png") no-repeat scroll left top transparent;}
And it is overriding this (which I think is incorrect also):
HTML Code:
.cke_skin_kama .cke_button .cke_icon {    background-image: url("icons.png");    background-position: 100px 50%;    background-repeat: no-repeat;    cursor: default;
... }
To fix, you need to edit the clientscript/ckeditor/skins/kama/editor.css file to not exclude the icons.css file. Then you need to edit the icons.css file and do a find replace of ".cke_skin_kama" and replace with ".cke_skin_kama span:not(.cke_browser_ie)" and also add a background image for all the icons of "background-image: url("icons.png");". Save. Upload. That will also replace all the images that vb had made for the editor, but I didn't feel like going through the icons.css file and finding the vb made ones and deleting them from the file.

Meestor_X 06-16-2011 07:42 PM
Thanks, Lynne for your fast answer.

Where do I add "background-image: url("icons.png");" ? Can't I just change that in editor.css from "sprite.png" to "icons.png" (after copying icons.png to the appropriate folder) on the line you quoted?

Lynne 06-16-2011 08:21 PM
I made the changes in the file icons.css since I was in there anyway. But, you can do it however you want. I was just doing a quick test to see how to get it to work. I don't know if it was the best way - I just know I found *a* way to get it to work.

Meestor_X 06-19-2011 06:10 AM
Thanks, Lynne.

I must have misunderstood a step, as I have not got it working from your instructions. I think I still am missing where to put "background-image: url("icons.png");" You are saying that you put it in icons.css and it worked. Where exactly?

Lynne 06-19-2011 04:07 PM
I entered it for each definition.

HTML Code:
.cke_skin_kama span:not(.cke_browser_ie) .cke_button_source .cke_icon
{
    background-position: 0 0;
    background-image: url("icons.png");
}

HouseAddict 06-23-2011 12:53 PM
How do I, instead of this full blown editor:

http://img706.imageshack.us/img706/3...reen000319.jpg

include the regular, customized one with minimal options (that shows up everywhere else in cms/forum):

http://img863.imageshack.us/img863/211/screen000320.jpg

--------------- Added [DATE]1308838536[/DATE] at [TIME]1308838536[/TIME] ---------------

Quote:
Originally Posted by Lynne (Post 2208543)
It looks like you are trying to add all the other buttons, but do you have the images for them? If you look at the sprint.png file here, I don't think it has the images you need - https://www.vbulletin.com/forum/imag...tor/sprite.png That is the default that comes with vbulletin. I think you will need to get another sprite file that has the additional images.

Actually, I tried this. The problem is all the buttons are using this CSS as default:
HTML Code:
.cke_skin_kama span:not(.cke_browser_ie) .cke_button .cke_icon {    background: url("images/editor/sprite.png") no-repeat scroll left top transparent;}
And it is overriding this (which I think is incorrect also):
HTML Code:
.cke_skin_kama .cke_button .cke_icon {    background-image: url("icons.png");    background-position: 100px 50%;    background-repeat: no-repeat;    cursor: default;
... }
To fix, you need to edit the clientscript/ckeditor/skins/kama/editor.css file to not exclude the icons.css file. Then you need to edit the icons.css file and do a find replace of ".cke_skin_kama" and replace with ".cke_skin_kama span:not(.cke_browser_ie)" and also add a background image for all the icons of "background-image: url("icons.png");". Save. Upload. That will also replace all the images that vb had made for the editor, but I didn't feel like going through the icons.css file and finding the vb made ones and deleting them from the file.

And that didn't work for me either... I still have those missing icons showing up.

HouseAddict 07-05-2011 12:22 AM
Even created a request for that, but no luck so far:

http://tracker.vbulletin.com/browse/VBIV-12549


All times are GMT. The time now is 07:43 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01177 seconds
  • Memory Usage 1,755KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (5)bbcode_html_printable
  • (4)bbcode_php_printable
  • (1)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (8)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete