What is the best method for enabling HTML tags when using the TinyMCE paste plugin?

After spending countless hours searching for a solution, I am still puzzled by this problem.

My ultimate goal is to have two modes in my powerful TinyMCE editor:

  1. Allowing the pasting of HTML or Word/OpenOffice text with all styles and formatting attributes intact
  2. Enabling the paste plugin by default, while removing most of the HTML and maintaining simple formatting

I have achieved success in copying and pasting HTML or Word/OpenOffice text with styles preserved. Additionally, the paste plugin button is activated by default.

However, I am struggling to configure the paste plugin to allow specific HTML tags such as lists (ol, ul, li), line breaks (br), and basic formatting (b, i, u) when the paste button is clicked.

Despite my attempts to modify the paste_postprocess and paste_preprocess functions, I have not found a solution yet. The configuration of the valid_elements has also been unsuccessful.

Here are the crucial parts of my settings:

plugins : "paste,tabfocus,table,safari",
paste_auto_cleanup_on_paste : true,
paste_create_paragraphs: false,
paste_create_linebreaks : false,
paste_postprocess : function(pl, o) { },
paste_preprocess : function(pl, o) { },
paste_remove_spans:true,
paste_remove_styles:true,
paste_remove_styles_if_webkit:true,
paste_retain_style_properties:"none",
paste_strip_class_attributes:"all",
paste_text_sticky:true,
convert_urls : false,
entity_encoding : "raw",
valid_elements : "em/i,strong/b,ol,ul,li,br",
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : false,
invalid_elements : "font",
setup : function(ed) {
  ed.onInit.add(function(ed) {
    ed.pasteAsPlainText = true; // select "paste" on startup
  });
},
verify_html : false

Answer №1

To filter incoming content and retain specific tags, utilize the paste_preprocess setting in your configuration. For more information, visit: TinyMCE Paste As Plain Text

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Consolidate all data connected to the specified key from a JSON dataset

Looking at the json string presented below [{"_id":"9/17/2015","amt1":0,"amt2":13276.5},{"_id":"9/18/2015","amt1":8075,"amt2":6445.5}] The expected outcome is: [{"_id": ["9/17/2015", "9/18/2015"], "amt1": [0, 8075], "amt2": [13276.5, 6445.5]}] Is there ...

The Ajax Auto Complete function encounters an issue when attempting to assign a value to the TextBox

I have a Textbox that utilizes an Ajax Autocomplete function. The function is functioning correctly and retrieves values from the database, populating them in the TextBox as well. However, there is a button on the page that triggers a query, fetching som ...

Disregard Cloudflare's Automatic RocketLoader feature for certain JavaScript scripts

After extensive research and failed attempts, I am seeking help to disable Cloudflare Rocketloader for a specific JavaScript file on my WordPress website. Specifically, I need to exclude the Automatic Rocket Loader for a particular .js file. I attempted t ...

Unable to locate additional elements following javascript append utilizing Chrome WebDriver

I have a simple HTML code generated from a C# dotnet core ASP application. I am working on a webdriver test to count the number of input boxes inside the colorList div. Initially, the count is two which is correct, but when I click the button labeled "+", ...

What steps should I take when dealing with two dynamic variables in a mediator script within the WSO2 ESB?

I'm facing an issue with my if condition - it doesn't work properly when the value is static. However, when I make `annee2` and `annee1` static (for example =2019), it works fine. Here's the code snippet: <script language="js"&g ...

What could be causing transition to not be recognized as an element in HTML?

<template> <header> <nav class="container"> <div class="branding"> <router-link class="header" :to="{name : 'Home'}">>FireBlogs</router-link> </div& ...

Retrieving the $index value for the chosen option in Angular

Consider this scenario: <input ng-model="selectedColor" type="text"></input> This approach will not produce the desired outcome: <p ng-click="changeColor($index)">change color</p> Is there another way to access $index without u ...

Checking validation with parsley.js without triggering form submission

I have been working with the latest release of Parsley for data validation. While it is validating my data correctly, I am encountering an issue where the form does not submit after validation is complete. I have spent hours trying to troubleshoot this pro ...

Tips for integrating TypeScript with Vue.js and Single File Components

After extensive searching online, I have struggled to find a straightforward and up-to-date example of setting up Vue.js with TypeScript. The typical tutorials out there either are outdated or rely on specific configurations that don't apply universal ...

Upon submission of the form, trigger an email to be sent and simultaneously open a

I need my form to simultaneously open a window and send the form data via email when submitted. <form action="" method="post" id="form" onsubmit="paymentfunc();return false;"> Submit button: <input type="submit" value="Purchase" class="btn" id= ...

Unable to locate AngularJS controller

As my single controller started to become too large, I decided to split it into multiple controllers. However, when I try to navigate to /signup, I encounter an issue where my UserController cannot be found. The error message states: Error: [ng:areq] Argu ...

Easy Steps to Simplify Your Code for Variable Management

I currently have 6 tabs, each with their own object. Data is being received from the server and filtered based on the tab name. var a = {} // First Tab Object var b = {} // Second Tab Object var c = {} // Third Tab Object var d = {}// Fou ...

Update the position of the dragged object following the completion of an ajax request

I am currently using jQueryUI drag and drop feature to create a captcha plugin where users drag images into a container, followed by making an AJAX call. I would like to know if it is possible for the positions of the dragged images to be reset once the AJ ...

What is the best way to showcase a set of paired arrays as key-value pairs?

Currently, I am developing a client in React that is responsible for receiving streaming data that represents objects from the back end. The client's task is to parse this data and dynamically construct the object as a JavaScript data structure, typic ...

Utilizing the Power of GrapesJs in Vue3

Recently, I attempted to integrate the GrapesJS editor into my Vue.js project, but encountered some difficulties. The editor was not visible in the browser, and the designated tag for the editor appeared empty. Here is my editor configuration: <template ...

Is your Ajax response suddenly failing to work after the initial attempt?

Describing my predicament: The code snippet below is what I have been using to insert a custom-designed div into my webpage. Initially, the div is successfully added; however, it stops working after the first instance. $('#addanother').click(fu ...

Enable express to disregard specific URL modifications

I'm currently working on creating a Single Page App using Express. One of the challenges I am facing is that the Express route feature forces the view to be re-rendered every time the URL changes and a GET request is sent to the server. My code typica ...

The integration between curl_exec and Mailchimp fails to function properly when implemented with AJAX

I have successfully set up a form within my Wordpress site to send data to Mailchimp using their API. When I use a standard form that redirects to a designated page, everything works smoothly and all the data gets imported as expected. However, I am now t ...

Is there a way to switch on and off an ngrx action?

Here is a statement that triggers a load action to the store. The relevant effect will process the request and return the response items. However, my goal is to be able to control this action with a button. When I click on start, it should initiate dispa ...

Using the onclick attribute as a unique identifier for a button

I am currently facing a challenge with a form that does not have an ID Here is the code snippet in question: <button class="btn btn-primary" onclick="showModal()" type="button">Browse Data</button> Unfortunately, I don't have any contro ...