The biggest advantage of a WYSIWYG can already be seen in the name. It shows the author what their content looks like as they write it and allows them to write and style the text at the same time. This one attribute makes the life of content creators so much easier.
To achieve this miracle, the HTML that supports the process requires adding different types of attributes to each tag. This includes style tags, class tags, id tags, href tags, and tag tags... That's a considerable amount of additional information to handle!
TinyMCEWYSIWYGhas several options for getting and receiving HTML content (usually in string form). If you've configured a content browser and are expecting to retrieve the content, it's possible to remove the style or other tags and delete the content when it reaches the destination you configured.
There are a few methods to do this, one of which involves regular expressions.
Note that regular expressions can strip styling, as well as all sorts of other HTML attributes, which can break HTML output. In short, it's easy to set up but hard to refine.
There are also edge cases to consider.There may be several HTML attributes that a regular expression cannot parse and return.Alternatively, you can remove attributes, style tags, and other HTML tag content using the TinyMCE APIs, which can help avoid edge cases and remove required attributes that you want to keep.
If you want to try a regex solution and it fits your use case, this article will explain it. It covers retrieving HTML content from TinyMCE via the TinyMCE API and removing tag content attributes such as style and class.
What are regular expressions?
The regular expressions area sequence of specific characters used for specific search and replace operations. What makes regular expressions useful, especially for stripping styles or stripping content, is that they can target specific words and characters around those words. The information returned by the regular expression search (also known as regex) can be used to modify the content.
While they can search and parse text and characters, regular expressions have limitations. You can recognize a style tag, but your search scope can still capture and collect other HTML attributes. It's important to consider how they affect the actual HTML attributes that are used in production.
Get HTML from TinyMCE
The TinyMCE APIs provide the main methods for retrieving content and removing styles from content using regular expressions or other means.
Method | How does it work |
tinymce.Editor - getContent() | tinymce.activeEditor.getContent({format: 'text' }); |
tinymce.html.Escritor - getContentAreaContainer() | getContent(): String |
tinymce.dom.Selection - getContent() | getContent(arguments: object): String |
The tinymce.activeEditor.getContent is a common and reliable methodto receive content from TinyMCE.
How to remove attributes from TinyMCE HTML
TinyMCE APIs that you can use to filter and clear attributes instead of regular expressions include:
- The TinyMCE DOM Parser API method –addFilterAttribute
- The TinyMCE Dom Serializer API method:addFilterAttribute
there are those tooaddFilterNode()available method. These methods parse or serialize the DOM. The attribute filter can identify the instances of specific attributes that you want to review and remove. For example, you could run a sequence of events in your HTML content:
- Specify HTML content
- Run the DOM Parser API and add an attribute filter
- Serialize the HTML code
- Output a string and print it in one place.
However, a full demo is beyond the scope of this article. The following demo shows an example that uses a regular expression to quickly remove attributes, keeping in mind the edge cases mentioned above. The demo has a basic set of TinyMCE with some HTML content and uses a JavaScript function with a regular expression.
Configure TinyMCE
Start by getting a TinyMCE API key. navigate tothe Get Tiny page, and once you're logged in, your API key will appear at the top of your dashboard
Create a new index.html file on your developer workstation
Add the following HTML code to start the file:
<!doctype html><html> <head> <title>Remove attribute from TinyMCE content</title> </head> <body> </body></html>Paste the TinyMCE Cloud CDN script and startup script:
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/6/tinymce.min.js" referrerpolicy="origen"></script> <script> tinymce.init({selector: ' #Editor'}); </script>save changes
(Video) Cómo crear un theme para WordPress (1ª Parte)
Add extra style and features
Add a button element to the page between the TinyMCE textarea and the div and give the button an ID:
<body> <textarea id="editor"> <p style="color: blue;">Dieser Text hat ein Stilattribut.</p> </textarea> <button id='buttonRemove' class="button_style"> Atributo entfernen</button> <div id="newArea"></div> </body>It's totally optional, but you can add styling content to the HTML header to change the appearance of the button:
<style> .button_style { background: #0c132c; border: sky blue; Color: #fff; Font size: 0.75 rem; Font Weight: 600; Letter spacing: 0.1px; Height: 3.5cm; Width: 200px; } </style>save changes
How to configure the JavaScript .replace() method
At the end of the HTML file, after the closing body tag, create a script and configure a function to clean up the TinyMCE content.
This function will do the following:
Get content from TinyMCE editor
Use a regular expression to detect and remove the style tag with the JavaScript .replace() method
Add the content to a new div on the page
(Video) Comment creer un site de reservation en ligne avec WordPress - Calendly
<script> function cleanTinyMCEContent() {Start with the getContent() method:
<Script> function cleanTinyMCEContent() { content = tinymce.activeEditor.getContent()Add the .replace() function with the regular expression designed to recognize a style tag:
<script> function cleanTinyMCEContent() { content = tinymce.activeEditor.getContent() cleanContent = content.replace(/\s\w+="[^"]*"/g,'')Note: This pattern searches using a negated character class in combination with a possessive or greedy quantifier to find a match. This will still fitAll HTML attributes, including CSS selectors like classes and IDs.
You can refine the regular expression by matching the "s" character before checking the content for word characters of any length:\s[s]\w+="[^"]*"/g. Note that this method adds a single character literal to the expression pattern.
Use the document.createElement() method together with document.createTextNode() and appenChild() to add the sanitized content to the newly created div. Get the current div element by its id and then put the clean content inside the div:
<script> function cleanTinyMCEContent() { content = tinymce.activeEditor.getContent() cleanContent = content.replace(/\s\w+="[^"]*"/g,'') newSection = document.createElement("div ") newContent = document.createTextNode(cleanContent) newSection.appendChild(newContent) currentSection = document.getElementById("newArea") document.body.insertBefore(newSection, currentSection) };Alternatively, you can also render the content in the browser in the developer console.
Finally, set a variable outside of the function to wait for the click event on the button element and execute the function when the button click occurs:
<script> function cleanTinyMCEContent() { content = tinymce.activeEditor.getContent() cleanContent = content.replace(/\s\w+="[^"]*"/g,'') newSection = document.createElement("div ") newContent = document.createTextNode(cleanContent) newSection.appendChild(newContent) currentSection = document.getElementById("newArea") document.body.insertBefore(newSection, currentSection) }; var buttonPublish = document.getElementById(buttonRemove); buttonRemove. addEventListener('clic', cleanTinyMCEContent, false); </script>Save the changes and load the index.html file in your browser to test the cleanup process:
What other methods are there?
When it comes to efforts and methods aimed at removing CSS styles or other HTML attributes, regular expressions are only one solution. You can also achieve the same methods as the JavaScript .replace() method in other languages, e.g. B. the PHP function preg_replace().
Regarding PHP,HTML Purifier is a PHP libraryspecially designed to clean HTML content attributes from various sources.
Another solution is more advanced regular expressions, such as Perl's extended regular expressions. Note that while they can parse more information, they also have trouble recognizing certain attributes in HTML and can fall into the same edge cases that affect the standard regular expression.
Note that the TinyMCE DOM parser and serializer methods may provide a more reliable solution for stripping styles from HTML using TinyMCE.
If you have additional questions about TinyMCE APIs and HTML content, please contact us and we'll help you find the right solution. If youSign up for a FREE API KeyYou not only get access to premium plugins for 14 days, but also support for the development of your project for the same period.
Get your FREE TinyMCE API key for your app today!