Adding Full CKEditor to CMS Static Page editor

[Meestor_X]

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.

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?


Thanks!

-Andy.

[Lynne]

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:

.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):

.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]

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]

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]

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]

I entered it for each definition.

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

[HouseAddict]

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] ---------------

Originally Posted by Lynne

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:

.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):

.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]

Even created a request for that, but no luck so far:

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