Please login or register.

Login with username, password and session length
Advanced search  
Pages: [1] 2

Author Topic: Simple way to add the TinyMCE WYSIWYG editor  (Read 9769 times)

easy

  • Newbie
  • *
  • Karma: 2
  • Posts: 5
Simple way to add the TinyMCE WYSIWYG editor
« on: June 03, 2009, 12:27:30 PM »

0. backup snews.php and database
1. download TinyMCE package from http://tinymce.moxiecode.com/download.php
2. unpack tiny_mce folder from archive to /snews_root/js



3. put tinymce.php to /snews_root
Code: (tinymce.php) [Select]
<!-- TinyMCE -->
<script type="text/javascript" src="<?php echo _SITE ?>js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)
content_css : "css/style.css",

});
</script>
<!-- /TinyMCE -->

4. modify snews.php, insert
Code: [Select]
include('tinymce.php');before
Code: [Select]
echo html_input('textarea', 'text', 'txt', $frm_text, l('text'), '', '', '', '', '', '2', '100', '', '', '');
buttons();
in function form_articles($contents) //line 2006

5. enjoy!  ;D
Logged

Kamo

  • Newbie
  • *
  • Karma: 0
  • Posts: 10
Re: Simple way to add the TinyMCE WYSIWYG editor
« Reply #1 on: August 26, 2009, 03:44:24 PM »

Hi
Almost works fine...almost:



Just playing with it nothing serious but would be great to know how to make it look normal.
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Simple way to add the TinyMCE WYSIWYG editor
« Reply #2 on: August 26, 2009, 04:09:24 PM »

Kamo - most likely you'll need to change the textarea width for it to work within your layout.
In the default style.css style sheet, there is this rule:
Code: [Select]
textarea {
width:97%;
height:20em;
padding:3px;
}

Play with the width value, you could for example set it to a specified pixel value, or a percentage value that fits -- by the looks of it something like 60-64 % would work.
Logged

Kamo

  • Newbie
  • *
  • Karma: 0
  • Posts: 10
Re: Simple way to add the TinyMCE WYSIWYG editor
« Reply #3 on: August 26, 2009, 11:43:07 PM »

Thx for quick answer. Well this value has nothing to do with tiny mce. I can set it to 20% and nothing changes :/
Checked in 3 browsers.
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Simple way to add the TinyMCE WYSIWYG editor
« Reply #4 on: August 27, 2009, 12:55:33 AM »

Doesn't really make sense, but then I don't know exactly how your layout is constructed.
As a test, does anything change if you alter the values in this code
Quote
echo html_input('textarea', 'text', 'txt', $frm_text, l('text'), '', '', '', '', '', '2', '100', '', '', '');

to, for example
Quote
echo html_input('textarea', 'text', 'txt', $frm_text, l('text'), '', '', '', '', '', '2', '50', '', '', '');

But even so, the width setting in your stylesheet for textarea should override that. Maybe if you could show the style code you have for the container div holding the textarea? That could help sort this out.
Logged

Kamo

  • Newbie
  • *
  • Karma: 0
  • Posts: 10
Re: Simple way to add the TinyMCE WYSIWYG editor
« Reply #5 on: August 27, 2009, 08:10:20 AM »

Sure i can. I'm using mdj's cool black theme so the css is he's :)

http://kamolot.net/snews2/css/style.css

About changing values in snews.php: Same result...i mean no result :)
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Simple way to add the TinyMCE WYSIWYG editor
« Reply #6 on: August 27, 2009, 12:21:07 PM »

Ok, I expected it to not have any result.
Matt's theme does have a rule for textarea, with width set to "90%", however it appears that TinyMce is setting its layout table width ("auto") according to the #wrapper div's width instead of the #content div's width (unless I'm mistaken, the editor textarea is within the #content div).

Try changing the stylesheet setting in tiny_mce.js to a non-existent style sheet, for example "css/foo.css", and see what that does (other than making the textarea font become browser default).
« Last Edit: August 27, 2009, 12:31:30 PM by Fred K (agentsmith) »
Logged

Kamo

  • Newbie
  • *
  • Karma: 0
  • Posts: 10
Re: Simple way to add the TinyMCE WYSIWYG editor
« Reply #7 on: August 27, 2009, 01:15:26 PM »

Sorry for being...well dumb  but i can't find any stylesheet setting in tiny_mce.js file. Can you point me to the correct line? or piece of code so i can search and replace?
Logged

