Forum

Thread tagged as: Problem, TinyMCE

Custom Editor (Tinymce) Not Working

Hi,

I'm upgrading from Perch 2 to 3. Everything worked great, except that I'm using Tinymce as the custom editor, and after updating to Perch 3, it's not loading. I'm just seeing the raw HTML in a text area.

Here's my diagnostic report and template code. The _config.inc file doesn't appear to be loading. Thanks.

Diagnostic Report

Health check

PHP 7.1.1 is up to date MySQL 5.6.35 is up to date Image processing available Summary information

Perch: 3.0.8, PHP: 7.1.1, MySQL: mysqlnd 5.0.12-dev - 20150407 - $Id: b396954eeb2d1d9ed7902b8bae237b287f21ad9e $, with PDO Server OS: Darwin, apache2handler Installed apps: content (3.0.8), assets (3.0.8), categories (3.0.8), perch_forms (1.9.1), perch_gallery (2.8.9) App runtimes: <?php $apps_list = array( 'perch_forms', 'perch_gallery' ); PERCH_LOGINPATH: /perch PERCH_PATH: /Users/jasonpolete/Sites/kbf.dev/perch PERCH_CORE: /Users/jasonpolete/Sites/kbf.dev/perch/core PERCH_RESFILEPATH: /Users/jasonpolete/Sites/kbf.dev/perch/resources Image manipulation: GD PHP limits: Max upload 32M, Max POST 32M, Memory: 128M, Total max file upload: 32M F1: 0c66c2e1f82f9e0b7617b2cb8270f2c7 Resource folder writeable: Yes HTTP_HOST: kbf.dev:8888 DOCUMENT_ROOT: /Users/jasonpolete/Sites/kbf.dev REQUEST_URI: /perch/core/settings/diagnostics/ SCRIPT_NAME: /perch/core/settings/diagnostics/index.php


<h1>
  <perch:content 
    id="heading" 
    type="text" 
    label="Heading" 
    required="true" 
    help="Name of the program."
    title="true" />
</h1>

<perch:content id="slug" type="slug" suppress="true" for="heading" />

<p class="lede">
  <perch:content 
    id="excerpt" 
    type="textarea" 
    label="Excerpt" 
    help="A short, 2-3 sentence overview of the program."
    required="true" />
</p>

<hr>

<perch:content 
  id="body" 
  type="textarea" 
  label="Body" 
  editor="tinymce" 
  html="true" 
  required="true" />

  <hr>

<p><a href="/programs">See All Programs</a></p>
Jason Polete

Jason Polete 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

I don't think we have a version of TinyMCE packaged for Perch 3 yet. Is there a particular feature of it that you need?
Jason Polete

Jason Polete 0 points

4 years ago

I believe I went with tinymce originally to enable some custom inline styles for the end users. I could probably port over to Redactor now, but I thought that if I had tinymce added under perch/addons/plugins/editors it would work as a "custom editor" without having to have builtin Perch support.
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

There's a layer of glue that goes between the two - that layer needs updating for Perch 3. There's instructions here: https://docs.grabaperch.com/api/editors/
Jason Polete

Jason Polete 0 points

4 years ago

Thanks. The new _config.js setup file worked. One caveat I ran into that might help someone else - I had to explicitly set both the tinymce.baseURL and tinymce.suffix or I would get a bunch of 404 errors when Tinymce tried to load theme and plugin files.

$( function() {

  var set_up_tinymce = function() {
    tinymce.baseURL = "/perch/addons/plugins/editors/tinymce";
    tinymce.suffix = ".min";
    tinymce.init({
      selector: "textarea.tinymce",
      convert_urls: false,
      relative_urls: false,
      plugins: [
               "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
               "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
               "save table contextmenu directionality emoticons template paste textcolor"
         ],
      style_formats: [
        { title: 'Button', selector: 'a,input,button', classes: 'btn' },
        { title: 'Button >', selector: 'a,input,button', classes: 'btn forward' },
        { title: '< Button', selector: 'a,input,button', classes: 'btn back' },
        { title: 'BUTTON', selector: 'a,input,button', classes: 'btn important' },
        { title: 'Button', selector: 'a,input,button', classes: 'btn outline' },
        { title: 'Button >', selector: 'a,input,button', classes: 'btn outline forward' },
        { title: 'Long List', selector: 'ul,ol', classes: 'long-list' }
      ],
      content_css: "/style.css,/tinymce.css",
      menubar: false,
      height: "400",
      toolbar: [
        "undo redo | bold italic link | alignleft aligncenter alignright | bullist numlist outdent indent | removeformat", 
        "styleselect | table | media | code"]
      });

  };

  set_up_tinymce();

  $( window ).on( 'Perch_Init_Editors', function() {
    set_up_tinymce();
  });

});
Nils Mielke

Nils Mielke 3 points

3 years ago

Just in case anyone else hits this problem: For me it only works with the non-jQuery version of TinyMCE.
Thus, my _config.json is looking like this:

{
  "js": [
    "PERCH_LOGINPATH/addons/plugins/editors/tinymce/tinymce.min.js",
    "PERCH_LOGINPATH/addons/plugins/editors/tinymce/config.js"
  ],
  "css": [
    "PERCH_LOGINPATH/addons/plugins/editors/tinymce/skins/lightgray/skin.min.css"
  ]
}