Develop Reference

Only allow certain tags in contenteditable div

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,"&lt$1&gt")
.replace(/<\/(?!br|i|u)((\w+))>/gm,'&lt\/$1&gt');
}
See stackblitz

Adding jinja template dynamically

I have a jinja template that is the only content inside a set of div tags.
<div id="section0">
{% include 'temppage.html' %}
</div>
When I press a button, I want to replace everything between the tags with something else. I was hoping to replace it with another jinja template, "{% include 'realpage.html' %}", but first I am unsure of how to replace the entire section, instead of just replacing a single word. Second, can I even add a jinja template dynamically, or do I need replace it with a string with the contents of the file directly.

As glls said, replacing the content can be used with,
document.getElementById("section0").innerHTML = "something";
As for adding a jinja template dynamically, you need to replace the innerHTML with a multi-line string of the wanted jinja template, with is used with backticks, "`". So it would look like,
document.getElementById("section0").innerHTML = `{% include 'realpage.html' %}`;
The template is executed when the page loads (which is unavoidable as far as I'm aware), so when inspecting the html of the live page, the multi-line string will contain whatever is in the file you are including.

You could use a JS framework (such as Angular, React...) in order to achieve this...I am assuming you are trying to build a single page app?
Otherwise, you will have to rely more on Javascript in order to change the HTML under you div depending on what you click. For example, if you have button 1, 2, 3. Each rendering a different HTML template upon clicking.
Example (using jQuery):
$(document).on('click', '.some-class', function() {
document.getElementById("section0").innerHTML = "something";
});
fyi: "something" can be an html structure.

Razor: Expand image as img tag from the string used in p tag

I have a view which uses a list from the model passed to it to populate data. The model for the view is #model IList<NoteData>. The class NoteData contains 2 string variables anchor and data. Values stored in the data field can be of the following form
Detailed Flipflop diagram <img src="http://cpuville.com/images/register_2.jpg"> to use.
I don't want to directly display this value as string but instead show image expanded by the img tag but I am not able to get it working. Thank you in advance for you suggestions

For this you can use the Html.Raw() method. The method will not encode the string but instead output it as pure html.
Something like
#Html.Raw(noteData.data)
should display any image tags. Be wary though that this will output any and all html in the string as pure html, so your site may become vulnerable to script injections if you're using this method.

div doesn't recognize its child elements (javascript)

Layout of the code:
An .html file & I link to an external .js and .css in head. Various table cells onclick make a "popup" div change its position and become visible. To do this, I made the JS functions reference a global variable which I set by adding
<script>var popup = document.getElementById('popdiv');</script>
just above the end of /body.
popdiv has 3 child elements:
<div id='popdiv'>
<div class='header'>Time Slot</div>
<div class='xout' onclick='hide(event)'>X</div>
<div class='showtag'>tag1, tag2, tag3, tag4, tag5, tag6, tag7, tag8, tag9, tag10, tag11</div>
</div>
Anything I do with popup works fine, except when I try to call popup.firstChild, which screws everything up. popup.firstChild.type returns undefined, and popup.childNodes.length returns 7. I gave the nested div an id so I could grab it; [getheader].parentNode.type is also undefined.
And I replaced the .header selector in my .css file with a first-child of popdiv selector (#popdiv >:first-child) and its style was still correctly applied; all 3 children will also inherit style attributes like color:red--if I set them in the CSS file. Not so if I set them with JavaScript.
In this case there are other ways I can access the divs, but I want to know for the sake of understanding JavaScript what the heck happened--or if I misunderstand something fundamental about parent-child HTML elements. Did I do something awful that could break other things? (Having the extra script at the end of the file feels wrong, but I don't know the actual reason it doesn't work out fine.)
Thank you in advance

Try document.getElementById('popdiv').children[0] as described here - for getting first child. Also you can use popup.firstElementChild that give you the same result.
And you can use document.getElementById('popdiv').childrento get all children.

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.