installing TinyMCE 4.0.8

General discussions about WebYep
jendavis
Posts: 4
Joined: Sat Oct 12, 2013 2:46 am

installing TinyMCE 4.0.8

Postby jendavis » Wed Oct 16, 2013 9:14 pm

When you unzip TinyMCE 4.0.8, you get the following directory structure: tinymce_4.0.8/tinymce/js/tinymce/stuff...

Upload the second tinymce folder to the /webyep-system/program/opt folder on your web server.

Edit the following file in your local installation: /webyep-system/program/editors/rich-text-tinymce.php and once edited, upload to the web server.

Replace <script type="text/javascript" src="../opt/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> (line 76)
with <script type="text/javascript" src="../opt/tinymce/tinymce.min.js"></script>

TinyMCE 4 does custom styles differently than TinyMCE 3 did. In TinyMCE 4, you need to set up each custom style in the TinyMCE init section. TinyMCE 3 simply read your stylesheet and populated a dropdown of styles. As far as I can tell, this means, you would need to edit the rich-text-tinymce.php script for each client's installation.

Replace everything between <!-- TinyMCE settings --> and <!-- /TinyMCE --> with the following:

<!-- TinyMCE settings -->
<script type="text/javascript">
tinyMCE.init({
language : "<?php echo sTinyMCELang() ?>",
content_css : "<?php echo $sCSSURL ?>",
<?php
$oInitCodePath = od_clone($goApp->oProgramPath);
$oInitCodePath->addComponent("opt");
$oInitCodePath->addComponent("tinymce_init.php");
if ($oInitCodePath->bExists()) {
include_once($oInitCodePath->sPath);
} else {
$oMCImgManagerPath = od_clone($goApp->oProgramPath);
$oMCImgManagerPath->addComponent("opt");
$oMCImgManagerPath->addComponent("tinymce");
$oMCImgManagerPath->addComponent("plugins");
$oMCImgManagerPath->addComponent("imagemanager");
$sMCImageManager = $oMCImgManagerPath->bExists() ? 'imagemanager,' : '';
$oFilemanagerPath = od_clone($goApp->oProgramPath);
$oFilemanagerPath->addComponent('opt');
$oFilemanagerPath->addComponent('filemanager');
$sFilemanagerCallback = !$oFilemanagerPath->bExists() ? '' : ',
file_browser_callback: function(field_name, url, type, win) {
var wyRE = /^(https?:\/\/.*)(\/webyep-system\/programm?).*$/;
var wyPP = wyRE.exec(window.location.toString());
var fbURL = wyPP[1] + wyPP[2] + "/opt/filemanager/index.html";
if (type == "image") type = "images";
if (fbURL.indexOf("?") < 0) {
fbURL = fbURL + "?type=" + type;
} else {
fbURL = fbURL + "&type=" + type;
}
tinyMCE.activeEditor.windowManager.open({
file : fbURL,
width : 1000,
height : 640,
resizable : "yes",
close_previous : "no"
}, {
window : win,
input : field_name
});
return false;
}';
?>
// cut here ------------------
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste jbimages"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image jbimages",
style_formats: [
{title: 'Sub header', block: 'h3', styles: {color: '#990000'}},
{title: 'Image Center', selector: 'img', classes: 'imgcenter'},
{title: 'Image Center Border', selector: 'img', classes: 'imgcenterbdr'},
{title: 'Image Right', selector: 'img', classes: 'imgright'},
{title: 'Image Right Border', selector: 'img', classes: 'imgrightbdr'},
{title: 'Image Left', selector: 'img', classes: 'imgleft'},
{title: 'Image Left Border', selector: 'img', classes: 'imgleftbdr'},
{title: 'Fancy List', selector: 'ul', classes: 'fancylist'}
],

convert_urls : false,
relative_urls : false,
valid_elements : "*[*]",
invalid_elements : "",
remove_linebreaks : false,
apply_source_formatting : false,
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true,
theme_advanced_resizing_use_cookie: true,
nonbreaking_force_tab : true<?php echo $sFilemanagerCallback ?>
// cut here ------------------
<?php } ?>
});
</script>
<!-- /TinyMCE -->


Note: the custom styles are those I placed in a separate stylesheet tailored to the client. I also installed a TinyMCE image upload plugin (jbimages from JustBoil.me). This set up is working for me, but may not be completely fine-tuned.

Jennifer Davis
J Davis Web Design

Return to “WebYep (english)”

Who is online

Users browsing this forum: No registered users and 5 guests