We are currently using TinyMCE (Version: 3.3.9.2 (2010-09-29)) on a CakePHP framework and are trying to modify the Advance Themes file tiny_mce/themes/advanced/editor_template.js to accept the Microdata syntax (for using the Schema.org vocabulary) by adding the following string:
extended_valid_elements : "p[itemtype|itemscope|itemprop|id|class|style|title|dir<ltr?rtl|lang|xml::lang|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup]",
and/or
extended_valid_elements : "#[itemtype|itemscope|itemprop|id|class|style|title|dir<ltr?rtl|lang|xml::lang|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup]",
Referencing this debug snippet: http://www.tinymce.com/develop/bugtracker_view.php?id=4469
However, when we modify the file and refresh, even when we put <p itemtype="def">This is some content.</p> or <div itemscope itemtype="http://schema.org/Movie">This is some content.</div> as tests in the HTML source editor, everything is being stripped.
Anyone have any ideas on how to fix or what is making TinyMCE continue to strip structured data?
Before TinyMCE v3.4 there was a config option cleanup and another option verify_html. You might try setting those options to false. This thread seems to suggest that some attribute stripping would still happen even when the attributes are listed in extended_valid_elements.
I have a dim memory of running into this issue myself and reading that TinyMCE was aggressive in fixing invalid HTML even with the configs set to be as liberal as possible. I will edit in some links if I can find those threads on the TinyMCE forum.
Another issue could be validation going on with CakePHP. Older versions of CakePHP have a Sanitize class that could filter out HTML. Confirm that the string is not running through a library like HTML Purifier.
Related
I am working with tinyMCE, which, in its latest release doesn't support the editing of <head> and <!doctype>. I still need to use it to create a "full" document, so i need a way of "prepending" those tags to the editor content.
The problem can be split in two parts:
When i edit a file in my page, and use save() from TinyMCE, only the contents in the editor are POSTed to my Node.js + Express backend. The solution i've found is to have, outside of the editor, some buttons to create options for the request, so that the server knows what to write together with the content.
The real problem arises when i want to upload a file from my machine to be modified in the editor, when a file i upload is a "full" HTML file. In that case, the content outside the <body> tag still isn't displayed in the editor, but it's discarded, stopping me from editing it from within the page as i would if i were creating a new doc.
As i mentioned i'm working with node.js and Express for a backend, and, since i'm not familiar with jquery i'd need the solution to be vanilla js.
I have looked into the html-dom-parser' library, but it doesn't seem to fit the bill as i don't see how i can use the dom object it produces to then do the splitting.
I am using an <input type ="file> to choose the file i want to upload, but this problem is stumping me and i'm not sure anymore if it's the right path, so any help is welcome.
I am attempting to use the 'DataTables' table plug-in for jQuery on a simple Domino XPage.
I have loaded the two required libraries from CDN's...
JQuery: ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
DataTables: cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css
I have also tried loading them from local resources (doesn't help).
I then prepare a basic table on my XPage, and include the necessary Javascript to initialise the table...
$(document).ready(function() {
$('#tableID').DataTable();
} );
When I test the XPage, I continually observe
test.xsp:15 Uncaught TypeError: $(...).DataTable is not a function
I've searched through several forums, and the general consensus is that...
a) I have loaded the libraries in the wrong order (nope!)
b) I have loaded jQuery more than once (how?)
I have many other solutions using Bootstrap and jQuery, and have never run into this issue before. So, I though I might strip the XPage back to bare bones. I got rid of all Dojo elements on the page by adding the following line to the 'xp.properties' file...
xsp.client.script.libraries=none
That actually seemed to work! I no longer observed the error. However, my page no longer looked like it should (for obvious reasons!). I've had to restore the 'xp.properties' file back to its original state, but cannot find out how to avoid the error.
Has anyone successfully used the 'DataTables' jQuery plug-in on an XPage? Any feedback or suggestions would be most appreciated!
Yes I have been doing a load of work on DataTables in XPages so it definitely works! I know your pain though....
The order of your jquery scripts in relation to each other may be okay, however there is a clash with dojo and it's AMD loader, so you have 3 options.
Option 1. Load your jquery scripts before any of the xpages scripts
Option 2. remove the 'amd loader' just before your jquery scripts and then restore it just after
Option 3. modify the javascript of the datatables so it ignores the amd problem
Option 1 : Loading your jQuery scripts first
If you are using resource aggregation, you can use this tip from Sven Hasselbach's blog, in which you use the generic 'headTag' resource tag and it will load first.
http://hasselba.ch/blog/?p=1181
If you want a solution that will work regardless of resource aggregation setting, I have an example on my blog in which you can create a viewRootRenderer which will then allow you to specify that you want a script loaded BEFORE everything else
http://camerongregor.com/2016/09/19/controlling-the-order-of-script-resources-e-g-jquery-with-a-custom-viewrootrenderer/
Option 2. Removing the AMD loader before loading scripts
There is an xsnippet which explains how to remove and then restore the amd loader so that a jquery plugin will load
https://openntf.org/xsnippets.nsf/snippet.xsp?id=hack-to-use-jquery-amd-widgets-and-dojo-together
Sven had already made a similar solution to mine above (viewRootRenderer) in which you can specify which scripts will need the amd loader disabled and it will do this for you, it is available here
http://hasselba.ch/blog/?p=2070
Option 3 : modify javascript of the jquery plugin (datatables)
Mark Roden demonstrated this on his blog. I don't really like doing it but hey it works!
https://xomino.com/category/jquery-in-xpages/
Let me know if any of this works! I hope I'm right, with javascript I never know...
I am developing a Google App Script project that will be used right from within a Google Sheet, with HTML files as dialogs. My project will be a mix of .gs files as well as HTML files for data entry, etc. I am trying to use the methodology explained here:
https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascript
to create global JavaScript and CSS modules that I can include in my HTML files rather than cutting and pasting inline code all over the place. This will be mainly useful for the data-saving routines which capture form data, serialize it, then save it to Sheets via the methodology outlined here (and many other places): http://railsrescue.com/blog/2015-05-28-step-by-step-setup-to-send-form-data-to-google-sheets/.
The problem I am having is with trying to call the "include" statement from my HTML files, namely, lines like:
<?!= include('JavaScript'); ?>
It doesn't work when I create a menu on the spreadsheet to display my HTML file as a dialog -- the text of the include line just shows up as literal output on the dialog, and code does not appear to be getting included (not in scope).
I know the Google example is primarily for pages delpoyed via a web app, but I'd like to use my HTML files as dialogs right inside the spreadsheet (e.g. from a menu or sidebar) -- that feels nice and tidy to me. But if I can't get includes to work, my code base is going to be a nightmare and it will be really, really hard to standardize CSS across the whole app. I don't want to be cutting and pasting all the time.
So, what is the secret behind this <?! tag, and why won't it work in my HTML files when they are called as dialogs? It is clear those lines are different from the get-go (maybe not in a bad way, but they don't work), as the Google Scripting console displays those lines oddly, as depicted in the screenshot below:
Please try adding:
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
More information can be found in Adding Style Sheets.
Figured it out. I was not properly understanding the way the HTML was being served up as a dialog. I was using this behind a custom menu option:
var html = HtmlService.createHtmlOutputFromFile(htmlFileName);
when I should have been using the more dynamic:
var html = HtmlService.createTemplateFromFile(htmlFileName).evaluate();
The latter generates a user interface object where the server-side script is executed and everything is included properly when I display the object with showModalDialog() (or showSidebar()).
I just had a complete misunderstanding of how the user interface object was being created, so now all scripting works inside my HTML files.
I'm using the Angular Dialog Service to build pop up forms on my website. This services source can be found here: https://github.com/m-e-conroy/angular-dialog-service/blob/master/README.md
Anyway, the actual angular and JavaScript that describes what the modal contains and does goes after the following where the ... is:
.run(['$templateCache',function($templateCache){
$templateCache.put(...)
My problem is the html and js seem to have to all be one after the other with no spacing or indentation allowed between any of it. This causes the code that describes the modal to essentially just be a wall of text that has become borderline unreadable and editable in my complicated modal. An example of this can be found in the JS portion of the code here: http://codepen.io/m-e-conroy/pen/rkIqv
Is there an easy fix which will allow me to have my modals html and JS in non wall of text format and have it build successfully? If there is no fix this seems like a pretty big flaw in using the Angular Dialog Service to handle modals...
Thanks!
There are tools, like html2js, that can build templateCache for you.
It means, that you can store your html code in html files (where it obviously should be), and then gather it into single javascript file with $templateCache.put(/* content of html file */); in it. Just don't forget to include resulting module into your project, so when one of the services requested html file, it could be found in templateCache.
So you shouldn't edit html in .js files. It's wrong on many levels.
I have some twig files that are a mixture of JavaScript, HTML, and twig markup. Is there a way with Eclipse to hi-lite a section of code and format it as, say JavaScript, then hi-lite another section and format it as HTML? I tried association the file type *.twig with the JavaScript editor, but, I do not seem to get any formatting. Syntax highlighting and code completion would be good too.
Thanks,
Scott
It is possible. If you have HTML/JS editors available (eclipse classic has them by default).
Go to preferences and: General > Editors > File Associations and add *.twig as a new file type and then add HTML editor (in the bottom panel) to it.
Then go to: General > Content Types, click on Text/HTML node (in Content Types box) and add *.twig file association in the bottom panel.
I've checked this and it works.
You can try to find a plugin that will support twig files and provide syntax highlighting. The Twig Eclipse Plugin looks promising as it at least seems to support HTML and twig markup together.