I have this HTML code:
<p>Lorem ipsum...</p>
<my-custom-tag></my-custom-tag>
<p>...dolor sit amet...</p>
In this case default behavior of TinyMCE is skip from rendering the custom tag, because don't know what should do with it.
How can I tell to TinyMCE "if you see the my-custom-tag in the HTML code, then replace it to an image only in rendered version of code, and don't touch the code"?
You need to allow your custom tag in the content filtering options, like so:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
custom_elements: 'my-custom-tag'
});
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
When I copy some text on websites it copies also html tags and after inserting into textarea with tinymce I get the same copy text. For example, If I select a text and copy it with black background I will get it in the textarea too. I've found the function which strip html tags setContent(html, {format: 'raw'});, but I don't know in which place I have to use it. Who can help to fix it?
Use the paste plugin with paste_as_text: true
tinymce.init({
selector: '#mytextarea',
plugins: 'paste',
paste_as_text: true,
});
Example: https://jsfiddle.net/user2314737/bcu1dcsx/
I want to create a web-based WYSIWYG HTML editor that allows the user to insert pre-defined HTML elements with certain class or id attributes.
For example, any HTML editor allows the user to select some text and click the 'bold' button, and this will wrap the selected text in <b></b> tags.
I would like the user to be able to select some text, click a button called 'somebutton' and wrap the selected text in <div class="someclass"></div>, or click a different button and wrap the text in <h1 id="someid"></h1>, or any other HTML element with a specific attribute as defined by me.
I know that there are a lot of javascript based HTML editors out there, but I am specifically looking for any that are easy to extend in the way described above. I have looked at TinyMCE and Aloha, and in both cases found the documentation very difficult to use or non-existent.
I am looking for:
Recommendations of any editors that are easy to extend in this way
Tutorials or instructions for how to add custom elements as described above
Thank you!
CKEditor provides a flexible styles system, with rules defined as follows (in styles.js or directly in the config):
{
name: 'My style',
element: 'h2',
attributes: {
'class': 'customClass',
id: 'someId'
},
styles: {
'font-style': 'italic'
}
},
Producing:
<h2 class="customClass" id="someId" style="font-style:italic;">Custom element</h2>
Once defined, styles are available directly from the Styles Combo Box, possible to apply either to the current selection or to new elements.
Styles can be created dynamically, applied to ranges and elements with the API. The Stylesheet Parser plugin can extract styles directly from CSS files.
Note: Defining custom styles may need a proper configuration of Advanced Content Filter (since CKEditor 4.1).
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.