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.
Related
I'm using docusaurus for our dev docs.
How to disable TOC?
Thanks.
Docosaurus has Markdown Frontmatter metadata fields for .md files where you will eventually make use of the hide_table_of_contents field and set it to true.
Your .md should look like:
---
hide_table_of_contents: true
---
# Markdown Features
My Document Markdown content
There does not seem to be a way to make the hide_table_of_contents setting default to true; you need to add it to the Front Matter for every document if you want to completely disable the ToC display.
Another approach to completely disable the ToC display would be to edit the css, adding:
.theme-doc-toc-desktop {
display: none;
}
I have a contenteditable div and using keyboard shortcuts like ctrl+i the user is able to format the text. And as they type the innerHTML changes reflecting the tags i.e:
Hello <i>thanks for <br><br>for showing up<b> y'all b</b></i>
This is fine, and works well for my purposes. but the issue arises that when I go to print the html in a different div IF a user adds any other html tags, they could really mess up the application.
For instance, if they added a <script> tag or style etc.. How do I make it that the user is only allowed to add <i>, <br>, <b>, <s>, and without being able to add anything else?
Any ideas? Thank you
I think that you can use a regExpresion to avoid the "indeseables" tags. Some like
<textarea #data [(ngModel)]="value" (input)="replace(data)"></textarea>
<div [innerHtml]="valueParse">
</div>
replace(control:any)
{
this.valueParse=control.value.replace(/<(?!br|i|u)((\w+))>/gm,"<$1>")
.replace(/<\/(?!br|i|u)((\w+))>/gm,'<\/$1>');
}
See stackblitz
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]"
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('');
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/