PDA

View Full Version : How To: for Vivvo 4.1 - Paste from Word, Paste as plain text, Select all (TinyMCE)


DRIVE
12-17-2008, 04:21 PM
*If using Vivvo 4.0.x see this http://www.vivvo.net/forums/showthread.php?t=2043 *but you should upgrade ;)

Vivvo 4.1 brings lots of changes including and updated version of the wysiwyg editor TinyMCE. Here are the steps you need to take to enable pasting from word, pasting as plain text and the "select all" feature as well as enabling the secondary "skin" that is like a cool blue (you can also download other skins from the net and use them easily).

Step 1) Download the latest version of TinyMCE and unzip the file to a directory OUTSIDE of your Vivvo installation on your computer (you cant download the plugins separately and the one that ships with Vivvo doesn’t have all the stuff you need for the Paste plugin). http://tinymce.moxiecode.com/index.php (http://tinymce.moxiecode.com/index.php)

*Note that the "paste" icon that exists/comes with the default editor does not work in FireFox unless you do this:
http://www.mozilla.org/editor/midasdemo/securityprefs.html (http://www.mozilla.org/editor/midasdemo/securityprefs.html)
The new stuff we're adding have no trouble ;)

Step 2) Upload FROM your newly extracted TinyMCE folder (Version 3.2.1.1 at time of this writing) the
tinymce\jscripts\tiny_mce\plugins\paste
Upload the whole folder. If the folder already exists, overwrite all files in /[VIVVO_URL]js/tiny_mce/plugins/paste

Step 3) Open [VIVVO_ADMIN_URL]/js/tinyMCE_config.php
At the top of the file, you'll see this:
echo 'advimage,media",
theme_advanced_buttons1 : "bold,italic,underline,striketrough,separator,justi fyleft,justifycenter,justifyright,justifyfull,sepa rator,styleselect,formatselect,fontselect,fontsize select,separator,removeformat,cleanup",
theme_advanced_buttons2: "cut,copy,paste, separator,bullist,numlist,separator,outdent,indent ,separator,undo,redo,separator,link,unlink,anchor, separator,forecolor,backcolor,separator,image,medi a,separator,code,separator,upload",
theme_advanced_buttons3 : "",

Change it to this (new stuff is in red):
echo 'advimage,media,paste",
theme_advanced_buttons1 : "bold,italic,underline,striketrough,separator,justi fyleft,justifycenter,justifyright,justifyfull,sepa rator,styleselect,formatselect,fontselect,fontsize select,separator,removeformat,cleanup",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,selectall,separ ator,bullist,numlist,separator,outdent,indent,sepa rator,undo,redo,separator,link,unlink,anchor,separ ator,forecolor,backcolor,separator,image,media,sep arator,code,separator,upload",
theme_advanced_buttons3 : "",

There are also options that you can do and I suggest that you read the Wiki on the Paste Plugin. Here are the ones I use.... they are self explanatory and the wiki can detail it further so you can tweak to meet your needs:

Open [VIVVO_ADMIN_URL]/js/tinyMCE_config.php
Around line 34 look for this and add the stuff in red:
theme_advanced_buttons3 : "",
paste_create_paragraphs : false,
paste_create_linebreaks : false,
paste_use_dialog : true,
paste_auto_cleanup_on_paste : true,
theme_advanced_toolbar_location : "top",


That’s it, you're done. Enjoy! :)

Optional:

Change Skin
In [VIVVO_ADMIN_URL]/js/tinyMCE_config.php change this:
echo 'tinyMCE.init({
mode : "exact",
elements : "article_body",
theme : "advanced",
plugins : "'; to this:
echo 'tinyMCE.init({
mode : "exact",
elements : "article_body",
theme : "advanced",
skin : "o2k7",
plugins : "';

Font too small in the editing box and other textareas?
Open [VIVVO_URL]/js/tiny_mce/themes/advanced/skins/default/content.css
Change the font-size on the first line from 11px to 12px or more if you like
body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:8px;}

In the same folder, open forms.css
On line 10 change this font-size as well:
textarea {font-family: Arial, Helvetica, sans-serif; font-size: 12px;}

shketuljko
12-18-2008, 09:52 AM
Hey man! Good how-to!
Thanks for sharing information with us.

MemoBony
12-29-2008, 09:35 AM
Font too small in the editing box and other textareas?
Open [VIVVO_URL]/js/tiny_mce/themes/advanced/skins/default/content.css
Change the font-size on the first line from 11px to 12px or more if you like

It's indeed the font size is very small in the editing textarea.
It's great DRIVE! however I haven't .../skins/default/content.css but anyway I found the correct css. I change the the font size but without any action! is that because my tinymce is old verssion?

By the way, have anyone an idea how to change the textarea to RTL?
My Vivvo is 4.0.3

Thanks alot,

DRIVE
12-29-2008, 03:18 PM
the correct css is probably in /admin/css/forms.css around line 12....

textarea {font-family: Arial, Helvetica, sans-serif; font-size: 12px;}

For RTL in textareas (and any type of input) you can add the "dir" attribute... you can also add the "lang" attribute if it suits your need.

In /admin/templates/article_edit/form.xml around line 41 you should see something like this:

<textarea id="article_body" name="ARTICLE_body" style="width:99%;height:400px;">

You could change it to:

<textarea id="article_body" name="ARTICLE_body" lang="nl" dir="rtl" style="width:99%;height:400px;">

Hope this helps... there might be more than one template you need to change in /admin/ but you should be able to find them based on the above...

MemoBony
12-30-2008, 02:03 PM
Thanks DRIVE, it's nice always to find someone try to help other. These steps I did't already, but without any affect, but maybe these (more than one template) is somewhere I have to find it :)

One more time thanks a lot.

DRIVE
12-30-2008, 06:17 PM
You're welcome..... ummmm.... its been a while since I messed with it (your version of tinyMCE) but one thing you have to be sure of is that you are not looking at a cached set of scripts and css that load the editing box. TinyMCE, especially the version you are using is famous for caching.... I personally spent hours years ago thinking my changes werent taking effect only to find out that it was all cached thus, I was not seeing anything change:p if using FireFox, turn caching off altogether... you should also install Firebug (http://getfirebug.com/), recommended by Boccio and something that you will find very valuable for hunting down strange problems :)

If you can, try doing a directory search on your entire directory in your /admin/ for textarea and then begin examining all of the files that have that attribute and see if you can hunt it down..... let me know if you fix it and where you found the stuff... if not, let me know what you tried that didnt work after you've found all files with "textarea" in them.

Impaler
03-21-2009, 10:14 PM
thanks for the quick guide :) I implemented it without a problem :)