-
Notifications
You must be signed in to change notification settings - Fork 1
TinyMCE for Content Admin
The following are the instructions for setting up TinyMCE and MoxieManager for use with the Content Admin.
Note All of this is based on the default XM Template and may require tweaking depending on the site's setup.
Add application/classes/Auth/ORM.php. This will set the PHP session keys tinymce_logged_in and tinymce_username that will be used within MoxieManager for authentication. It checks to see if the user has access to the DB admin and the content admin.
<?php defined('SYSPATH') or die('No direct access allowed.');
class Auth_ORM extends XM_Auth {
protected function complete_login($user) {
$return = parent::complete_login($user);
// check to see if the user should have access to the tinymce moxie manager
// if so set the PHP session key to TRUE
if (Auth::instance()->logged_in()
&& (
Auth::instance()->allowed('content_admin')
||
(Auth::instance()->allowed('xm_db_admin') && (Auth::instance()->allowed('xm_db_admin/*/edit') || Auth::instance()->allowed('xm_db_admin/*/add')))
)) {
session_start();
$_SESSION['tinymce_logged_in'] = TRUE;
$_SESSION['tinymce_username'] = Auth::instance()->get_user()->username;
}
return $return;
}
public function logout($destroy = FALSE, $logout_all = FALSE) {
// remove the tinymce session key on logout
session_start();
if (array_key_exists('tinymce_logged_in', $_SESSION)) {
unset($_SESSION['tinymce_logged_in']);
}
if (array_key_exists('tinymce_username', $_SESSION)) {
unset($_SESSION['tinymce_username']);
}
return parent::logout($destroy, $logout_all);
}
}Add the following to application/classes/Controller/Public.php to add the content admin CSS & JS for users that have the necessary permissions. Also make sure the content admin CSS is added before the public CSS. This may need to modified if you're adding other CSS or JS. Also make sure this is inside a if ($this->auto_render) {.
<?php
$this->add_style('public', 'css/public.css', NULL, array('content_public'), TRUE);
if (Auth::instance()->logged_in() && Auth::instance()->allowed('content_admin')) {
$this->add_style('content_public', 'xm/css/content_public.css', 'screen')
->add_script('content_public', 'xm/js/content_public.js');
}You may also want to add a separate Glyphicons Style Sheet for the edit icons on public pages.
Add application/classes/Controller/XMAdmin.php to add TinyMCE for the DB Admin.
<?php defined('SYSPATH') or die('No direct script access.');
class Controller_XMAdmin extends Controller_XM_XMAdmin {
public function before() {
parent::before();
if ($this->auto_render) {
// add tinymce and tinymce config
$this->add_script('tinymce_jquery', 'js/tinymce/jquery.tinymce.min.js')
->add_script('tinymce_config', 'js/tinymce_config.min.js');
}
}
}Add a constant for use in the MoxieManager config with the path to the docroot dir. It's best to put this in the init files (in application/config/inits/) as this maybe different on different servers. You'll also need to update the currently setup init.php file.
<?php
define('MOXIEMANAGER_FILESYSTEM_LOCAL_WWWROOT', '[/path/to/html]');
define('MOXIEMANAGER_DATA_STORE', '[/path/to/private/uploads]/moxiemanager_data');Add html/css/tinymce_content.css by creating the html/css/scss/tinymce_content.scss with something similar to the following. This will be loaded within the TinyMCE editor to control the formatting of the editing box. You'll probably want to copy in some of the CSS used for the content areas of the website.
@import "_vars", "_media", "../../xm/css/sass/_xm_mixins", "../../xm/css/sass/_xm_helpers", "_clearfix";
@import "_tinymce";
/** css for inside tinymce **/
.tinymce_content {
width: $min_width; /* somewhere around 750px; */
min-width: $min_width;
padding-left: 1em;
padding-right: 1em;
margin-top: 0;
padding-top: 0;
}Add the TinyMCE config file in html/js/src/tinymce_config.js and make sure it's minified into html/js/tinymce_config.min.js. Here's the default config. The main feature may need to be changed is the width of the edit box (currently 760px).
// the TinyMCE config
// some pre config
var tinyMCEPreInit = {
baseURL : '/js/tinymce',
suffix : '.min'
};
$(function() {
$('textarea.tinymce').tinymce({
script_url : '/js/tinymce/tinymce.min.js',
plugins : [
"advlist autolink lists link image charmap hr",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"media nonbreaking table contextmenu",
"paste textcolor imagetools moxiemanager spellchecker"
],
menubar: "edit insert view format table tools",
toolbar1 : "undo redo | cut copy paste | bold italic | alignleft aligncenter alignright | formatselect | styleselect | fontsizeselect | removeformat",
toolbar2 : "table | bullist numlist | link unlink image media | forecolor backcolor | charmap | fullscreen | spellchecker | visualchars visualblocks nonbreaking",
relative_urls : false,
image_advtab: true,
spellchecker_languages: "English=en_CA",
spellchecker_language: 'en_CA',
spellchecker_rpc_url: 'spellchecker.php',
content_css : "/css/base.css,/css/public.css,/css/tinymce_content.css",
body_class : "tinymce_content",
fontsize_formats: "8px 10px 12px 14px 18px 20px 24px 30px 36px",
// this is the default list of types in the Format > Formats menu plus a couple extras
// more info: http://www.tinymce.com/wiki.php/Configuration:style_formats
style_formats : [
{
title : "Headers",
items : [
{ title : "Header 1", format : "h1" },
{ title : "Header 2", format : "h2" },
{ title : "Header 3", format : "h3" },
{ title : "Header 4", format : "h4" },
{ title : "Header 5", format : "h5" },
{ title : "Header 6", format : "h6" }
]
},
{
title : "Inline",
items : [
{ title : "Bold", icon : "bold", format : "bold" },
{ title : "Italic", icon : "italic", format : "italic" },
{ title : "Underline", icon : "underline", format : "underline" },
{ title : "Strikethrough", icon : "strikethrough", format : "strikethrough" },
{ title : "Superscript", icon : "superscript", format : "superscript" },
{ title : "Subscript", icon : "subscript", format : "subscript" },
{ title : "Code", icon : "code", format : "code" }
]
},
{
title : "Blocks",
items : [
{ title : "Paragraph", format : "p" },
{ title : "Blockquote", format : "blockquote" },
{ title : "Div", format : "div" },
{ title : "Pre", format : "pre" }
]
},
{
title : "Alignment",
items : [
{ title : "Left", icon : "alignleft", format : "alignleft" },
{ title : "Center", icon : "aligncenter", format : "aligncenter" },
{ title : "Right", icon : "alignright", format : "alignright" },
{ title : "Justify", icon : "alignjustify", format : "alignjustify" }
]
},
// additional
{
title : "Images",
items : [
{ title : 'Left Aligned Image', icon : "alignleft", selector : 'img', classes : 'left' },
{ title : 'Right Aligned Image', icon : "alignright", selector : 'img', classes : 'right' }
]
}
],
height : 400,
width : 760
});
});Add this to gulpfile.js:
{
dest : 'html/js',
destFile : 'tinymce_config.min.js',
files :
[
'html/js/src/tinymce_config.js'
]
}Download the latest version of TinyMCE (last tested with 4.0.26) and put the tinymce folder inside html/js. (The tinymce folder can be found at tinymce/js/tinymce in the TinyMCE archive.)
Add MoxieManager. (MoxieManager is a paid plugin for TinyMCE that makes working with images and files very easy, including the resizing and other changes to images.) Put the moxiemanager folder in html/js/tinymce/plugins. Then access the plugin folder in a web browser, ie, http://www.example.com/js/tinymce/plugins/moxiemanager/. On the Installation window, enter your license key and select "Session authenticator". In the "Session name" field, enter tinymce_logged_in and then click Install. This will display the default configuration. Change the following the config:
<?php
// add at the top so we can the site's basic config
require_once('../../../../../application/init.php');
// create the uploads directory if it doesn't exist
if ( ! is_dir(MOXIEMANAGER_DATA_STORE)) {
mkdir(MOXIEMANAGER_DATA_STORE, 02777);
chmod(MOXIEMANAGER_DATA_STORE, 02777);
} else if ( ! is_writable(MOXIEMANAGER_DATA_STORE)) {
echo 'Data store directory is not writable';
}
// change the following config options to (these are located throughout the config file)
$moxieManagerConfig['filesystem.rootpath'] = 'Uploads=../../../../uploads/images;PDFs=../../../../uploads/pdfs;Default Images=../../../../images';
$moxieManagerConfig['authenticator.login_page'] = '/login';
$moxieManagerConfig['SessionAuthenticator.logged_in_key'] = 'tinymce_logged_in';
$moxieManagerConfig['SessionAuthenticator.user_key'] = 'tinymce_username';
$moxieManagerConfig['filesystem.local.wwwroot'] = MOXIEMANAGER_FILESYSTEM_LOCAL_WWWROOT;
$moxieManagerConfig['filesystem.local.cache'] = true;
$moxieManagerConfig['edit.line_endings'] = 'lf';
$moxieManagerConfig['edit.encoding'] = 'utf-8';
$moxieManagerConfig['cache.connection'] = "sqlite:" . MOXIEMANAGER_DATA_STORE . "/cache.s3db";
$moxieManagerConfig['storage.path'] = MOXIEMANAGER_DATA_STORE;
$moxieManagerConfig['favorites.max'] = 100;
$moxieManagerConfig['history.max'] = 50;Create the folders in the filesystem.rootpath config above (where uses will be able to upload files). You may also want move some images and/or PDFs into these folders so users will immediately have access to them. They may also need their permissions reset (such as by using reset_permissions.sh).
The configuration also includes a spellchecker. It's set to use the TinyMCE Spellchecker, but unfortunately the master branch has some bugs. To get it working, we manually merged in some of the pull requests:
- https://github.com/tinymce/tinymce_spellchecker_php/pull/12/files
- https://github.com/tinymce/tinymce_spellchecker_php/pull/14/files
Put the code in html/js/tinymce/plugins/spellchecker/. The configuration also need to be changed in spellchecker.php. Comment out the line for enchant_dicts_path. This will mean the Enchant PHP plugin needs to be install on the server, along with the dictionary, such as aspell-en.
Change the default login redirect in application/config/auth.php:
<?php
'default_login_redirect' => 'content_admin',- Add an item to the "Content - Page" table in the DB Admin for the page that the content will be on.
- Add an item to the "Content" table in the DB Admin for the record. The
codefield must be unique and will be used to retrieve the content. - Replace the content with
<?php echo Content::display('content_code'); ?>
The defaults for the menu based on the plugins enabled in the TinyMCE config above:
menu : {
file : {title : 'File' , items : 'newdocument'},
edit : { title : 'Edit' , items : 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
insert : { title : 'Insert', items : 'media image link | charmap template hr nonbreaking' },
view : { title : 'View' , items : 'visualchars visualblocks visualaid | fullscreen' },
format : { title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat' },
table : { title : 'Table' , items : 'inserttable tableprops deletetable | cell row column' },
tools : { title : 'Tools' , items : 'spellchecker code '}
},Allowing "all" the options on an iframe (this is based on a Wistia video):
extended_valid_elements : "iframe[src|allowtransparency|frameborder|alt|title|scrolling|class|name|allowfullscreen|mozallowfullscreen|webkitallowfullscreen|oallowfullscreen|msallowfullscreen|width|height|align]",Value to add font selection to the toolboar:
fontselect