Plone rich text tile tries to load incorrect js URL for TinyMCE - tinymce

Plone 4.2.1.1
plone.tiles 1.2
plone.app.tiles 1.0.1
plone.app.blocks 1.0
plone.app.drafts 1.0a2
Products.TinyMCE 1.2.15
I have a Plone site with two rich text tiles on a page, created following Using tiles to provide more flexible Plone layouts.
The problem is that when editing the tiles, TinyMCE will not load.
In Firebug on the Net tab I see a whole slew of 404s that look like this:
http://example.com/en/front-page/##edit-tile//plugins/pagebreak/editor_plugin.js
By comparison, I know that the correct URLs should look like this:
http://example.com/portal_javascripts/MyTheme/plugins/xhtmlxtras/editor_plugin.js
When I set my portal_javascripts in Development Mode, it works, but when I turn Development Mode off, that's when I see this problem.
So apparently it's due to some kind of javascript conflict, but I don't know where to look for it.
I really need to solve this problem, so any help would be greatly appreciated!
Additional information:
When portal_javascripts has development mode turned off, the condition in this line is never true: https://github.com/plone/Products.TinyMCE/blob/1.2.x/Products/TinyMCE/skins/tinymce/tiny_mce_src.js#L47
That's because the tiny_mce.js file is merged with other files and the name is randomized, and so looking it up by name will always fail. Consequently, the baseURL property of the tinymce object will not be set in init.
Instead, baseURL ends up being set here:
https://github.com/plone/Products.TinyMCE/blob/1.2.x/Products/TinyMCE/skins/tinymce/tiny_mce_src.js#L8397
This is where the URL http://example.com/my-page/##edit-tile/ is used for baseURL.
I verified this by turning off merging and caching in portal_javascripts, but leaving development mode off. Then it works, because it finds tiny_mce.js by name.
Also, I found that when it fails, all of TinyMCE's plugins are added as explicit <script> elements in the head of the iframe (with the ##edit-tile URLs, which can't be loaded). By contrast, when it works, all the plugins are loaded here:
https://github.com/plone/Products.TinyMCE/blob/1.2.x/Products/TinyMCE/skins/tinymce/tiny_mce_src.js#L8458
IOW, they are not added explicitly to the iframe as <script> elements.
(In case I wasn't clear, when I mention iframe, I'm talking about the tile's editing overlay, not TinyMCE's. There is an iframe inside an iframe....)

Related

TinyMCE Text editor security with HTML

