TinyMCE 5 not cleaning attributes from tags - tinymce

TinyMCE 5 just won't clean all the attributes from tags. It leaves stuff like "data-gps-track, data-controller, aria-label:"" ". It cleans stuff like "href, style, class". Any idea what's the problem here?
tinymce.init({
selector: "#mytextarea",
plugins: "paste, code",
toolbar: "edit, code",
paste_block_drop: false,
paste_tab_spaces: 2,
paste_as_text: cleantext,
valid_elements: "a,code,p",
});
You can try pasting stuff off StackOverflow, where these attributes are present.

I have ended up using an answer from this StackOverflow answer.
I have also added a filter for clearing aria attributes to the regex.
var stripDataAttributes = function (html) {
var tags = html.match(/(<\/?[\S][^>]*>)/gi);
tags.forEach(function (tag) {
html = html.replace(
tag,
tag.replace(
/(data-.+?=".*?")|(data-.+?='.*?')|(data-[a-zA-Z0-9-]+)|(aria-.+?=".*?")|(aria-.+?='.*?')|(aria-[a-zA-Z0-9-]+)/g,
""
)
);
});
return html;
};
tinymce.init({
selector: "#mytextarea",
plugins: "paste, code",
toolbar: "edit, code",
paste_block_drop: false,
paste_tab_spaces: 2,
paste_as_text: cleantext,
valid_styles: {
"*": "",
p: "color",
},
// https://www.tiny.cloud/docs-4x/configure/content-filtering/
// valid_elements: "*[*|-href]",
// https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x#valid_elements/
// jen pozor na mezery (když jsem měl valid_elements: "a, code, p" , tak mi to nešlo!)
paste_preprocess: function (plugin, args) {
args.content = stripDataAttributes(args.content);
// args.content = args.content.replace(cleanElements, "$1>");
},
});

Related

Tinymce: How to add or modify attributes after (or during) the init phase?

What I need basically would look something like this:
tinymce.init({
selector: '.tinymce-texteditor',
plugins: 'code',
height: 500,
if (!candEdit) {
menubar: false,
toolbar: false,
}
...
});
Sure enough this code doesn't work, but the idea is to add or modify some attributes according to some external variables.
How can I do that ?
Ok I've got it. Modifications can be done into the setup method:
tinymce.init({
selector: '.tinymce-texteditor',
plugins: 'code',
height: 500,
setup: function (editor) {
...
if (!$('#canEdit').val()) {
editor.settings.menubar = false;
editor.settings.toolbar = false;
editor.settings.readonly = 1;
}
}
...
});

