I am looking into using a HTML WYSIWYG editor such as CKEditor but I am curious about what is to stop a user from submitting some HTML code that will change the layout of the page when I try to output their HTML.
Here is an example of two posts:
<p><b>This is my post</b></p>
<p>It has some nice HTML that does not break stuff</p>
and
</div>
<div style="height:10000px; width:10000px;">
<p>muhahaha</p>
</div>
As you can see, the first post is nice and simple, I can display that and it wont look crazy. But the second post could alter my page layout completely (have not tested but you get the idea.
<html>
<head>...</head>
<body>
<div class='content'>
<div class='post'>
<p><b>This is my post</b></p>
<p>It has some nice HTML that does not break stuff</p>
</div>
<div class='post'>
</div>
<div style="height:10000px; width:10000px;">
<p>muhahaha</p>
</div>
</div>
</div>
</body>
</html>
I know I can use htmlentities but this would then display the first post without the bold and I do not want that.
The stackoverflow website must have something like this built in, and I am wondering if there is a simple way to stop users being able to submit layout-changing HTML via a WYSIWYG editor?
CKEditor has a feature called Advanced Content Filter that in its default, automatic mode filters incoming HTML content by transforming and deleting disallowed elements, attributes, classes and styles. CKEditor will only allow content that was defined as allowed by enabled editor features (buttons, plugins).
It is highly configurable, too, so it lets you fully control what your users can and cannot submit to your website.
Have a look at the following resources to figure it out:
Content Filtering
Advanced Content Filter
Allowed Content Rules
Advanced Content Filter – Automatic Mode sample
Advanced Content Filter – Custom Mode sample
Related
I have a tinyMCE editor that allows HTML.
Sometimes a user pastes a table from a website or some other content that is not copied in its entirety, resulting in broken html.
I display this content on a page which breaks sometimes due to this. Example image:
What is the best way to fix this? Is there a way to isolate this html somehow so the content of this element does not affect the rest of the page? Or is there a function to automatically close all tags?
I just simply display the content like this:
<div class="editwindow">
<h4 class="mt-0 m-b-30 header-title bigheader">'.$gettopcatcontent['title'].'</h4>
<div class="content_tekst">'.$gettopcatcontent['content'].'</div>
'.$versiondate.'
</div>
You can possibly use DOMDocument::loadHTML. It will produce warnings for malformed HTML.
Set libxml_use_internal_errors to true and then use libxml_get_errors to handle the warnings.
Just use the W3C Markup Validator Service
I am trying to replicate a web page(https://climate-science.com/contact/) using CSS, HTML and JS. I'm quite new to those 3 languages and I am having trouble trying to replicate the FAQ section. I'm having difficulty trying to make the animation, any help?
So far I have this in the HTML file(for 1 question):
<div class="faq-container">
<div class="element-tab-title">
<h4>When do we get more content?</h4>
<p>We put quality over quantity. That said, we have over 50 people working on content. More courses will be coming out over 2020 and new projects will be announced too! Thank you for being patient – we hope it will be worth it.</p>
</div>
</div>
The "faq-container" class contains the style for the grey box and the "element-tab-title" only contains the padding for the text inside. This is the result I have so far: Photo of FAQ section
Any help on how to achieve the animation will be very appreciated.
Usually some simple Javascript would be used to toggle hide/show the 'body' content.
Your 'body' content is currently in your <p> tag, would normally be set to hidden with CSS by default, usually withdisplay:none.
Then with Javascript, you would set an event listener to 'watch' for hover or click action from a user, when you would then change the CSS on the 'content' to be visible again with a different display type - usually display:block.
Here's a starter link on Javascript event listeners: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
As user Geat suggested, you should have a look at Accordions in frontend frameworks. I would suggest looking at Bootstrap framework Accordions (such as https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example) where you can see some of the code and have a look at how it works.
Also, try to learn how to use your browser's developer tools/inspector to view the code as it's being rendered. This is especially helpful when you're trying to see how a live bit of code works as in your case.
If you want a really quick route, HTML5 supports accordions with no JS whatsoever. They're not animated, but they are easy to style and semantically easy to understand (so they're good for accessibility out of the box).
<details>
<summary>Section 1</summary>
<h3>This is section 1</h3>
</details>
<details>
<summary>Section 2</summary>
<h3>This is section 2</h3>
</details>
<details>
<summary>Section 3</summary>
<h3>This is section 3</h3>
</details>
I'm using the tinymce WYSIWYG Editor in my site to get user input. I want to define a Structure to be compared to user input, such as:
<div>
<h1></h1>
<h2></h2>
<article>
<div>
</div>
</article>
<h3></h3>
</div>
I need tinymce to prevent the user from typing any content that does not follow my structure. I don't know how to accomplish that, but I think there must be a way; can you explain how?
Note: using the <body> tag this way is incorrect.
Best option separate editors for the sections of the document.
TextField for H1 (title?)
TextField for H2 (subtitle)
WYSIWYG for the body copy (do not use the <body> tag)
WYSIWYG for the footer
That's the common way to force content sections, then you would combine the data in your server-side code to display it exactly how you want it: think like a CMS.
If you want to go over-the-top front-end editable, make each editable inline. That would be best-case User Experience.
What is the best way to make a HTML fallback via Angular?
I need something like this:
<span>{{angularText}} plain text</span>
The plain text would be a "backup" (perhaps generated by the server), in case the user doesn't have JavaScript enabled. Of course, if the user has JavaScript enabled, then I obviously don't want both to show.
<span ng-bind="angularText">Default text from server</span>
?
But like the others have mentioned, why use Angular to create an app if there's a slight chance some of the intended users have JS disabled?
I suggest adding this to your site as well:
<noscript>
You do not have JS enabled. Since this is an Angular based website, it won't do jack for you :-)
</noscript>
Inside index.html:
<noscript>
<h1>Your title</h1>
<div style="somestyles...">
Your content
</div>
</noscript>
If one wishes he/she can keep a skeleton of what the site supposed to have looked if js was enabled and then a request message inside to enable
javascript .
I am no javascript whiz, not a programmer at all.
I want to change the stacking order of elements that make up the Soundcloud custom player in the HTML. I know that these can be positioned using CSS, but my preference for what I am doing would be to reorder the divs that the player generates, so that I can use default document flow to efficiently layout my player.
The divs come out in this order - not sure how this is generated from the soundcloud link, but I would like to figure this out:
<div class="sc-player">
<ol class="sc-artwork-list">
</ol>
<div class="sc-info"></div>
<div class="sc-controls"></div>
<ol class="sc-trackslist"></ol>
<div class="sc-scrubber">
<div class="sc-volume-slider"></div>
<div class="sc-time-span">
<div class="sc-waveform-container"></div>
<div class="sc-buffer"></div>
<div class="sc-played"></div>
</div>
<div class="sc-time-indicators"></div>
</div>
</div>
Does the Soundcloud custom player generate the HTML divs from the javascript? Where is this in the javascript file, so I can hack it, or perhaps taret this with a function on my HTML page to change the order?
Or is the HTML somehow downloaded from Soundcloud when the embedded track is (and therefore editing the HTML stacking order is no possible?) I couldn't see where this mights happen in the javascript.
Slightly wierd question but I'm trying to learn better how this plugin works, thank you. I won't paste the javascript here, but the files are located here https://github.com/soundcloud/soundcloud-custom-player
You can see the source here: https://github.com/soundcloud/soundcloud-custom-player/blob/master/js/sc-player.js
Search for “Generate custom skinnable HTML/CSS” – this is where HTML is being generated, you could modify it, if you like.