I'm using the free JS plugin from tinymce and interested in preventing an HTML injection with the tinymce text editor.
I've added this property to the INIT:
invalid_elements: 'script' (just for this example)
However nothing happens. The editor still "accepts" the script tag and pass it on.
I looked at https://www.tiny.cloud/docs/tinymce/6/content-filtering/#invalid_elements and it should work but I don't see any change once it's added.
Am I doing something wrong?
Is there a way to limit some HTML elements with this editor?
Any other tips on how to use that editor and prevent the malicious HTML..?
TinyMCE certainly has a variety of configuration options to help you control what content is created in the editor but you can never assume that data provided to you client side is "clean" or "safe". Nefarious people can bypass your front end and all of its validation if their goal is to cause harm to your system.
You should always configure your front end appropriately. TinyMCE has a variety of configuration options to assist with content filtering/validation (https://www.tiny.cloud/docs/configure/content-filtering/) to only allow those types of tags you want created, etc including:
https://www.tiny.cloud/docs/configure/content-filtering/#valid_elements
https://www.tiny.cloud/docs/configure/content-filtering/#extended_valid_elements
https://www.tiny.cloud/docs/configure/content-filtering/#valid_children
https://www.tiny.cloud/docs/configure/content-filtering/#schema
https://www.tiny.cloud/docs/configure/content-filtering/#invalid_elements
However, regardless of the front end design, you should always re-check submitted content on the server to ensure it is safe. There is simply no way around that need. What constitutes "safe" is likely a business decision based on what your application does and who uses it.
There are many different libraries you can use server side to do this sort of validation/cleansing so depending on your specific server side setup you can find libraries that allow you to "sanitize/purify" the submitted HTML.
I would note that TinyMCE (by default) should not allow <script> tags in your content so it is likely that such behavior could be due to your current configuration.

How to serve System.Web.UI.DataVisualization chart images from different domain?

I have a set of System.Web.UI.DataVisualization charts (ASP.NET 4.0) working great and saving the files to disk. No problems and works great.
The challenge is that I am serving all of my static image and assets from a cookieless domain -- and eventually maybe from a CDN -- and unfortunately, the chart's IMG SRC is always relative. I can't seem to find a way to override that so that I can specify the root domain of the static asset server.
Some possible workarounds I haven't tried yet are:
Progamatically generate the charts and manually add an image control to the page
URL rewrite any requests for images (extra server hit, may not work)
Search and replace the SRC manually before markup is sent to browser (ugh)
Are there any other possibilities I'm not aware/thinking of? Thanks!
To answer my own question, the first bullet of programatically generating the charts (vs having the control markup in the HTML) and adding a control to the page manually seems to work just fine.
It removes the ability to style things in the markup though, so any other ideas are welcome.
Edit: I decided to leave the styling markup and programatically hide the chart control and add in the image control separately. Works great!
Edit: There is one caveat to my solution of adding the image control separately -- if you used the tooltips for each datapoint, they will no longer work once you implement this change since they are generated by the control itself.

TinyMCE executes HTML tags - how to stop it?

I'm trying to include simple code samples in the TinyMCE editor. It looks fine when I'm writing it and when it is saved in the MySQL database. But when loading it in the TinyMCE editor once again the HTML-tags seems to be executed, even though they are saved as HTML names and not the actual tags.
For example if I write
<b>test</b>
In the database this was exactly what was stored, but when loading it in the TinyMCE editor, it now looks like
<b>test</b>
And if this is saved and loaded one more time it turns into
test
So it seems like TinyMCE is executing the tags, even though they are not actual tags to begin with. Does anyone know why this is happening?
I have tried to add the pre-tag and code-tag around the code, but it seems to be ignored by TinyMCE. I've also tried to add
preformatted : true,
verify_html : false,
to the TinyMCE init-function.
Any help would be greatly appreciated.
Thanks.
From v3 documentation:
Removed in 3.4
This option enables or disables the built-in clean up functionality. TinyMCE is equipped with powerful clean up functionality that enables you to specify what elements and attributes are allowed and how HTML contents should be generated. This option is set to true by default, but if you want to disable it you may set it to false.
Notice: It's not recommended to disable this feature.
It might be worth mentioning that the browser usually messes with the HTML. The clean up not only fixes several problems with the browsers' parsed HTML document, like paths etc., it also makes sure it is a correct XHTML document, with all tags closed, the " at the right places, and things like that.
Example of usage of the cleanup option:
tinyMCE.init({
cleanup : true
});
I found out this is not a TinyMCE problem, this is just how textareas work. I used the PHP function htmlspecialchars() and everything is now working as intended.
<textarea><?=htmlspecialchars($content)?></textarea>

Umbraco Richtext Editor not loading

I've been scratchign my head on this one, hopefully someone can provide some feedback.
Umbraco Version: 4.7.2
Problem
A solution I developed for a company is having problem loading the rich text editor. They have a virtual IP solution acting as a proxy for their servers. After debugging on the client we noticed that the editor (tiny mce) was not loading because for some reason it is requesting the script and icons via the IP and not the URL. Obviously the IP is not hardcoded anywhere...
Need Help...
The client's IT department insists the configuration is ok; I think they are right, everything else in Umbraco seems to be working correctly. So I need help...
Is there anyway I can force the editor to be loaded from a specific URL?
I have experimented with changing the JS on umbraco_client, but the changes do not show when I load the editor. they appear to be cached somewhere (processed by the compressor), I've re-started the app and cleared my cache with no luck. How can I make my JS Changes be picked up?
What I've Tried
Setting the document.domain="my-url". No luck.
Setting the document_base_url on tinyMceConfig.config. Of course this is for links within the editor, so.. no luck
All other changes I've tried are on the JS files on /umbraco_client/tinymce3/, but I can't get them to show.
Any pointers?
Thanks,
-Covo
Is the RTE not rendering within umbraco it self or is the content not rendering on the front end?
This is a very good question - have you tried removing the property and adding again?
Other than what you've tried so far I'm out of suggestions other than the above sorry.

How to put the Amazon Kindle Web Browser into Article Mode

How do you put the Amazon Kindle web browser into Article Mode via HTML or Javascript?
Editor's note: Some pages are not automatically detected as "articles" by the Kindle 3 browser, and give an error message when trying to go into Article mode. What does the Article mode use to determine what portion of the page to display?
Is this related at all to Readability?
http://lifehacker.com/5163401/readability-bookmarklet-quick+formats-pages-for-smoother-text
Actual JavaScript code for Readability, which is heuristic based:
// Study all the paragraphs and find the chunk that has the most <p>'s and keep it:
This also appears to be related to Safari 5's Reader mode. Here is what is required for Safari Reader:
This definitely needs more investigating, but so far, these appear to be the most important factors for Safari’s Reader functionality to kick in:
Use the right markup, i.e. make sure the most important content is wrapped inside a container element. Whether you use <article>, <div> or even <span> doesn’t seem to matter — as long as it’s not <p>.
The content needs to be long enough. Use enough words, use enough paragraphs, use enough punctuation. Every paragraph should have at least 100 characters.
Reader doesn’t work for local documents.
http://www.wired.com/gadgetlab/2010/09/simple-tip-turns-kindle-into-ultimate-news-reader/ - The "f" key feature outlined above or some other feature? Not quite sure what article mode means.
It means that the browser will try to identify if the page you are looking at has a main body of text (is an article), parse it out and then display only that text without clutter and for easy scrolling.
I don't think you can force it via the web page's code
As far as I know, once the website has loaded (and if you are on an specific topic) you can turn on the "Article Mode" from the menu.
I've seen similar JS tools for Chrome too, so I assume it's part of webkit.