Mosaic adds type to script tag

When I edit a page using Display > View Document, I can insert a JavaScript widget as source code and it renders just fine.

But when I edit a page using Display > Mosaic Layout, when I insert the same JavaScript widget, TinyMCE inserts type="mce-text/javascript" into the <script> tag, and the widget does not render.

Is there a way to get Mosaic's TinyMCE editor to behave like the default TinyMCE editor?

If not, is there a workaround to allow a user to embed HTML snippets that contain <script> tags verbatim using Mosaic?

Yes, add a theme fragment that loads the javascript.
NB: This is 'a hack', and NOT a secure approach.

So you need one file (place it in your themes fragments folder): customjs.xml

<model xmlns:form="http://namespaces.plone.org/supermodel/form"
  xmlns="http://namespaces.plone.org/supermodel/schema"> 
<schema>
  <field name="myjavascript" type="zope.schema.Text">
  </field>
 </schema>
</model>

And one file: customjs.pt:

<script>
  ${view/data/myjavascipt}
</script>

You can use the same approach for CSS

My theme is a copy of the Barceloneta theme, slightly modified TTW. It does not have a fragments folder. If I create the folder fragments at the root of the theme, and put stuff inside, should it "just work"? I think I'm missing something.

You could also enable the plone.app.standardtiles.rawembed tile:

  <records prefix="plone.app.mosaic.app_tiles.plone_app_standardtiles_rawembed"
           interface="plone.app.mosaic.interfaces.ITile">
    <value key="name">plone.app.standardtiles.rawembed</value>
    <value key="label">Raw Embed</value>
    <value key="category">media</value>
    <value key="tile_type">app</value>
    <value key="default_value"></value>
    <value key="read_only">false</value>
    <value key="settings">true</value>
    <value key="favorite">false</value>
    <value key="rich_text">false</value>
    <value key="weight">20</value>
  </records>


Screenshot 2020-03-20 at 07.14.33

How would one enable it? I did not find any docs, just a brief readme.

If you have an add-on/theme, add it to your registry.xml. It is also possible to add the required records TTW using the configuration registry (either manually or import an XML file).

The content of the file is this:

<?xml version="1.0"?>
<registry>
<records prefix="plone.app.mosaic.app_tiles.plone_app_standardtiles_rawembed"
           interface="plone.app.mosaic.interfaces.ITile">
    <value key="name">plone.app.standardtiles.rawembed</value>
    <value key="label">Raw Embed</value>
    <value key="category">media</value>
    <value key="tile_type">app</value>
    <value key="default_value"></value>
    <value key="read_only">false</value>
    <value key="settings">true</value>
    <value key="favorite">false</value>
    <value key="rich_text">false</value>
    <value key="weight">20</value>
  </records>
</registry>
1 Like

I saved that code snippet as plone.app.standardtiles.rawembed.xml and tried to import it via Site Setup > Configuration Registry. It seems to succeed, but it does not appear in the Records table. After creating a new record, does something else need to be done?

Whoops, I see you just edited the snippet. Trying again.

Yeah, sorry, the first code snippet was just the relevant declaration from the xml file.

Success! Thank you for your help.

1 Like

I installed collective.themefragments. I created a folder and two files in it:

/fragments/embedded_widget.xml

<model xmlns:form="http://namespaces.plone.org/supermodel/form"
       xmlns="http://namespaces.plone.org/supermodel/schema"> 
  <schema>
    <field name="embedded_widget" type="zope.schema.Text">
    </field>
  </schema>
</model>

/fragments/embedded_widget.pt

${view/data/embedded_widget}

It shows up as a Mosaic Tile. However when I click Insert > Theme Fragment, select embedded_widget, and click Save, I get a ISE 500 with the following response:

{"error_type": "AttributeError"}

Comparing my experience to this video at 159 seconds in:

I get as far as the first form in the modal dialog, but the second form never appears.

Is there something else that I am missing?

I can not remember what Mosaic does if the fragment it empty, so try:

