How do I make TinyMCE available to anonymous users?

Plone Support Add-on Development
,
1

I have add_resource_on_request(request, 'tinymce') set on my view, and have tried loading a shim as outlined here: http://docs.plone.org/adapt-and-extend/theming/resourceregistry.html#shim-resource-examples, but the visual editor will not load for anonymous users.

I see that the mimeType selector just beneath the <textarea> has pattern: plaintexteditor for anonymous users, while authenticated users have tinymce as the pattern.

How do I set this up for anonymous users?

2

you'll need to use the pattern assuming you're using z3c.form or something that adds pat-tinymce to to element: add_resource_on_request(request, 'mockup-patterns-tinymce').

tinymce is only the tinymce module--it won't bootstrap anything. mockup-patterns-tinymce will load the pattern so nodes with the class pat-tinymce will get initialized.

3

mockup-patterns-tinymce doesn't work for me either. It also throws a JS error on the authenticated view, but I can write a condition for that.

Might also be helpful for you to know this is on the add view of a dexterity type. I have an adapter that uses DefaultAddView for adding the resource.

4

Ah right, you need to use the require statement.

<script>
require(['mockup-patterns-tinymce']);
</script>

should work or you can add your own js file that does the same thing.

This could even be at the bottom of your theme file--it won't load the same resource twice(for logged in).

add_resource_on_request still needs to work with requirejs/amd. http://stackoverflow.com/questions/9507606/when-should-i-use-require-and-when-to-use-define is an explanation if you're interested.

5

However, since this is an anonymous user, you might want control over how tinymce is initialized for them so you could go back to just including the tinymce files and do something like this.

<script>
require(['tinymce'], function(){
  // init code here
tinymce.init({
  selector: '.pat-tinymce',
  height: 500,
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste code'
  ],
  toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
});
});
</script>

This way, the plone tinymce settings won't be used.

6

I've been trying various combinations of requires and add_resource_on_request, but still have not been able to get the editor to load. The main errors I've been running in to are:

not well-formed JS errors on files like ++resource++mockup/tinymce/templates/link.xml, also happens with results.xml, selecttion.xml, image.xml, upload.xml, and preview.xml. This happens with only the following code in the JS:

require(['mockup-patterns-tinymce']);
require(['tinymce'], function(){ ... });

Another JS error I tend to see is if I try to use add_resource_on_request(request, 'mockup-patterns-tinymce'), then default.js throws Mismatched anonymous define() module

So I don't know if there are any resources I should be loading that I'm missing. This is on Plone 5.0.5.

7

Yes, like I said, you can't use add_resource_on_request on module definitions. http://stackoverflow.com/questions/9507606/when-should-i-use-require-and-when-to-use-define helps explain this.

There was a small bug in the example I gave you because I didn't try it myself; however, that is fixed now and I just tested it with a fresh site and it works.

Screen Shot 2016-09-16 at 10.59.23 AM.png1392×1525 129 KB

Where/how are you including this?

8

I have a JS file added to the Resource Registry, and I can see it is loading on the page for anonymous users.

With just this code, nothing happens. If I uncomment the require(['mockup-patterns-tinymce']); line, then I get the errors on the XML files.

I did just clear out my data, and am working on a fresh install of Plone.

9

Okay, I updated your branch with some integration code that should get you going--it renders tinymce for anon users: https://github.com/collective/Products.Poi/commit/578d648cad92bb4d1199bb234f376886cb2aa58b

Here were some of the problems:

  1. There was no actual element with the selector of ".pat-tinymce" so that's why it didn't do anything. You need to look at what you're trying to apply tinymce to.
  2. It is actually using the textareamimetypeselector pattern. i'm not sure you want that for anon. I'm not very familiar with the details of the pattern. I think this is a bit complicated in how it integrates with z3c form and the pattern.
  3. Should probably be more careful so you don't use that code for anon and make sure you're not re-initializing for logged in users.
10

I saw the commit come across, thank you so much!

I'll review the pattern being used and see what we can do better.

11
  1. It is actually using the textareamimetypeselector pattern. i'm not
    sure you want that for anon. I'm not very familiar with the details of
    the pattern. I think this is a bit complicated in how it integrates with
    z3c form and the pattern.

OK, I'm looking over the rich text widget. All the docs I've found use plone.app.textfield.RichText, which is what is using the textareamimetypeselector. pattern. I switched the fields to use plone.app.z3cform.wysiwyg.WysiwygFieldWidget, which works with the JS you had originally suggested, but there is a deprecation warning that it will be removed in Plone 5.1.

What widget do you recommend using?