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.

1. Backup .htaccess file from {VIVVO_URL}js/tiny_mce/
2. Download tinyMCE 3.0.8 from http://tinymce.moxiecode.com/
3. Download file upload.zip
4. Delete folder {VIVVO_URL}js/tiny_mce/
5. Unpack tinyMCE archive and copy folder jscrpits/tiny_mce to {VIVVO_URL}js
6. Copy backup .htaccess file to {VIVVO_URL}js/tiny_mce/
7. 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 )

    <div id="article_form" class="content_list_items">
       <textarea id="article_body" name="ARTICLE_body" style="width:99%;height:400px;"><vte:value select="{article.body}" /></textarea>
    </div>

with this:

<vte:value select="{fck_editor}" />

- 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 )

    <div id="page_form" class="content_list_items">
        <textarea id="page_body" name="PAGE_body" style="width:99%;height:400px;">
            <vte:value select="{page.body}" />
        </textarea>
    </div>

with this:

<vte:value select="{fck_editor}" /> 

then find and delete lines (should be somewhere around line 89 )

    <script type="text/javascript">
            tinyMCE.execCommand('mceAddControl', false, 'page_body');
     </script>

- Edit {VIVVO_ROOT}admin/templates/pages/tabs.xml

find and delete lines (should be lines 2 and 3 )

<script type="text/javascript" src="../js/tiny_mce/tiny_mce.js"> </script>
<script type="text/javascript" src="js/tinyMCE_config.php"> </script>
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 = "\t\t\t\t\t\t\t\n".<div class=\"form_line\">\n".
    "\t\t\t\t\t\t\t\t" . $current_article->body . "\n".<textarea id=\"article_body\" name=\"ARTICLE_body\" style=\"width:99%;height:400px;\">" . $current_article->body . "</textarea>\n".
    "\t\t\t\t\t\t\t</div>\n";
    $template->assign('fck_editor', $html);
}

Find and delete lines : (they should be somewhere around line 4)

<vte:if test="{VIVVO_PLUGIN_SUBMIT_STORY_HTML_ENABLE}">
    <script type="text/javascript" src="js/tiny_mce/tiny_mce.js"> </script>
    <script type="text/javascript" src="plugins/submit_story/js/submit_story_tinyMCE_config.php"> </script>
</vte:if>

Find following lines : (they should be somewhere around line 75)

<div class="form_line">
    <textarea id="article_body" name="ARTICLE_body" style="width:99%;height:400px;"><vte:value select="{article.body}" /></textarea>
</div>

And replace them with:

<vte:value select="{fck_editor}" />

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.