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/
Related
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'
});
I am using TinyMCE 4.6.0. When I add the table plugin and use it in toolbar, it doesn't show when I add it in the editor, The cursor does go down indicating activity, but nothing shows!
Try This
tinymce.init({
selector: '.textEditor',
plugins: "advlist lists table paste textcolor colorpicker tabfocus link preview",
toolbar: "table fontsizeselect bold italic underline forecolor backcolor bullist numlist link preview code", imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage",
menubar: false,
toolbar_items_size: 'large',
min_height: 500,
max_height: 800,
convert_newlines_to_brs: false,
statusbar: false,
relative_urls: false,
remove_script_host: false,
language: 'en',
});
Based on your answer to my original comment keep a few things in mind...
When you insert the table does the right HTML get placed in the editor? If you enable the code plugin you should be able to see the HTML source that TinyMCE is trying to render. If the HTML for the table is there then the plugin did its job.
Assuming the HTML is there you need to determine why it is not visible. You have multiple ways to pass CSS into TinyMCE and that CSS will impact how things look in the editor.
Lastly, look at the configuration options for the table plugin itself. There are some that impact how a table is visualized in the editor such as this one: https://www.tiny.cloud/docs-4x/plugins/table/#table_grid.
I have a page with several TinyMCE (v4) editors, which all work great ... until I try and add:
inline: true
to their configuration. When I do that the inline-ing part works great (the toolbar is gone, then appears when I focus the editor), but for some strange reason the editor stops working at that point. Inside the editor I see:
<br data-mce-bogus="1">
but I can't edit that text, or add new text, or do anything at all really with the editor.
I can make the editor work again if I remove inline: true, but I really want the inline effect. Does anyone have any idea how I can get inline without breaking my editors?
Actually, the "bogus" br tags appear for inline divs, too. They are added whenever the input field is empty. There appears to be no easy way to get rid of them. I use a CSS rule during the preview phase:
br[data-mce-bogus="1"] {
display:none;
}
And then strip them out if they make it to the server when the user tries to save.
I recently had this problem, inline: true would not work with a textarea. I change mine to a div and it now works as expected.
Are you using the tinymce jQuery package? The same thing was happening to me until I tried using the normal tinymce package instead.
<script>
$(document).ready(function () {
$("#comment").ready(function () {
$("#comment").val("")
})
})
</script>
I add this jquery script in html to solve this bug.
Add this snippet to your CSS file. That would prevent video bogus.
[data-mce-bogus="all"] {
display:none;
}
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.