Resources and Downloads: Changing and/or upgrading Vivvo's WYSIWYG editor

Changing and/or upgrading Vivvo's WYSIWYG editor
================================================================================
Vivvo Demo on May 07, 2008
 
Vivvo uses TinyMCE WYSIWYG editor for editing articles and pages. TinyMCE comes
with a bunch of plugins, of which Vivvo uses two: advimage and media. In
addition, Vivvo also takes advantage of tinyMCE upload plugin, which was
developed by our dev. team, and handles file uploads to user images folder, so
those can be later selected from dropdown menu in insert/edit image window.
The purpose of this How-To is to provide know-how where Vivvo stores WYSIWYG
editor and its instalces and how to replace it with one of your choice. In
attachment you can find files required in order to perform this task
succesfully.
Upgrading or changing WYSIWYG editor How-To is a resource for developer, and
all the potential problems that could arise in using custom editor are not
supported by Vivvo staff.
Location of TinyMCE in Vivvo system and instances
TinyMCE is located under: {VIVVO_URL}js/tiny_mce/
Init/config file is located in: {VIVVO_URL}admin/js/tinyMCE_config.php
TinyMCE is instanced in following places inside Vivvo system:
1. Add/edit article in Adminsitration:
{VIVVO_URL}admin/templates/article_edit/frame.xml
2. Add/edit page in Administration:
{VIVVO_URL}admin/templates/pages/form.xml
3. Submit story plugin
Submit Story has its own configuration file for TinyMCE. On this page TinyMCE
uses only media plugin.
init/conf file location is
{VIVVO_URL}plugins/submit_story/js/submit_story_tinyMCE_config.php
Keep in mind that you have to allow HTML(WYSIWYG) on plugin settings page in
order for tinyMCE to show up at all.
Upgrading TinyMCE to the latest version
Before proceeding with upgrade, it's recommended that you backup all
config/init files as well as tinyMCE folder itself and close your site for
maintenance.
*Backup .htaccess file from {VIVVO_URL}js/tiny_mce/	*Download tinyMCE 3.0.8
from http://tinymce.moxiecode.com/	*Download file upload.zip	*Delete folder
{VIVVO_URL}js/tiny_mce/ 	*Unpack tinyMCE archive and copy folder
jscrpits/tiny_mce to {VIVVO_URL}js	*Copy backup .htaccess file to
{VIVVO_URL}js/tiny_mce/	*Open file {VIVVO_URL}admin/js/tinyMCE_config.php and
change following lines (they are somewhere around line 35)
extended_valid_elements :
"a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|obj|param|embed],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],object,param,embed",
external_image_list_url : "js/tinyMCE_file_list.php?type=image",
media_external_list_url : "js/tinyMCE_file_list.php?type=media",
so they look like:
extended_valid_elements :
"a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|obj|param|embed],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],object[width|height|data],param[name|value|_value],embed[width|height|flashvars|allowfullscreen|quality|name|id|src|type]",
external_image_list_url : "'. VIVVO_URL .
'/admin/js/tinyMCE_file_list.php?type=image",
media_external_list_url : "'. VIVVO_URL .
'/admin/js/tinyMCE_file_list.php?type=media",
* Unpack upload.zip file (found in attachment)  in
{VIVVO_URL}js/tiny_mce/plugins/ (make sure that all files are extracted to
subfolder named upload)
With this, you've finished upgrading tinyMCE to the latest version on your
Vivvo website.
Installing another WYISWYG editor
For this How-To we chose to use FCKEditor as a primer for installing another
WYSIWYG editor in Vivvo. This applies to FCKeditor versions 2.5.1 and 2.6.0
Please note that these instructions apply to FCKEditor only. If you want to use
another editor, you'll have to consult its manual/documentation in order to
obtain information on adding that particular editor to your pages.
Before proceeding, it's recommended that you backup all config/init files as
well as existing tinyMCE folder and close your site for maintenance.
Download Latest FCKEditor (at This Moment 2.6) From Www.fckeditor.net
Unpack Archive And Copy Directory With All Files In VIVVO_ROOT/VIVVO_ADMIN_DIR/
Edit {VIVVO_ROOT}admin/article_edit.php
try to find this line: (should be somewhere around line 19 )
require_once (dirname(__FILE__) . '/admin_include.php');
below that (in the new line) you should add:
include(dirname(__FILE__) ."/fckeditor/fckeditor.php");
You will also have to replace this code: (should be somewhere around line 38 )
if ($um->isset_param('action') && $action === false){
$in_article = $um->get_param_regexp('/^ARTICLE_/');
$current_article = new Articles($sm, $in_article);
$template->assign('article', $current_article);
}else{
$sm->set_content();
}
with this code:
$oFCKeditor = new FCKeditor('ARTICLE_body') ;
$oFCKeditor->BasePath    = VIVVO_URL . VIVVO_FS_ADMIN_DIR . 'fckeditor/';
if ($um->isset_param('action') && $action === false){
$in_article = $um->get_param_regexp('/^ARTICLE_/');
$current_article = new Articles($sm, $in_article);
$template->assign('article', $current_article);
$oFCKeditor->Value = $current_article->get_body();
}else{
$sm->set_content();
if ($um->isset_param('search_id') && $um->get_param('search_id') != ''){
$oFCKeditor->Value = $sm->article->get_body();
}else{
$oFCKeditor->Value = '';
}
}
$html = $oFCKeditor->CreateHtml();
$template->assign('fck_editor', $html);
- Edit {VIVVO_ROOT}admin/templates/article_edit/form.xml Template
Replace this code: (should be somewhere around line 50 )
with this:
- Edit  {VIVVO_ROOT}admin/pages.php
after line (should be somewhere around line 19 )
require_once (dirname(__FILE__) . '/admin_include.php');
you should add line
include(dirname(__FILE__) ."/fckeditor/fckeditor.php");
and after lines  (should be somewhere around line 48 )
if ($um->isset_param('action') && $action === false){
$in_page = $um->get_param_regexp('/^PAGE_/');
$page = new Pages($sm, $in_page);
$content_template->assign('page', $page);
}
if (!($um->isset_param('action') && $action === false) &&
$um->get_param('search_pid')){
$pl = new Pages_list($sm);
$page =& $pl->get_pages_by_id($um->get_param('search_pid'));
if ($page){
$content_template->assign('page', $page);
}
}
and replace them with
$oFCKeditor = new FCKeditor('PAGE_body') ;
$oFCKeditor->BasePath    = VIVVO_URL . VIVVO_FS_ADMIN_DIR . 'fckeditor/';
if ($um->isset_param('action') && $action === false){
$in_page = $um->get_param_regexp('/^PAGE_/');
$page = new Pages($sm, $in_page);
$content_template->assign('page', $page);
$oFCKeditor->Value = $page->get_body();
}
if (!($um->isset_param('action') && $action === false) &&
$um->get_param('search_pid')){
$pl = new Pages_list($sm);
$page =& $pl->get_pages_by_id($um->get_param('search_pid'));
if ($page){
$content_template->assign('page', $page);
$oFCKeditor->Value = $page->get_body();
}
}
$html = $oFCKeditor->CreateHtml();
$template->assign('fck_editor', $html);
- Edit  {VIVVO_ROOT}admin/templates/pages/form.xml
replace following lines: (should be somewhere around line 63 )
with this:
then find and delete lines (should be somewhere around line 89 )
tinyMCE.execCommand('mceAddControl', false, 'page_body');
- Edit {VIVVO_ROOT}admin/templates/pages/tabs.xml
find and delete lines (should be lines 2 and 3 )
tinyMCE.execCommand('mceAddControl', false, 'page_body');
- Edit File
{VIVVO_URL}/admin/fckeditor/editor/filemanager/connectors/php/config.php
Set variable $Config['Enabled'] to `true`: (should be somewhere around line 30
)
$Config['Enabled'] = true ;
Add this line before $Config['UserFilesPath'] variable: (should be somewhere
around line 30 )
require_once(dirname(__FILE__) . '/../../../../../../conf.php');
Those two lines should look like:
require_once(dirname(__FILE__) . '/../../../../../../conf.php');
$Config['UserFilesPath'] = VIVVO_URL . 'files/' ;
Set variable $Config['UserFilesAbsolutePath'] to `dirname(__FILE__) .
'/../../../../../../files/'`(should be somewhere around line 40 )
$Config['UserFilesAbsolutePath'] = dirname(__FILE__) .
'/../../../../../../files/';
Set variable $Config['ConfigAllowedTypes'] (should be somewhere around line 50
) so it looks like
$Config['ConfigAllowedTypes'] = array('Image', 'Flash', 'Media') ;
find lines  (should be somewhere around line 133 )
$Config['FileTypesPath']['Image']        = $Config['UserFilesPath'] . 'image/'
;
$Config['FileTypesAbsolutePath']['Image']= ($Config['UserFilesAbsolutePath'] ==
'') ? '' : $Config['UserFilesAbsolutePath'].'image/' ;
and change them to
$Config['FileTypesPath']['Image']= $Config['UserFilesPath'] ;
$Config['FileTypesAbsolutePath']['Image']= ($Config['UserFilesAbsolutePath'] ==
'') ? '' : $Config['UserFilesAbsolutePath'] ;
same applies for (those should be somewhere around line 140 )
$Config['FileTypesPath']['Flash']        = $Config['UserFilesPath'] . 'flash/'
;
$Config['FileTypesAbsolutePath']['Flash']= ($Config['UserFilesAbsolutePath'] ==
'') ? '' : $Config['UserFilesAbsolutePath'].'flash/' ;
those should be changed so they look like:
$Config['FileTypesPath']['Flash']        = $Config['UserFilesPath'] ;
$Config['FileTypesAbsolutePath']['Flash']= ($Config['UserFilesAbsolutePath'] ==
'') ? '' : $Config['UserFilesAbsolutePath'] ;
and lines (those should be somewhere around line 145 )
$Config['FileTypesPath']['Media']        = $Config['UserFilesPath'] . 'media/'
;
$Config['FileTypesAbsolutePath']['Media']= ($Config['UserFilesAbsolutePath'] ==
'') ? '' : $Config['UserFilesAbsolutePath'].'media/' ;
should be changed to
$Config['FileTypesPath']['Media']        = $Config['UserFilesPath'] ;
$Config['FileTypesAbsolutePath']['Media']= ($Config['UserFilesAbsolutePath'] ==
'') ? '' : $Config['UserFilesAbsolutePath'] ;
If you have installed submit_story plugin, you have to make following changes:
- Edit file {VIVVO_URL}/plugins/submit_story/submit_story_definition.class.php
Find the following line (they should be somewhere around line 25)
require_once(VIVVO_FS_FRAMEWORK . 'vivvo_plugin.php');
After that line add this one:
include_once(VIVVO_FS_ADMIN_DIR . 'fckeditor/fckeditor.php');
Search for lines (they should be somewhere around  line 510)
if (!empty ($al->list)){
$template->assign('pending_article_list', $al->list);
}else{
$template->assign('pending_article_list',  strval('0'));
}
After those, add:
if (VIVVO_PLUGIN_SUBMIT_STORY_HTML_ENABLE){
$oFCKeditor = new FCKeditor('ARTICLE_body') ;
$oFCKeditor->BasePath    = VIVVO_URL . VIVVO_FS_ADMIN_DIR . 'fckeditor/';
$oFCKeditor->Value="";
if (VIVVO_PLUGIN_SUBMIT_STORY_UPLOAD_ENABLE==0){
$oFCKeditor->Config["CustomConfigurationsPath"] =
$oFCKeditor->BasePath."fckconfig_users.js" ;
}
$html = $oFCKeditor->CreateHtml();
$template->assign('fck_editor', $html);
}
else {
$html =    "tttttttn".n".
"tttttttt" . $current_article->body . "n"." . $current_article->body . "n".
"tttttttn";
$template->assign('fck_editor', $html);
}
Edit File {VIVVO_URL}templates/xhtml/plugins/submit_story.tpl
Find and delete lines :  (they should be somewhere around line 4)
Find following lines : (they should be somewhere around line 75)
And replace them with:
Copy fckconfig_users.js (from the attachment) in your
{VIVVO_URL}admin/fckeditor folder
This shoud complete the job. For further customizations, please refer to the
FCKEditor documentation on their official website.