<html>
<div>Dummy text, Just for now, have a div so the fragment is not empty</div>
${view/data/embedded_widget|None}
</html>

If that works: remove the dummy text

Same response: {"error_type": "AttributeError"}.

When I visit the fragment directly via /Plone/@@theme-fragment/embedded_widget, I see:

Dummy text, Just for now, have a div so the fragment is not empty

Is another add-on required?

Do I need to toggle some switch off and on?

Attribute error usually means it can not find 'the setting'.

Could you try the following:

  1. Do not use the same name on the widget and the field

    field name="embedded_stuff"

    ${view/data/embedded_stuff|None}

  2. Stop and start Plone

  3. Turn the theme off and on again

  1. Rename of field to embeddedwidget, leaving widget as embedded_widget had no affect.
  2. Restart had no affect.
  3. Flipping the theme off and on had no affect.

Sanity check:

/fragments/embedded_widget.xml

<model xmlns:form="http://namespaces.plone.org/supermodel/form"
       xmlns="http://namespaces.plone.org/supermodel/schema"> 
  <schema>
    <field name="embeddedwidget" type="zope.schema.Text">
    </field>
  </schema>
</model>

/fragments/embedded_widget.pt

<html>
<div>Dummy text, Just for now, have a div so the fragment is not empty</div>
${view/data/embeddedwidget|None}
</html>

I don't see any typos.

Here's the full source of the widget when it gets rendered:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<body><div>Dummy text, Just for now, have a div so the fragment is not empty</div>

<script src="https://example.com/++resource++protect.js" type="application/javascript" id="protect-script" data-token="27204664035a7ea5f2d380fc235f8f38f9aa29eb" data-site-url="https://example.com"></script></body></html>

:thinking:

Please not that according to https://github.com/plone/plone.tiles#creating-a-simple-tile tiles need to have an html tag and a body tag.

The contents of the tile's <body /> section will replace the tile placeholder as indicated by the tile link.

@stevepiercy, your code runs fine on a test theme I have locally available.

I have it running on Plone 5.2.1 with Python 3, using the following mosaic related packages:

plone.app.blocks = 4.3.2
plone.app.contenttypes = >=2.0.1
plone.app.drafts = >=1.1.3
plone.app.layout = >=3.4.0
plone.app.mosaic = >=2.2.1
plone.app.standardtiles = 2.3.2
plone.app.tiles = >=3.1.2
plone.behavior = >=1.3.0
plone.jsonserializer = >=0.9.8
plone.subrequest = >=1.9.1
plone.tiles = >=2.2.1
collective.themefragments = 2.12

Version Overview

  • Plone 5.2.1 (5208)
  • CMF 2.4.2
  • Zope 4.1.3
  • Python 2.7.15+ (default, Oct 7 2019, 17:39:04) [GCC 7.4.0] # Could this be a Unicode issue?
  • PIL 6.2.1 (Pillow)
  • WSGI: On
  • Server: waitress 1.4.2
plone.app.blocks-4.3.2
plone.app.contenttypes-2.1.5
plone.app.drafts-1.1.3
plone.app.layout-3.4.0
plone.app.mosaic-2.2.1
plone.app.standardtiles-2.3.2
plone.app.tiles-3.1.2
plone.behavior-1.3.0
plone.jsonserializer-0.9.7  # is this not sufficient?
plone.subrequest-1.9.1
plone.tiles-2.2.1
collective.themefragments-2.12

I've been meaning to migrate this system to Python 3, now that the Ansible playbook for Plone supports it. That's the only thing I think that could affect this. Thanks for checking on your system.

That looks correct to me.
What is wrong with this?

By the way: do you want to add an url for a script or do you want to add the javascript ?

If you just want to add the url I would do something like

  1. Change the field to URI

  2. Change the template to

     <script src="${name_of_url_field}"></script>
    

PS: You might want to add some dummy text that you hide with CSS when not in Mosaic editor.. That would make it easier to 'see in mosaic'.

Plone Foundation Code of Conduct