I would like so if it's possible in the Tinymce editor to disable the color with the copy past from Word for example.
Thanks for the help.
If you console.log value in onEditorChange event of editor after pasting the text, you can see style="color: red;" is added in the pasted text.
In onEditorChange you can use regex to remove color property from style, and then set the edited value.
onEditorChange={(value) => {value.replace(/color(.*?);/i, "")}}
Check this example
Note: The code is according to tinymce react component. You may need to change some code if you are not using tinymce for react
Related
Using the tinymce wsywig editor, is there any way to disable the fact that using text will be italic automatically ?
Thanks in advance and regards,
Ofer
to clarify what's happened, are you setting some content in the editor to appear when it loads? If so, you can control how content is styled when the editor loads with the setup function. Add something like this to the TinyMCE.init script:
setup: function (noItalic) {
NoItalic.on('init', function () {
this.setContent('<p>This text is not italic</p>');
});
}
It might be that you have a custom style set up that puts italic tags on everything automatically.
Check your tinymce.init script for a content_style value and see if the font-style is set to italic;. If so, remove the font-style option or set to normal.
If neither of these fit your situation, please post some more details – how you've configured TinyMCE with a code sample so we can see the text content in italics.
I tried removing the p tag from RTE of AEM(6.2) by adding the property removeSingleParagraphContainer :true in rte text node.It removes the p tag from first paragraph but as soon as we enter the next paragarph the p tag gets added.It seems the component needed to be customized from out of box.
Is there any other way can we achieve this.
The functionality which I require is that no tag should get added until users selects a specific formatter tag from paraformat.
Thanks for the Help!
I've struggled with this issue once upon a time. As far as I know there is no way to do it with configuration. You'll need custom code to get rid of these <p>'s.
One thing I can advise is that it's far easier to do it from within your code once already reading the property from JCR - then tweaking the aem component not to add it.
This is the default behaviour of RTE OOTB. removeSingleParagraphContainer is for backward compatibility and not the behaviour you are expecting.
By default, pressing Enter will add a <p> tag but if you press Shift+Enter (at least on Mac, not sure on Windows) you will get a <br> tag which is probably what you are expecting.
The only way to change the behaviour is to overlay the RTE control.
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;
}
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);
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.