Please login or register.

Login with username, password and session length
Advanced search  

Author Topic: Addon: TinyMCE Editor with sNews skin  (Read 1033 times)

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Addon: TinyMCE Editor with sNews skin
« on: April 12, 2012, 10:35:53 PM »

This package uses TinyMCE version 3.4.3.2 and includes a new mysnews skin which is based on the same skin used by WordPress in later 2011. The new skin is located in: tiny_mce/themes/advanced/skins.

Step One: Download the ZIP, un-zip it in a safe place on your hard-drive, and copy the tiny_mce folder into the js folder in the root of your snews 1.7 project.

Step Two:   Changes in snews.php

1) Search for the // ARTICLES FORM function. In it, search for and comment these lines out:
Code: [Select]

   echo html_input('textarea', 'text', 'txt', $frm_text, l('text'), '', '', '', '', '', '2', '100', '', '', '');
   buttons();


Insert the follwing above or below them to generate TinyMCE's editor panel in place of the default textarea:
Code: [Select]

   echo html_input('textarea', 'text', 'contentpanel', $frm_text, '', 'mceEditor', '', '', '', '', '2', '100', '', '', '');


2) - Disable the PREVIEW Panel
We no longer need the default PREVIEW panel when using TinyMCE, so we'll disable it. Further down in the same function, find and disable (or remove) these strings:
Code: [Select]

echo html_input('fieldset', '', '', '', '', '', '', '', '', '', '', '', '', '', '<a title="'.l('preview').
'" onclick="toggle(\'preview\')" style="cursor: pointer;">'.l('preview').'</a>');
echo '<div id="preview" style="display: none;"></div></fieldset></div><div class="adminpanel">';


Step Three: - index.php (template) File

This script starts by checking if the Admin is logged in and, if so,
   1) make the tiny_mce.js library file available,
   2) configure the Editor panel for usage in the admin panels
This way, we only load the TinyMCE javascript when logged in for admin purposes.

Place the following just above the </head> tag in the index.php file:
Code: [Select]

<?php
// If admin is logged in, load TinyMCE javascript.
if (_ADMIN) {
?>

<script type="text/javascript" src="js/tiny_mce/tiny_mce.js" ></script >
<script type="text/javascript" >
tinyMCE.init({
mode : "exact",
        elements : "contentpanel",
theme : "advanced",
skin : "mysnews",
  plugins : "media,emotions,preview",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,bullist,numlist,blockquote,outdent,indent,justifyleft,justifycenter,justifyright,justifyfull,hr,link,unlink,sub,sup,code,preview",
        theme_advanced_buttons2 : "forecolor,backcolor,charmap,fontselect,fontsizeselect,formatselect,image,media,insertfile,emotions,help",
        theme_advanced_buttons3 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_resizing : false
});
</script>
<?php ?>


And that's all there is to it.  Enjoy. 8)
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

konga

  • Newbie
  • *
  • Karma: 0
  • Posts: 14
    • Naturschutz Seite
Re: Addon: TinyMCE Editor with sNews skin
« Reply #1 on: April 17, 2012, 05:33:10 PM »

Thanks, works great!
Logged

Tropy

  • Newbie
  • *
  • Karma: 1
  • Posts: 25
Re: Addon: TinyMCE Editor with sNews skin
« Reply #2 on: November 10, 2012, 04:34:34 PM »

you should update the tutorial!

The fieldset is no longer ther but commented patched!

and the german charakters ΔάΦί didn't Shown as should they are &gt and so found a code for in this forum

will linke if i found it again
there
http://snewscms.com/forum/index.php/topic,8497.0.html
« Last Edit: December 16, 2012, 08:42:07 PM by Tropy »
Logged

BS0D

  • Newbie
  • *
  • Karma: 0
  • Posts: 18
Re: Addon: TinyMCE Editor with sNews skin
« Reply #3 on: January 18, 2013, 03:31:35 AM »

Hi,

I'm pretty eager to try this out! But I do have one question, is this addon compliant with webstandards?
All the tinymce addons i've tried were messing up my code and i had to get rid of them, because i was still coding directly in html... instead of actually using the visual editor.
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: Addon: TinyMCE Editor with sNews skin
« Reply #4 on: January 18, 2013, 04:46:01 PM »

I haven't experienced any problems with content composed in the package I have provided above.

But I did find - recently - that I had to make a few changes in the package's customized mysnews skin's ui.css file to make the TinyMCE Editor panel "standards compliant" when being used in the latest Firefox browser. (I modifed a WordPress skin file-set to make up the mysnews skin file-set).

The changes are all in the above package's themes/advanced/skins/mysnews/ui.css file:
Line 58 - disable: -moz-border-radius: 3px;
Line 170 - disable: filter:alpha(opacity=30);
Line 173 - disable: -moz-border-radius-bottomleft: 3px;
Line 177 - disable: -moz-border-radius-topleft: 3px;
Line 183 - disable: -moz-border-radius-bottomright: 3px;
Line 187 - disable: -moz-border-radius-topright: 3px;
Line 245 - disable: filter:alpha(opacity=50);

These changes have not been made in the package I provided above, so you will have to make these changes yourself to make the mysnews skin istelf standards compliant.
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Tropy

  • Newbie
  • *
  • Karma: 1
  • Posts: 25
Re: Addon: TinyMCE Editor with sNews skin
« Reply #5 on: January 19, 2013, 12:30:03 PM »

you also can trurn
Quote
theme_advanced_resizing : false

to 
Quote
theme_advanced_resizing : true
if the box will not fit to your theme

there also is an option for horizontal resizeing ,
you have to put _horizontal after the code above.
there are mutch more options!

i installed the newest tinymce from their HP,
 and fit it to the addon very simple, and ther are a full tinymce script with all options possibel .

i have add some mor for my needs!

mfg tropy

P.s.: i have also no messy code!
Logged