Installing TinyMCE and Filemanager on Anchor CMS

I'm noticing a lot of posts about the markdown editor on Anchor CMS, which right now - is my favourite CMS... so I wanted to share what I did with it to turn it in to a solid WYSIWYG with a nice file manager bolted on (As TinyMCE doesn't have one by default) - so here's how to do it! For this tut I will go with self hosting the required software.

1) Download the necessary software, TinyMCE and RoxyFileManager

http://download.moxiecode.com/tinymce/tinymce_4.3.3.zip http://www.roxyfileman.com/download.php?f=1.4.3-php

2) Extract TinyMCE to /htdocs/anchor/views/assets/js/

3) Extract Roxy to /htdocs/anchor/views/assets/plugins/roxy/

4) Open /htdocs/anchor/views/partials/footer.php

Copy and paste the following in to your footer within script tags;

tinymce.init({ selector: '#content', plugins: [ "advlist autolink lists link image charmap print preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars code fullscreen", "insertdatetime media nonbreaking save table contextmenu directionality", "template paste textcolor colorpicker textpattern" ], toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | forecolor backcolor emoticons | print preview", imageadvtab: true, filebrowser_callback: RoxyFileBrowser });

      

function RoxyFileBrowser(fieldname, url, type, win) {
var roxyFileman = '?integration=tinymce4';
if (roxyFileman.indexOf("?") < 0) {
roxyFileman += "?type=" + type;
} else { roxyFileman += "&type=" + type; }
roxyFileman += '&input=' + field
name + '&value=' + win.document.getElementById(fieldname).value;
if(tinyMCE.activeEditor.settings.language) { roxyFileman += '&langCode=' + tinyMCE.activeEditor.settings.language; }
tinyMCE.activeEditor.windowManager.open({ file: roxyFileman, title: 'File Manager', width: 850, height: 650, resizable: "yes", plugins: "media", inline: "yes", close
previous: "no"
}, {
window: win,
input: field_name });
return false;
}

5) Inside /htdocs/anchor/views/assets/plugins/roxy open "conf.json"

6) Change FILES_ROOT to "/content" (Line 2)

7) Change RETURNURLPREFIX to "http://yourdomain.com" (No trailing slash) (Line 3)

8) Change INTEGRATION to "tinymce4" (Line 11)

Now all that is left to do, is switch the Markdown Editors for the TinyMCE Editors.

9) Open /htdocs/anchor/views/pages/add.php

10) Look for the content box, and add the 'id' => 'content' as you can see below.

echo Form::textarea('content', Input::previous('content'), array( 'placeholder' => __('pages.content_explain'), 'id' => 'content' ));

11) Comment out the following line;

12) At the bottom of the file; comment out the script as you see below;

//$('textarea[name=content]').editor();

13) Repeat steps 10, 11 and 12 in /htdocs/anchor/views/pages/edit.php BUT MAKE SURE TO NOT REMOVE THE FOLLOWING...

Input::previous('content', $page->content)

... Otherwise when you come to edit the page, it won't have the page content from the database inside the textarea.

14) Repeat steps 10, 11, 12 and 13 in /htdocs/anchor/views/posts/edit.php and add.php

15) Do a sexy dance, you've built TinyMCE with full file manager in to your Anchor CMS installation.

Note;

You can change the uploads directory, in the conf.json. I have set it to /content because that's the standard folder in which Anchor uses, and makes images available in the file manager which you have uploaded through custom fields, etc.

Any issues! Feel free to contact me via my website or hello@robmilnes.com - I'm always happy to help!

This article is my
Fatal error: Call to undefined function article_number() in /home/robmilnescom/public_html/themes/default/article.php on line 11