Rich Text Editor (rte)

[al3loo]

Hi everybody,

While I was surfing in the help section I see a request for richtext and with link, so I try to make it compatible with the CNR .. this a present for the topic's writer !

I think the editor of cnr is really good for me but not for users ..

Here is » the example
I just remember it's the old editor that cutenews using it ..



Anyway, to use this you'll need some configuring in the files. I couldn't make it a plugin it's a little hard to me

Edited Files and additional files:

RTE
- skins/rte
--- skins/rte/images
--- blank.htm
--- insert_table.htm
--- multi.htm
--- palette.htm
--- richtext.js
--- rte.css

I edited in richtext.js file and added a nice expaning and contracting tool
and removed some unused buttons

Improved skin for admin panel compatible with rte
- skins/default_2.skin.php
- skins/default_2.css


Installing:

1. upload (rte & default_2.css & default_2.skin.php) to skins folder.
2. change style to default_2 from System settings » Skin.
3. Make a cope of your files (addnews.mdu and editnews.mdu) from directory inc/mod for more safer.
4. Move and Replace (addnews.mdu and editnews.mdu) to directory inc/mod folder.
5. Edit functions.inc.php and add in last of the file before (?>) this code:

////////////////////////////////////////////////////////
// Function: rteSafe
// Description: safe data for the RTE

function rteSafe($strText) {
//returns safe code for preloading in the RTE
$tmpString = $strText;

//convert all types of single quotes
$tmpString = str_replace(chr(145), chr(39), $tmpString);
$tmpString = str_replace(chr(146), chr(39), $tmpString);
$tmpString = str_replace("'", "'", $tmpString);

//convert all types of double quotes
$tmpString = str_replace(chr(147), chr(34), $tmpString);
$tmpString = str_replace(chr(148), chr(34), $tmpString);
// $tmpString = str_replace("\"", """, $tmpString); // we are pasting the content within '' quotes so " are valid

//replace carriage returns & line feeds
$tmpString = str_replace(chr(10), " ", $tmpString);
$tmpString = str_replace(chr(13), " ", $tmpString);

return $tmpString;

}

6. if you want to use and insert smilies ..
Edit functions.inc.php and search for:

Code: Select all

$output .= '<a href="javascript:insertext(\':'.trim($smile).':\', \'\', \''.$insert_location.'\')"><img style="border: none;" alt="'.trim($smile).'" src="'.$config_http_script_dir.'/data/emoticons/'.trim($smile).'.gif" /></a>';

replace it with:

Code: Select all

$output .= '<a href="#" onclick="document.getElementById(\''.$insert_location.'_story\').contentWindow.document.execCommand(\'InsertImage\', false, \''.$config_http_script_dir.'/data/emoticons/'.trim($smile).'.gif\'); return false;"><img style="border: none;" alt="'.trim($smile).'" src="'.$config_http_script_dir.'/data/emoticons/'.trim($smile).'.gif" /></a>';

7. You can browse your image and insert it, but you need to edit in images.mdu file
search for:

Code: Select all

function insertimage(text){
   text = ' ' + text + ' ';
   opener.document.forms['addnews'].<?=$area; ?>_story.focus();
   opener.document.forms['addnews'].<?=$area; ?>_story.value  += text;
   opener.document.forms['addnews'].<?=$area; ?>_story.focus();
}

replace it with:

Code: Select all

function insertimage(selectedImage) {
   var html = selectedImage;
   window.opener.insertHTML(html);
   window.close();
}

and search for every:

Code: Select all

{imagepath}/'.($user ? $user.'/' : '')

replace all with:

Code: Select all

'.$config_path_image_upload.'/'

8. Enjoy !


** Big note: These modifications are for changing the default editor to this one **


Best Regards,
AlEloo

[scottdallas]

This looks beautiful. I can't wait to try it. I hope it works and looks as good as in the screenshot Any trouble thus far loading back the data through show_news.php after you save content?

[Partyism]

what about inserting images from cutenewsru data? you cant browse them by default

[al3loo]

Any trouble thus far loading back the data through show_news.php after you save content?

No, everything is alright !

But there is something I don't like it in, the altribute is shown with Capital Letter ie.(<DIV / <IMG / <EM>) and not a valid XHTML ..

what about inserting images from cutenewsru data? you cant browse them by default

I may could make the button for the popup, but I can't make the image inserting from image.mdu to the rte area.. its need some modifying in the javascript code, I'll try to work on that

Edited in the first post !!

Also, if you want to edit addnews.mdu and editnews.mdu by yourself just follow these steps..

Edit addnews.mdu by any editor and search for:

Code: Select all

<textarea name="short_story" tabindex="4"></textarea>

replace it with:

Code: Select all

<script language="JavaScript" type="text/javascript">
   initRTE("skins/rte/images/", "skins/rte/", "skins/rte/", false);
   // Usage: writeRichText(ID, HTML, width, height, buttons, readOnly)
   writeRichText('short_story', '', 460, 250, true, false);
