TinyMce Allow all Html tag - javascript

I'm using TinyMce and even though the danger of a script attack, I need to enable all html tags with the editor.
Currently, I'm use like:
valid_elements: "#[class],p[style],h3,h4,h5,h6,a[href|target],strong/b,"
+ "div[align],br,table,tbody,thead,tr,td,ul,ol,li,img[src]"
But always need to add something, I want to enable ALL HTML tags with all attributes. Is there such switch that Disables the HTML filtering?

You can set
valid_elements : '*[*]',
to allow all html tags.

To keep style tags, use valid_children : "+body[style]"

Related

How to add single option tag data to other HTML pages?

For example:
**index.html**
<body>
<option><select>1></select>
<select>2</select><select>3</select></option>
</body>
and having another file:
**page1.html**
<body>
here I want to have the same OPTION data
</body>
Is there any way to write the OPTION tag once, and then use it in multiple pages. I have to use them with up to 10 pages.
Sure its possible in javascript hoping that the option values are static and same for all pages.
In that case if you have a common javascript file (like helper.js,common.js)
Then you include that option code by dynamically binding to the body o your HTML
as Kenny mentioned correct you option tag format and check as how to dynamicaly append HTML using javascript
Functions to be used :
document.createElement()
document.body.insertBefore()
Reference:
https://developer.mozilla.org/en-US/docs/DOM/document.createElement
https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore
https://developer.mozilla.org/en-US/docs/DOM/Node.firstChild
You can make a php file containing the "html tags".
Then you can include this php file in the required pages.
You can also use javascript.
Create an option.js file,
Use the HTML DOM functions like document.createElement() to create the option and select tags, document.createTextNode() to create a text element.
Then use the appendchild function to append the text node to option tags.
<script src="option.js"></script>
Use the above script tag in the pages where you require these options.
That is it!

TinyMCE Stripping Out All Markup

I'm trying to insert a simple image link in a TinyMCE-wrapped text field, but it's stripping out all of my markup. My markup looks like:
<a class="video-launcher lightbox-video-launcher" href="http://www.youtube.com/watch?v=blah" ><span class="video-launcher-bg"></span><span class="video-launcher-button"></span></a>
My tinymce_config_url_init.html looks like:
{
"theme_advanced_toolbar_align":"left",
"content_css":"/media/css/cms_tinymce.css,/media/css/cms_tinymce_admin.css",
"theme_advanced_blockformats":"p,h2,h3,div,customformat",
"theme_advanced_statusbar_location":"bottom",
"theme_advanced_path":false,
"plugins":"fullscreen,paste",
"valid_elements":"*[*]",
"media_strict":false,
"paste_auto_cleanup_on_paste":true,
"theme_advanced_styles":"Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1",
"width":"680",
"theme":"advanced",
"theme_advanced_font_sizes":"8px,10px,12px,14px,16px,18px,20px,24px,36px",
"theme_advanced_resizing":true,
"height":"300",
"relative_urls":false,
"theme_advanced_toolbar_location":"top",
"inline_styles":true,
"language":"en",
"theme_advanced_buttons1":"fullscreen,|,undo,redo,|,bullist,numlist,|,anchor,link,unlink,charmap,|,code,|,justifyleft,justifycenter,justifyright,|,image,",
"theme_advanced_buttons3":"",
"theme_advanced_buttons2":"removeformat,styleselect,formatselect,fontselect,fontsizeselect,|,bold,italic,underline,|,forecolor,backcolor",
"removeformat_selector":"span,div,p,h1,h2,h3"
}
I know the problem is with TinyMCE, because without submitting the form, and just clicking the "html" button again, TinyMCE's popup shows no content.
I'm assuming TinyMCE is striping out anything it thinks looks insecurity or invalid. For my app, it's being used in an admin section, so the content can be trusted. How do I disable the TinyMCE config causing this markup from being stripped out?
Add your website's css stylesheet to the "content_css" variable, perhaps?
And also set "paste_auto_cleanup_on_paste" to false, not true.
You should have a closer look at the tinymce configuration paramters valid_elements. You need to set them accoring to your needs and define valid elements and attributes.

