1

I have a wordpress website and i have a page that allows users to create posts. I have configured tinymce to look for this certain field on the form and convert it into a tinymce field. THis works fine but some (most) of the plugins that come with tinymce dont work. I repeatedly get this error: Failed to initialize plugin: wordcount TypeError: r is not a constructor for each of the plugins i have added. i tried on a blank wp install but the error persisted

If you would like to see the issue first-hand, the issue occurs on this website: https://tropical.team/articles/create

Here is the error for one of the plugins taht don't work; codesample:

    at Ew (wp-tinymce.php?ver=2.0.0-dev1:2:330473)
    at Array.<anonymous> (wp-tinymce.php?ver=2.0.0-dev1:2:332223)
    at Object.jt [as each] (wp-tinymce.php?ver=2.0.0-dev1:2:29356)
    at Aw (wp-tinymce.php?ver=2.0.0-dev1:2:332173)
    at tN.<anonymous> (wp-tinymce.php?ver=2.0.0-dev1:2:333551)
    at Array.<anonymous> (wp-tinymce.php?ver=2.0.0-dev1:2:96969)
    at jt (wp-tinymce.php?ver=2.0.0-dev1:2:29356)
    at u (wp-tinymce.php?ver=2.0.0-dev1:2:96914)
    at n (wp-tinymce.php?ver=2.0.0-dev1:2:96402)
    at l.<computed>.l.<computed>.l.<computed>.o.onload (wp-tinymce.php?ver=2.0.0-dev1:2:96652)

I am unsure what could be causing this, as i have set up my init funciton correctly afaik:

jQuery(document).ready(function($){
    
    
        tinymce.init({
          selector: '.tinymce>div>div>textarea',
          suffix: ".min",
          height: 200,
          plugins: "codesample autosave code image link lists media preview searchreplace textcolor wordcount hr",
          autosave_restore_when_empty: true,
          autosave_retention: '60m',
          codesample_languages: [
            {text: 'HTML/XML', value: 'markup'},
            {text: 'JavaScript', value: 'javascript'},
            {text: 'CSS', value: 'css'},
            {text: 'PHP', value: 'php'},
            {text: 'Ruby', value: 'ruby'},
            {text: 'Python', value: 'python'},
            {text: 'Java', value: 'java'},
            {text: 'C', value: 'c'},
            {text: 'C#', value: 'csharp'},
            {text: 'C++', value: 'cpp'},
            {text: 'Markup', value: 'markup'},
            {text: 'Arduino', value: 'arduino'},
            {text: 'ARM Assembly', value: 'armasm'},
            {text: 'Batch', value: 'batch'},
            {text: 'Bash', value: 'bash'},
            {text: 'ASP.NET (C#)', value: 'aspnet'},
            {text: 'Brainfuck', value: 'brainfuck'},
            {text: 'JSON', value: 'json'},
            {text: 'Markdown', value: 'markdown'},
            {text: 'TypeScript', value: 'typescript'},
            {text: 'ASP.NET (C#)', value: 'aspnet'},
            {text: 'Rust', value: 'rust'}
          ],
          toolbar: 'preview searchreplace | codesample image link | lists hr | bold italic textcolor | h1 h2 h3 h4 | alignleft aligncenter alignright | bullist numlist outdent indent | undo red | wordcount-',
          // content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        });

    
});


Also very important, for some weird reason i have to paste this code into the console for it to work, the problem is that the funciton runs before this element is added to the page as it is added with js and not purely trough html and im unsure how to account for that.

treepek
  • 37
  • 6
  • `jQuery(document).ready(function($){ ...` and `$(window).load(function () { ...` are basically the same thing. Maybe try removing one of them as this may be throwing a wrench into the initialization. – Jamie_D Feb 02 '23 at 13:21
  • 1
    Then it does not load at all, even if, the function runs, so having both of them doesn't break it for sure. – NodeX4 Feb 02 '23 at 18:08

1 Answers1

3

You specify plugins using an array...

tinymce.init({
  // ...
  plugins: ["codesample", "autosave", "code", "image", "link", "lists", "media", "preview", "searchreplace", "textcolor", "wordcount", "hr", "lists"],
  // ...
});

... whereas TinyMCE expects a string with blank spaces.

tinymce.init({
  // ...
  plugins: "codesample autosave code image link lists media preview searchreplace textcolor wordcount hr lists",
  // ...
});

EDIT 1

Also, be careful. In the code above, the lists plugin is declared twice...


EDIT 2

I found this in TinyMCE 6 documentation, so indeed, I believe your problem is elsewhere...

Here is my JSFiddle with JavaScript/jQuery to test TinyMCE 5 integration, outside a WordPress context.

As you can see, it is working.

Now I think the issue is on the WordPress side, especially if we take a closer look at this wp-tinymce.php file which seems a bit old:

Not used in core since 5.1.

This is a back-compat for plugins that may be using this method of loading directly.

How did you integrate TinyMCE? Did you use a plugin, like those referenced here or there? What is the version of your WordPress install? What is the exact version of TinyMCE?

Badacadabra
  • 8,043
  • 7
  • 28
  • 49
  • I have done that but the errors persist: awesomescreenshot.com/image/… as shown on tropical.team/articles/create – treepek Feb 05 '23 at 15:36
  • 1
    What errors do you get? Still the same? Could you try to declare the suffix [like this](https://www.tiny.cloud/docs/configure/integration-and-setup/#suffix) and remove that trailing dash (-) next to `wordcount` in `toolbar` configuration string? – Badacadabra Feb 05 '23 at 16:40
  • 1
    Moreover, PHP is declared twice in `codesample_languages`. – Badacadabra Feb 05 '23 at 16:45
  • 1
    Fixed that, i get the same error as stated in the original post: wp-tinymce.php?ver=2.0.0-dev1:2 Failed to initialize plugin: codesample TypeError: r is not a constructor at Ew (wp-tinymce.php?ver=2.0.0-dev1:2:330473) at Array. (wp-tinymce.php?ver=2.0.0-dev1:2:332223) at Object.jt [as each] (wp-tinymce.php?ver=2.0.0-dev1:2:29356) at Aw (wp-tinymce.php?ver=2.0.0-dev1:2:332173) at tN. (wp-tinymce.php?ver=2.0.0-dev1:2:333551) at Array. (wp-tinymce.php?ver=2.0.0-dev1:2:96969) etc... – NodeX4 Feb 05 '23 at 18:19
  • I edited my answer with extra info. What do you think? – Badacadabra Feb 05 '23 at 20:34
  • i ended up fixing it by enqueqing tinymce.js file from a different source, the one you used. – treepek Mar 19 '23 at 15:06