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 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;
}
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.
im trying to use TinyMCE as part of a web form. Integration works fine, but once you submit the form, of course the data will be validated.
If validation evaluates to false, for example some other input has not been filled out, then of course I don't want the user to reenter all data. So i pass the Tinymce content back to the reloaded view.
The following problem occurs:
Content in Tinymce Textarea: test
Content in Tinymce after reload: <p>test</p>
So an extra paragraph is added as a wrapper each time.
I want Tinymce to treat the input, as if it was inserted into the html view, so that the plain text view would be allright, and no extra paragraphs are inserted.
How can I achieve this?
Thanks for your reply. That was just an example input, I definitely need an RTE, since I'm building some customized CMS functionality. I got it working now with html_entity_decode(), the html comes from a database, and yes, I do filter user input properly (basically CI does, but I tested to XSS on my own, just to make sure...). I'm not sure if I'm doing this the most elegant way...but the following seems to work fine for me:
JS Part:
<script type="text/javascript" src="<?php echo base_url();?>tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
$(document).ready(function(){
tinyMCE.init({
theme : "advanced",
mode : "textareas",
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
entity_encoding : "raw",
content_css : "<?php echo base_url();?>xcss/standard_tinymce.css",
});
});
</script>
Generate form textarea (the CI way):
echo form_textarea('content', html_entity_decode($content));
Thats it.
An input like:
<p><strong>test</strong></p><p>bla bla bla</p>
Would now be shown the following way in tinymce if it was stored in $content:
test
bla bla bla
And if you submit the form, then the post-data will be equal to $content again. And that is exactly the point where you should consider to check that post data for injections or XSS attacks, so please do not do it the same way, unless you keep track of what happens next...my solution probably is not very safe in ALL cases, in my case, this is fine, I assume, but if anyone knows better, I'm definitely willing to learn more about that ;)
You can specifically tell TinyMCE not to wrap your content into a root tag by specifying
forced_root_block : false
in your TinyMCE init options.
However this is not recommended for various reasons, please read this entry in the FAQ:
http://tinymce.moxiecode.com/wiki.php/TinyMCE_FAQ#TinyMCE_produce_BR_elements_on_enter.2Freturn_instead_of_P_elements.3F
Its quite simple.Add this to the tinymce init options
force_p_newlines : false
This is not possible due to the fact that tinymce (and all other rtes i know of) need to wrap text into block elements like p-tags or divs. This is neccessary in order to be able to style that text (one of the main functions of a rte).
You might consider not to use a tinymce editor for such simple form inputs if you do not need html code there.
I have TinyMCE installed on the back end of a site. Some of the html it's accessing isn't totally valid, which I realize is the problem in itself. However, TinyMCE is messing things up by making things valid. I have an <img> with no parents (no <p>, no <div>, etc), and TinyMCE is wrapping the <img> in <p></p>. I'm trying to find a setting that will stop that from happening.
Essentially, I want TinyMCE to allow <img> to be it's own element, rather than a child element, if that makes sense. My current settings are:
tinyMCE.init({
theme : "advanced",
mode : "textareas",
relative_urls : false
});
I had the same problem before I found this: http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/forced_root_block
A bit late, but maybe it will help someone in the future
I'm not an expert in tinyMCE but I'm pretty sure those automatic 'clever' source formatting or modification can be configured. Not sure if you have looked into that.
Example of usage of the force_p_newlines option:
tinyMCE.init({
...
force_p_newlines : true
});
Take a look at the reference here:
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration
I did a little more searching, and found an answer. First, I actually fixed the inherent problem by wrapping the <img> in a <div style="display:inline;">. However, the configuration solution can be found here:
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_child_elements
I attempted to just force the <body> tag to allow parentless images:
valid_child_elements: "body[img]"
but that denied all other tags from working. So I added some variables, like that link shows, and then I realized the proper solution. But, should anyone need to hack together a solution for an element, that page should solve the problem.