slemborg

  • Jr. Member
  • **
  • Karma: 2
  • Posts: 82
Re: Simple way to add the TinyMCE WYSIWYG editor
« Reply #8 on: August 27, 2009, 03:09:55 PM »

Try removing some buttons from your advanced theme, as they might be the reason.
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Simple way to add the TinyMCE WYSIWYG editor
« Reply #9 on: August 27, 2009, 03:12:32 PM »

Sorry for being...well dumb  but i can't find any stylesheet setting in tiny_mce.js file. Can you point me to the correct line? or piece of code so i can search and replace?

Sorry, my mistake, should've been "tiny_mce.php". This code:
Quote from: tiny_mce.php
// Example content CSS (should be your site CSS)
      content_css : "css/style.css",

Change to --for example--
Quote
// Example content CSS (should be your site CSS)
      content_css : "css/foo.css",

Having tested some more though, I don't think it'll have much effect...
« Last Edit: August 27, 2009, 03:14:18 PM by Fred K (agentsmith) »
Logged

slemborg

  • Jr. Member
  • **
  • Karma: 2
  • Posts: 82
Re: Simple way to add the TinyMCE WYSIWYG editor
« Reply #10 on: August 27, 2009, 03:20:46 PM »

The solution is quite simple actually, in your tinymce.php
rearrange the button to fit your layout, the buttons are:
Code: [Select]
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
Try moving them around, adding a new line of buttons, etc. that will sort it.
« Last Edit: August 27, 2009, 03:29:59 PM by slemborg »
Logged

Kamo

  • Newbie
  • *
  • Karma: 0
  • Posts: 10
Re: Simple way to add the TinyMCE WYSIWYG editor
« Reply #11 on: August 27, 2009, 05:27:09 PM »

Slemborg's Idea worked perfectly. I have rearranged the tools to 5 lines  and it fits almost perfectly.. there's a few milimeters wide area still but it's not bad at all it's just an admin area so no biggy :)


Thank You both  :D


edit:  all works well except few things.. When i try to insert few things such as emoticons from it into tthe article i just get &nbsp; insted of a emoticon.. This applies for few other things. Any ideas?
« Last Edit: August 27, 2009, 06:11:01 PM by Kamo »
Logged

slemborg

  • Jr. Member
  • **
  • Karma: 2
  • Posts: 82
Re: Simple way to add the TinyMCE WYSIWYG editor
« Reply #12 on: August 27, 2009, 06:34:35 PM »

Glad to help.
Logged

Creatium

  • Jr. Member
  • **
  • Karma: 0
  • Posts: 55
Re: Simple way to add the TinyMCE WYSIWYG editor
« Reply #13 on: October 17, 2009, 10:49:10 AM »

Hello! This mod works for me perfectly, exept one thing: in my site im writing in Lithuanian (utf-8). And instead symbols ąčėįųū i see codes (like &#279;). This editor doesnt save utf-8 symbols like it should. What should i do?

P.S. I saw that stead the space, i get &nbsp;
« Last Edit: October 17, 2009, 10:51:26 AM by Creatium »
Logged
Aurea praxis, sterilis theoria.

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Re: Simple way to add the TinyMCE WYSIWYG editor
« Reply #14 on: October 17, 2009, 02:34:25 PM »

Creatium,

You need to modify function file_include($text, $shorten) in snews.php, which start around line 3230. (Make sure you have a backup copy before changing things.) The first part of that function looks like this:

Code: [Select]
function file_include($text, $shorten) {
$fulltext = substr($text, 0, $shorten);
   if(substr_count ($fulltext, '&')>0){$fulltext = str_replace('&', '&amp;', str_replace('&amp;', '&', $fulltext));}
if ($shorten < 9999000 && preg_match('<p>',$fulltext)) {
if (substr_count ($fulltext, '<p>') > substr_count ($fulltext, '</p>')) {
$fulltext .='</p>';
}
}

Change it to look like this:
Code: [Select]
function file_include($text, $shorten) {
$fulltext = substr($text, 0, $shorten);
if ($shorten < 9999000 && preg_match('<p>',$fulltext)) {
if (substr_count ($fulltext, '<p>') > substr_count ($fulltext, '</p>')) {
$fulltext .='</p>';
}
}

I had to go through that just the other day and it worked fine for me (for a site in Swedish).
Logged
Pages: [1] 2