For Bootstrap turbo charged ckeditor

[♥joli1811]

This needs ckeditor with kcfinder to function there  are several addons should work with any

 

Anybody wanting to test my turbo charged ckeditor  can download --> here  demo --> here

 

It just means replacing your plug in folder and adjusting the config.js

 

It includes fontawesome / glyphicons (display front side ok bug in admin display ) / advanced images and table backgound images

 

Built and tested for bootstrap although should work on any osc version with a few tweaks

 

(maybe needs including font-awesome.css in template_top.php and bootstrap.css for normal 2.3.4 oscommerce versions I have not  tested !! )

 

I need tested on a few servers

 

Had one where it did not work I think the server must have somehow  blocked.

 

The use of the icons does enchances and compliments bootstrap the use of tables in bootstrap may present a problem in small view and is a work in progress

 

For me i could not get working correctly using

//config.contentsCss = 'http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css';

i had to install the css in my admin see config.js  in the install package for more details

 

Regards

Joli

 

PS: More info here it has a lot of dependencies hence the new plugin folder and may be extended still a few things I want to test

 

http://ckeditor.com/addon/fontawesome
http://ckeditor.com/addon/glyphicons
http://ckeditor.com/forums/Plugins/Background-image-for-Tables-and-table-Cells
http://alfonsoml.blogspot.co.uk/2011/01/background-image-plugin-for-ckeditor.html

[♥altoid]

@@joli1811 I can put on my localhost for a 234 bootstrap test shop if you think that will help.   What ckeditor did you use?   It's been a while since I installed that.

[♥joli1811]

Hi Steve,

 

Using the CKEditor 4.4.6 (revision 08188c4)  myself although it should work on earlier versions.

 

Best to download the latest package from ckeditor  and then follow the install instructions in one of the addons  do not use the site wide install from

 

JohnAtYM  as this can mess the seo fields up later when you install reloaded or Jacks header tags

 

I just target the description fields myself directly by adding class="ckeditor  to the end of the description fields example below for product desc in

 

admin/categories.php  line 597 by me but probably about line 520 by you as my file is modified

<td class="main"><?php echo tep_draw_textarea_field('products_description[' . $languages[$i]['id'] . ']', 'soft', '70', '15', (empty($pInfo->products_id) ? '' : tep_get_products_description($pInfo->products_id, $languages[$i]['id'])), 'class="ckeditor"'); ?></td>

so if I want in ckeditor in pagemanager or emails I just add the class to the tep_draw_textarea_field in the php file

 

There are many install ways now up to you below is my admin/includes/template_top.php

<script type="text/javascript" src="includes/general.js"></script>
<?php
if (!defined('USE_CKEDITOR_ADMIN_TEXTAREA')) {
tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_id, configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added, set_function) values ('', 'Use CKEditor', 'USE_CKEDITOR_ADMIN_TEXTAREA','true','Use CKEditor for WYSIWYG editing of textarea fields in admin',1,99,now(),'tep_cfg_select_option(array(\'true\', \'false\'),' )");
define ('USE_CKEDITOR_ADMIN_TEXTAREA','true');
}
if (USE_CKEDITOR_ADMIN_TEXTAREA == "true") {
?>
<script type="text/javascript" src="<?php echo tep_href_link('ext/ckeditor/ckeditor.js'); ?>"></script>
<script type="text/javascript" src="<?php echo tep_href_link('ext/ckeditor/adapters/jquery.js'); ?>"></script>

<?php
}
?>

</head>

No reason why it should not work on a local host as the css files are in the admin ckeditor/plugin/ folder but remember it needs the kcfinder to work most of the latest addon packages for oscommerce have it included.

 

The trick for you will be getting the paths correct on a localhost not much idea about that always use a live server myself

 

Really like the fontawesome icons great help when styling a product page

.

Thanks

John

 

PS: Mr Fimble added a new ckeditor package yesterday have not tested but his work is always good :)

[♥altoid]

OK, got this going.    Here's a screenshot with some experimenting around on my uniserver site.

 

 

You'll see a font awesome and glyphicon, with a bootstrap class table at the bottom.

 

I note that while in admin,  the table and the table and glyphicon don't show as they do on the front end.  I presume because BS is only on the front end so that would explain that.

 

Yet it's workable and handy.

 

For the tables, probably setting them up with the ckeditor table tool then going back in and recoding them for bootstrap may be a way to deal with that.

 

Edit....I didn't install KC finder though..

[♥joli1811]

Nice well needs still a bit of work I set up the tables in ckeditor and then view source to tweak (recode)

 

I thought the icons were dependent on the KC finder  interestng

 

The bootstrap glyphicon css is also in admin plugin folder 

 

as far as I can see on my setup either the fontawesome will work or the glyphicon  but not both together depending on who comes first probably.

 

Well still a beta thing fontawesome is enough as they have 400+ icons so not too worried about the glyphicon they are there if needed just not displayed in admin

 

For the tables -background images  probably only interesting for someone who has not so many products and can afford the time to make a nice display 

 

I still have the feeling but only a feeling that the way for a correct table display  is to give the product description and image display a definite width and class in the product_info.php

 

so that any tables can be better controlled  in all views as regards break points etc  (have to remember a -15pxmargin because of padding) but this may be wind blowing over the big house .col-xs-12 .col-md-8  something like that

 

more use and experience will tell still a bit new for me need to test / break and repair only way I learn :D

 

Thanks for testing seen the x 2 icons on the other thread can you change colour and make spin??

[♥altoid]

 

 

Thanks for testing seen the x 2 icons on the other thread can you change colour and make spin??

 

Maybe if I ingested the right type mushrooms. (w00t) 

 

 Sans that, is that css and/or js controlled?

 

I'll use this when I get around to going live,   thanks for getting those plugins together.