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.
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 want to create simple wysiwyg editor with vue on contenteditable div. I want to store editor content into json object. I want to use state/model concept. I will do something like this within editor template:
<div contenteditable>
<component v-for="item in json" :is="item.blockTypeComponent" />
</div>
and I will use simple-wysiwyg component with v-model somewhere on my edit page:
<simple-wysiwyg v-model="someVarAsJson" />
It looks like I need store editor input data to model/state before and automatically update content within contenteditable which means I need intercept input events of contenteditable. As I have understood from presentation of draft-js, prosemirror and article of medium site wysiwyg developer (here is a link __https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480 ), they use the same concept as I have described above.
There is tiptap editor on vue based on prosemirror but I didn't understand yet how it works.
Is it possible to do what I want?
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
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 have a TinyMCE widget that is limited to only <p> tags and non-block-level elements. Thus, the user is unable to insert tags like <div> or <table>. Which is the desired behavior.
However, the user can copy any content from any web page and paste it to TinyMCE. Is there a way to prevent pasting there, or better yet, limit paste to only a set of tags?
Have a look at the paste plugin shipped with TinyMCE.
I know that in Drupal, if you use TinyMCE provided in the wysywig module, you get the choice of allowing filtered html, full html, or php code inputted into the editor.