When I input <iframe> with its HTML Source Editor, it's just filtered.
Is there an option to make it work with <iframe>?
Yes you can do this:
You should read in the documentation about valid elements.
You have to add valid elements in your tinymce init, otherwise tinymce will delete those elements:
Add:
extended_valid_elements : "iframe[src|width|height|name|align]",
Related
I have a content management system that uses TinyMCE to edit text, and I am using the inline option. The issue I have is when the content contains an iframe - when TinyMCE is initialised, it converts the iframes to an image tag:
<img data-mce-p-allowfullscreen="allowfullscreen" data-mce-p-frameborder="0" data-mce-p-src="https://www.youtube.com/embed/xxxxx" width="560" height="315" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-mce-object="iframe" class="mce-object mce-object-iframe" data-mce-src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
I then need to get the edited HTML to save to the server. The docs for this functionality give no suggestion on how to do this, so currently I use jQuery to just get the HTML content of the element the TinyMCE editor was initialised on, however this contains the image tag instead of the original iframe, which is what then gets saved.
Is there a better way to get the HTML from n inline TinyMCE instance, or change how TinyMCE displays iframes?
Here is a TinyMCE Fiddle that shows TinyMCE running inline with an iFrame in the content. When I use getContent() to extract the content it just shows as an iFrame.
http://fiddle.tinymce.com/rkgaab
As a rule of thumb I would not use jQuery to try to get the raw HTML as TinyMCE does a variety of things to accommodate for how inline editing works. The getContent() API is documented here:
https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#getcontent
...and this is correct behavior but where is this file with this setting in TinyMCE 3.4.7 (in modx Revolution 2.2.6 it's TinyMCE 4.3.3)?
Is it possible to add some other exceptions? For example if I want everything be wrapped in p except img, etc.?
You can configure what is valid and what is not. For this check the tinymce configuration parameters valid_elements, valid_children and extended_valid_elements.
Tinymce editor is not rendering editor properly when the content is something like
<textarea><p><sample data></p></textarea>
i.e. <sample data>.
When I initialize a TinyMCE editor here, I dont see anything as it looks like it assumes <sample data> is an HTML tag.
Please assume I have tinymce.js loaded and I initilize using tinymce.init.
Is there a fix for this? Please let me know if it is a server side fix, or is there a tinymce.init option I could give to fix this problem.
PS: It does look like this is an HTML Entity encoding related issue but I am hardly an expert in this area.
Have a look at the tinymce config parameter entity_encoding.
If this does not work you may use this workaround
// save content
var saved_content = document.getElementById('id_of_my_textarea').innerHTML;
// init the editor
tinyMCE.execCommand('mceAddControl', false, 'id_of_my_textarea');
// after tinymce is fully initialized do
// you should use the tinymce configuration parameter "setup" rather than this code here
tinymce.get('id_of_my_textarea').setContent(saved_content);
I'm using N2CMS which in turn uses TinyMCE to edit HTML content.
what i need to do is disable the TinyMCE HTML validation completely.
Its stripping out anything out that doesn't adhere to its settings.
If I add a custom attribute <a href="{0}" test="tester1" /> it just removes it the custom attribute!
also, it always add <p> tags around every bit of HTML content.
how can i disable the validation?
any help is very much appreciated.
to resove this, add these into the tinyMCE settings, or init
cleanup_on_startup: false,
trim_span_elements: false,
verify_html: false,
cleanup: false,
convert_urls: false
There are a relatively large number of TinyMCE options related to cleaning up and validating HTML.
The valid_elements or extended_valid_elements option can definitely help you with custom attributes:
extended_valid_elements: "a[href|test]",
That option would specifically allow href and test attributes on anchor tags per your example.
As far as your second question is concerned, could you please clarify? Are you asking how to avoid escaping HTML code that is pasted into the WYSIWYG editor or are you asking how to avoid wrapping text in paragraph or div tags?
another solution,
settings:
verify_html:false,
fix_table_elements:false,
schema:'html4',
invalid_elements:'',
valid_elements:'[]',
valid_children: '[]',
and I'm saving the html content to the hidden field by calling
tinymce.activeEditor.getContent({format: 'raw'})
this helps to prevent any html fixes
This is how I remove all sanitisation:
valid_elements: '*[*]',
plugins: "fullpage"
The valid_elements directive allows all elements and all of their attributes.
The fullpage plugin preserves the <html>,<head> tags etc.
To stop TinyMCE wrapping everything in <p> tags;
force_br_newlines: false,
force_p_newlines: false,
forced_root_block: '',
Those tags are usually paragraphs or divs. They are essential for every rte. Tinymce puts them around every bit of html because it needs to in order to for example be able to style passages of text.
Glad to see a lot of posts about tinymce but there's nothing here that helps me with my current problem.
What I am trying to do is work out how to add "code" to my text with tinymce.
Something like this
Does anyone know how I can do this.
Help would be appreciated.
Mandy
You will need to add pre to the tinymce init setting valid_elements
You need to add to the editor the Code Sample plugin to your editor.
This is the example code to include the plugin from the TinyMCE website.
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "codesample",
toolbar: "codesample"
});
The codesample plugin uses http://prismjs.com/ to embed the code samples within the editor and works out of the box. That is, when a user copies valid code syntax into the editable area the code will be automatically formatted according to Prism default CSS rules.
You need to add prism.js and prism.css to your page for syntax highlighting to work.
Then you will get the code sample button in your editor interface.
Here you can find the Documentation about.