TinyMCE and Piranha CMS not allowing me to set <style> tags as valid elements :(

I'm trying to add <style>// custom css here</style> into the tiny mce editor but currently it deletes the style tags and anything in between them on save.
I am trying to set valid_elements: "style" and/or custom_elements: "sabioStyle", and/or extended_valid_elements: "style". I've also tried: "[]" according to tiny's docs but it seems to have no effect on anything. I see that the init function:
piranha.editor.addInline = function (id, toolbarId) {
tinymce.init({
selector: "#" + id,
browser_spellcheck: true,
fixed_toolbar_container: "#" + toolbarId,
menubar: false,
branding: false,
statusbar: false,
inline: true,
convert_urls: false,
plugins: [
piranha.editorconfig.plugins
],
width: "100%",
autoresize_min_height: 0,
toolbar: piranha.editorconfig.toolbar,
extended_valid_elements: piranha.editorconfig.extended_valid_elements,
block_formats: piranha.editorconfig.block_formats,
style_formats: piranha.editorconfig.style_formats,
file_picker_callback: function(callback, value, meta) {
// Provide file and text for the link dialog
if (meta.filetype == 'file') {
piranha.mediapicker.openCurrentFolder(function (data) {
callback(data.publicUrl, { text: data.filename });
}, null);
}
// Provide image and alt text for the image dialog
if (meta.filetype == 'image') {
piranha.mediapicker.openCurrentFolder(function (data) {
callback(data.publicUrl, { alt: "" });
}, "image");
}
}
});
$("#" + id).parent().append("<a class='tiny-brand' href='https://www.tiny.cloud' target='tiny'>Powered by Tiny</a>");
};
Piranha uses sets extended_valid_elements: piranha.editorconfig.extended_valid_elements but my dev tools are not showing the value that I type in editorconfig.json...
editorconfig.json
devTools
I've tried everything their docs say, I have a question open on github with Piranha as well.. Any suggestions would be great! Thanks
See the complete answer here: https://github.com/PiranhaCMS/piranha.core/issues/1663

How to embed Instagram post using Tiny MCE editor

I'm copying instagram embed code in tinymce source code and i can see the block of instagram but couldn't able to see the image. Please help me fix this issue
The problem is that when you add the embed code to tinymce. The code gets rendered in an iframe and the source code does not execute. The best approach in this case is to add a popup to take the embed code, extract the src from it and append it to the head of the iframe. This way the source code will execute and you will get a rendered html.
var editor_id = "";
tinymce.PluginManager.add('instagram', function(editor, url) {
// Add a button that opens a window
editor.addButton('instagram', {
text: 'Instagram',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Instagram Embed',
body: [
{ type: 'textbox',
size: 40,
height: '100px',
name: 'instagram',
label: 'instagram'
}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
var embedCode = e.data.instagram;
var script = embedCode.match(/<script.*<\/script>/)[0];
var scriptSrc = script.match(/".*\.js/)[0].split("\"")[1];
var sc = document.createElement("script");
sc.setAttribute("src", scriptSrc);
sc.setAttribute("type", "text/javascript");
var iframe = document.getElementById(editor_id + "_ifr");
var iframeHead = iframe.contentWindow.document.getElementsByTagName('head')[0];
tinyMCE.activeEditor.insertContent(e.data.instagram);
iframeHead.appendChild(sc);
// editor.insertContent('Title: ' + e.data.title);
}
});
}
});
});
tinymce.init({
selector:'textarea',
toolbar: 'bold italic | alignleft aligncenter alignright alignjustify | undo redo | link image media | code preview | fullscreen | instagram',
plugins: "wordcount fullscreen link image code preview media instagram",
menubar: "",
extended_valid_elements : "script[language|type|async|src|charset]",
setup: function (editor) {
console.log(editor);
editor.on('init', function (args) {
editor_id = args.target.id;
});
}
});
Refer the JSFiddle - https://jsfiddle.net/z3o2odhx/1/
You can add the embed html from the Instagram toolbar button and get the rendered html, but this also messes the source code. Hope this is helpful.
Alternatively, if you have the option of adjusting the html of the page, you can just add <script async defer src="//www.instagram.com/embed.js"></script> somewhere on that page, since it looks like TinyMCE is stripping the js include.
If you want to selectively include it, you can also use something like this in that page's js:
if($(".instagram-media").length) {
var tag = document.createElement('script');
tag.src = "//www.instagram.com/embed.js";
tag.defer = true;
tag.async = true;
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
TinyMCE changed a bit in the last version (v5) - here is updated version of working Ananth Pais' solution:
tinymce.PluginManager.add('instagram', function(editor, url) {
editor.ui.registry.addButton('instagram', {
text: 'Instagram',
onAction: function() {
editor.windowManager.open({
title: 'Instagram Embed',
body: {
type: 'panel',
items: [
{
type: 'textarea',
height: '300px',
name: 'instagram',
label: 'Instagram embed code',
}
],
},
buttons: [
{
type: 'submit',
name: 'submitButton',
text: 'Embed',
disabled: false,
primary: true,
align: 'start',
}
],
onSubmit: function(e) {
var data = e.getData();
var embedCode = data.instagram;
var script = embedCode.match(/<script.*<\/script>/)[0];
var scriptSrc = script.match(/".*\.js/)[0].split("\"")[1];
var sc = document.createElement("script");
sc.setAttribute("src", scriptSrc);
sc.setAttribute("type", "text/javascript");
var iframe = document.getElementById(editor_id + "_ifr");
var iframeHead = iframe.contentWindow.document.getElementsByTagName('head')[0];
tinyMCE.activeEditor.insertContent(data.instagram);
iframeHead.appendChild(sc);
e.close();
}
});
}
});
});
tinymce.init({
selector:'textarea',
toolbar: 'bold italic | alignleft aligncenter alignright alignjustify | undo redo | link image media | code preview | fullscreen | instagram',
plugins: "wordcount fullscreen link image code preview media instagram",
menubar: "",
extended_valid_elements : "script[language|type|async|src|charset]",
setup: function (editor) {
console.log(editor);
editor.on('init', function (args) {
editor_id = args.target.id;
});
}
});
https://www.tiny.cloud/docs/configure/content-filtering/#usingextended_valid_elementstoallowscriptelements
by default tinmye prevent script codes.
enable them on tinymce options
extended_valid_elements : 'script[src|async|defer|type|charset]'

Orchard CMS Bootstrap CSS Classes in Html Editor

We have an Orchard CMS 1.8 site that has been deployed and the content is now managed by the customer. One thing they are having a problem with is adding Bootstrap UI CSS classes to their content in the Html editor.
For example, they have some content and want to create a link to a "Register Now" page. It's easy enough to create the anchor tag using the toolbar buttons but without knowledge of HTML how would they turn that anchor tag into a Bootstrap button without diving into the HTML.
Also knowing that Bootstrap likes to combine classes like the following, how could a content manager pick a combination of styles from the Html Editor toolbar.
Register Now
Does anyone have a recommendation for customizing TinyMCE to make bootstrap classes more accessible to a content manager?
Thanks,
Brian
In Your Theme; add a ResourceManifest and create a reference to a Javascript file.
manifest.DefineScript("OrchardTinyMce").SetVersion("1.1").SetUrl("orchard-tinymce.js").SetDependencies("TinyMce");
this js file will be a TinyMCE customisation override. Make sure the ScriptName is the same and the version is always higher than the one at use in the TinyMCE module.
var mediaPlugins = ",|";
if (mediaPickerEnabled) {
mediaPlugins += ",mediapicker";
}
if (mediaLibraryEnabled) {
mediaPlugins += ",medialibrary";
}
tinyMCE.init({
theme: "advanced",
schema: "html5",
mode: "specific_textareas",
editor_selector: "tinymce",
plugins: "fullscreen,searchreplace,inlinepopups" + mediaPlugins.substr(2),
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_buttons1: "search,replace,|,cut,copy,paste,|,undo,redo" + mediaPlugins + ",|,link,unlink,charmap,emoticon,codeblock,|,bold,italic,|,numlist,bullist,formatselect,blockquote,styleselect,|,code,fullscreen,",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_resizing : true,
convert_urls: false,
content_css: "/Themes/[*YOUR-THEME-NAME*]/Styles/custom.css",
valid_elements: "*[*]",
// shouldn't be needed due to the valid_elements setting, but TinyMCE would strip script.src without it.
extended_valid_elements: "script[type|defer|src|language]"
});
As you can see, now you can customise TinyMCE at will. Take note of the content_css property. That css file will be used in your Editor.
I use it all the time, so my clients can really have a true WYSIWYG experience.
One way to do this is to add bootstrap styles into style_formats in tinymce configuration.
Here is one way to do it by adding to orchard-tinymce.js
style_formats: [
{
title: 'Typography', items: [
{
title: 'Body Copy', items: [
{ title: 'Lead Body Para', block: 'p', classes: 'lead' }
]
},
{
title: 'Inline Text', items: [
{ title: 'Small', inline: 'small' },
{ title: 'Highlight', inline: 'mark' },
{ title: 'Deleted', inline: 'del' },
{ title: 'Strikethrough', inline: 's' },
{ title: 'Insert', inline: 'ins' }
]
},
Complete implementation is here:
https://www.bhavindoshi.com/blog/bootstrap-style-formats-in-tinymce-orchard-or-other-cms

How to allow custom uppercase tags in TinyMCE

Does anyone know how to allow having custom uppercase tags in TinyMCE? It seems that TinyMCE doesn't like uppercase tags, even though they have been declared as valid. Here is my TinyMCE config:
tinyMCE.init({
mode: "specific_textareas",
theme: "advanced",
language: "en",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_buttons1: "bold,italic,|,sub,sup,|,charmap,|,table,|,code",
theme_advanced_path: false,
theme_advanced_resizing: true,
plugins: "fullscreen,paste,table",
paste_auto_cleanup_on_paste : true,
relative_urls: false,
width: "300",
height: "300",
theme_advanced_resizing_min_height : "10",
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : '',
entity_encoding: "raw",
valid_elements : "B/strong,I/em,SUP/sup,SUB/sub",
extended_valid_elements: "CUSTOM"
})
Typing something like
<CUSTOM>this is a custom tag</CUSTOM>
doesn't work because <CUSTOM> gets stripped off.
If I change the init script to extended_valid_elements: "custom", then it works fine - I can type
<custom>this is a custom tag</custom>
and the <custom gets preserved.
Doesn't anyone know any workaround?
Thanks!
Here is a description of how to do that (the reverse works analogue): http://www.codingforums.com/archive/index.php/t-148450.html
You should use the tinymce onInit event and to change the tags back to Uppercase use onSubmit or onSave (alternatively you may change the content back before submitting your content on any other suitable location of code).
To add this handlers use the tinymce setup configuration parameter
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
$(ed.getBody()).find('p').addClass('headline');
// get content from editor source html element
var content = $(ed.id).html();
// tagname to lowercase
content = content.replace(/< *\/?(\w+)/g,function(w){return w.toLowerCase()});
ed.setContent(content);
});
ed.onSubmit.add(function(ed, evt) {
$(ed.getBody()).find('p').addClass('headline');
// get content from edito
var content = ed.getContent();
// tagname to toUpperCase
content = content.replace(/< *\/?(\w+)/g,function(w){return w.toUpperCase()});
// write content to html source element (usually a textarea)
$(ed.id).html(content );
});
},