</script>

search for:

Code: Select all

<textarea name="full_story" tabindex="5"></textarea>

replace it with:

Code: Select all

<script language="JavaScript" type="text/javascript">
   writeRichText('full_story', '', 460, 300, true, false);
</script>

Edit editnews.mdu search for:

Code: Select all

<textarea name="short_story" tabindex="4"><?=htmlspecialchars(replace_news('admin', $story['short'])); ?></textarea>

replace it with

Code: Select all

<script language="JavaScript" type="text/javascript">
   initRTE("skins/rte/images/", "skins/rte/", "skins/rte/", true);
   writeRichText('short_story', '<?=rteSafe(replace_news('admin', $story['short']));?>', 460, 250, true, false);
</script>

search for:

Code: Select all

<textarea name="full_story" tabindex="5"><?=htmlspecialchars(replace_news('admin', $story['full'])); ?></textarea>

replace it with:

Code: Select all

<script language="JavaScript" type="text/javascript">
   writeRichText('full_story', '<?=rteSafe(replace_news('admin', $story['full']));?>', 460, 300, true, false);
</script>

Regards

[erlendfl]

Where can I download this?
Can't see a link to the edited files.

I really need this one. Starting on a whole new project, a personal website for me. This time I'm starting with a new fresh installation and I will make it as powerful and good as I want it. Now I got three or four different versions running on different websites. I want to make one "erlendfl_cnr_edited_powerful" lol!

So where can I download the files to install this editor. My clients is screaming for it, because the tinyFCK will load slow on several hosts.

[Partyism]

Im going to try this.

Edit: Ive got one problem with the images. data/upimages/partyism-nl/subfolders/games/subfolders/games/buzz.jpg

The subfolder + name is two times displayed. Trying to fix this.

[Partyism]

I managed to get the image beein displayed in addnews but when i look in my article its not beeing displayed.

This is the link: http://www.partyism.nl/algemeen/1489/da ... s/buzz.jpg

Where "algemeen/1489" should be cuteru map

[Partyism]

another problem. When i published a news article which i have copy paste from another site and decide i want to edit that article again.
I just cant... The fields are gone, see the attachment

[scottdallas]

ooh that's weird. i think you need to make whatever changes to addnews.mdu to editnews.mdu too. i don't think the edit page has the editor attached to the <textarea>

[Partyism]

well it does by default. See the download folder inc. Both files are attached and edited.

[scottdallas]

oh damn i have no idea then

[nolikewise]

There is a problem when editting news, it says editted but there is no change... so i think rteSafe function needs to be developed... And also if anybody can make a word html cleaning process it'll be the best of all... because when you paste a formatted text from word to editor, it imports all unnecessary remnants. To prevent this i use DW as a convertor to pure HTML...

Waiting your opinions and help

[al3loo]

Hello !

First, sorry for late reply, I was very busy last months ..

Where can I download this?
Can't see a link to the edited files.

It's in the attachment dude !!

The subfolder + name is two times displayed.

Sure you have a problem with editing images.mdu check all what you did !!

There is a problem when editting news, it says editted but there is no change... so i think rteSafe function needs to be developed... And also if anybody can make a word html cleaning process it'll be the best of all... because when you paste a formatted text from word to editor, it imports all unnecessary remnants. To prevent this i use DW as a convertor to pure HTML...

Waiting your opinions and help

I don't have any problem here, it's work fine. The rteSafe function is just to make the quotation marks and some other symbols safe with the rte !! and about past from Word I don't have and idea for it now !
I think you need the tinymce Editor it's more practically and have a lot features also, there is past from word button !!


By the way I update that (RTE) which it now valid with xhtml and with a lot new features .. now I'll attach the new files with all the new editing !

Installing:

First Download attached file in this post !

Follow installing steps (1-6) but with this update to steps 3 & 4:
3. Make a cope of your files (addnews.mdu, editnews.mdu and images.mdu) from directory inc/mod for more safer.
4. Move and Replace (addnews.mdu, editnews.mdu and images.mdu) to directory inc/mod folder.

Also, upload cbrte folder to CNR skins folder ..

You may need edit function.inc.php:
Search for:

Code: Select all

      $find    = array('{nl}', '<br>', '<br />');
      $replace = array("\n", "\n", "\n");

replace with:

Code: Select all

      $find    = array('{nl}');
      $replace = array("<br />");

If you have any <br />'s problem (like showing much line space) .. just use [Format Switcher]

Features:

- Now all attribute is valid XHTML.
- You can change functionality like enabling or disabling any button in the Editor.
- The Usage file is attached with all command reference !


Best Wishes,

[Partyism]

ill try again. You've seen my problem btw?

[al3loo]

Hi Partyism !

I think your problem will be solved with this, open function.inc.php and Search for:

Code: Select all

$tmpString = str_replace("'", "'", $tmpString);

Replace it with:

$tmpString = str_replace("'", "&#39;", $tmpString);

The forum was the reason for this