TinyMCE, allow data attribute

I have to use the HTML 5 data attribute in Tiny MCE, but the editor always clear them, as it's not an attribute known by the default valid_elements configuration.
So I have 2 problems here:
the data attribute is dynamic ( it could be data-options, data-test, data-foo, etc... ) So I would need a wildcard value or something.
I want to allow the data attribute for all tags.
So far, I've tried:
extended_valid_elements : '#[id|class|title|style|data-options]',
And:
extended_valid_elements : '*[id|class|title|style|data*]',
But it doesn't work :(
extended_valid_elements is not the best choice here.
Hava a look at the valid_elements setting. Here is an example
// The valid_elements option defines which elements will remain in the edited text when the editor saves.
valid_elements: "#[id|class|title|style|data-options|data*]," +
"a[name|href|target|title]," +
"#p,-ol,-ul,-li,br,img[src|height|width],-b,-i,-u," +
"-span[data-mce-type],hr",
I am using:
extended_valid_elements: "+#[data-options]"
and it works for me. (TinyMCE 4.3.11. Notice the + sign?)

Reset TinyMCE box

I am using TinyMCE editor. I want to clear the content inside the editor box with some button click present on my form.
Can you let me know how to do so?
This can be easily done (no need to use the slow jQuery tinymce build) using the following code as onclick-action of your button:
// 'content' is tinymce default,
// but if your textarea got an ID that is the one you need!
var my_editor_id = 'content';
// set the content empty
tinymce.get(my_editor_id).setContent('');
From the TinyMCE jQuery Plugin documentation, can be easily found from the page you linked:
// Will change the contents of an textarea with the ID "someeditor"
$('#someeditor').html('Some contents...');
// Will change the contents all text areas with the class tinymce
$('textarea.tinymce').html('Some contents...');
// Gets the contents from a specific editor
alert($('#someeditor').html());
Try setting it to empty string, might be just what you need.
If you are interested in clearing the content of the editor you can use:
tinymce.get('#editorId').setContent(''); // like others have suggested
However, if you'd like to reset the content and menu buttons etc. - essentially resetting the editor altogether you might consider using:
tinymce.get('#editorId').init();
Sets the specified content to the editor instance, this will cleanup the content before it gets set using
the different cleanup rules options.
tinymce.activeEditor.setContent('');
$('#name_of_your_textarea').val('');

Is there a JQuery tooltip plugin that supports HTML content and automatically positions tooltips?

I am searching for a Tooltip plugin/library for JQuery. It should be able to automaticlly position tooltips, like TipTip, and also support HTML content for the tips.
TipTip does fullfill both conditions, but:
Added HTML support with Tip Tip. You can now add HTML into the Title attribute (though this is not recommended if you want strictly valid code).
I believe this one does. For instance, this demo shows an image. You could easily have a bodyHandler that retrieves the HTML from an attribute on the element. For instance
foo
That's perfectly valid HTML, and the bodyHandler would look something like
return this.attr("data-tooltip"));
I didn't want to leave jquery native plugin and mess with additional libs, so I figured out quite simple solution:
$('.tooltips').tooltip({
content: function(){
return $(this).attr('title');
}
})
This way - your title attribute with HTML may be used successfully.
I like TipTip a lot. The "title" field usage is awkward, but you don't have to do that:
content: string (false by default) - HTML or String to use as the content for TipTip. Will overwrite content from any HTML attribute.
(via http://code.drewwilson.com/entry/tiptip-jquery-plugin)
This tooltip widget included in the jQuery UI library supports different automatic positions and HTML in the title attribute: http://api.jqueryui.com/tooltip/

Categories

Resources