What You See Is What You Get - A versatile tool for editing both text and

As a developer, I have encountered a common need that StackOverflow addresses.

Situation

I am in the process of creating a website where users can post code examples and articles using an admin system. These posts may be created by me or registered frontend users.

Objective

The goal is to implement a WYSIWYG editor that allows users to easily submit articles. This editor should support text formatting, headings, and code examples enclosed in code tags.

Approach

I have been experimenting with extending TinyMCE to meet these requirements. While I can enable code tags, I faced challenges in getting highlighted text within the tags. However, using pre tags instead has proven effective. When pasting code snippets into the WYSIWYG editor and selecting Preformatted, the brackets are correctly encoded as < and >, which is acceptable. The content is then stored in the database and retrieved accurately.

However, when editing existing content loaded into the textarea field, TinyMCE re-encodes the brackets and removes any XML-based or script elements, treating them as invalid rather than plain text. Additionally, it lacks CDATA functionality, causing some parts to be ignored.

Unable to develop a plugin from scratch due to time and budget constraints, I seek a solution similar to what StackOverflow offers for question creation. Thank you StackOverflow!

Inquiry

Has anyone successfully addressed these challenges with TinyMCE? Can I replicate StackOverflow's functionality or access other formatting plugins suitable for inserting code snippets?

javascriptxmljquery-pluginstinymcewysiwyg

Answer №1

Are you searching for a possible solution? Perhaps Codemirror could meet your needs.

Answer №2

It seems like a necessary step to modify your tinymce initialization settings for valid_elements and valid_children, ensuring to include the relevant attributes as well.

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

The HTTP request seems to be malfunctioning

When attempting to establish a connection and retrieve data from a PHP file using an AJAX request, it's important to note that the AJAX JS is located on a different website. Here is the script being used: var quer; try { quer = new XMLHttpRequest( ...

javascriptajax

Persistent error function arises from Ajax request in Laravel

Greetings everyone. I'm currently working on my Laravel application and trying to verify the attendance for a specific date, subject, grade in my database table. If the data exists, I have implemented an if statement to display the desired results bas ...

javascriptphpjqueryajaxlaravel

Angular JS | Sending information to two separate controllers when clicked

I have a series of projects displayed in divs using ng-repeat. Each div contains a link with the project's id. My goal is to bind the project id on ng-click to update a factory. This will enable me to share the clicked project's id with another ...

javascriptangularjs

Can you display a popup on a leaflet map from beyond its boundaries?

Utilizing leaflet maps, I have implemented a functionality where clicking on the map opens a popup at a specified location and centers on that position. The code for this is as follows: var popup = L.popup(); function onMapClick(e) { popup . ...

javascriptjqueryleaflet

Maximizing the potential of AngularJS directives while maintaining a seamless connection to the controller

Is there a way to maintain the connection with the current controller when wrapping data with a directive? I am facing an issue where the directive within the wrapped template loses connection with the outside controller, making it impossible to execute f ...

javascriptangularjsangularjs-directivecontrollerdirective

Is it possible to translate the content of the page into English and French simply by clicking on the designated buttons?

As I dive into working with knockout, I am still in the learning process. Currently, I have a dropdown code where selecting English translates the entire page to English and selecting French translates it to French without any issue. I believe this functio ...

javascripthtmlknockout.jsdata-bindinginternationalization

Navigating to a new page by selecting a row in a material-ui table

Within my project, there is a file labeled route-names.js containing the following entry: export const REVIEW_FORM_URL = '/custom-forms/:customFormId'; In one of my material-ui tables with multiple rows, clicking on a row reveals the id as ...

javascriptreactjsmaterial-ui

Attempting to insert items into a storage array and subsequently outputting them using a loop

I am attempting to add "contacts" to local storage, and every time I add a new contact I want to refresh it in a jQuery list. I have successfully achieved this without using local storage. However, now I am facing a problem that I can't seem to solve. ...

javascriptjqueryhtml

Converting HTML content into a single string simplifies data manipulation and extraction

exampleHTML=" This is sample HTML code that needs to be converted into a string using JavaScript

" I am looking to transform it into a single string format like str="This is sample HTML code, that needs to be converted into a string, usin ...

javascripthtmlreactjsstring

Could anyone clarify the concept of how a function is able to be equivalent to zero?

function checkForSpecialCharacters(text) { var specialChars = [";", "!", ".", "?", ",", "-"]; for(var i = 0; i < specialChars.length; i++) { if(text.indexOf(specialChars[i]) !== -1) { return true; } } ...

javascript

What is the best way to extract and count specific values from a JSON file using JavaScript?

My JSON data looks like this: /api/v1/volumes: [ { "id": "vol1", "status": "UP", "sto": "sto1", "statusTime": 1558525963000, "resources": { "disk": 20000000 }, "used_resources": { "disk": 15000000 }, "las ...

javascriptjsonreactjslodash

Fetching data in React using AJAX

I am in the process of developing a React Component that will display data retrieved from an AJAX call. Here's my scenario - I have a Jinja Flask back end hosted on AWS API Gateway, which requires custom headers and the Authorization header to serve H ...

javascriptreactjsflaskiframejinja2

Solving the Problem of Input Values with Jquery and Javascript

I am facing a challenge in making a div vanish with the class 'backarea' while simultaneously displaying another div with the class 'successLog' on the screen. The catch here is that I want this transition to occur only when specific us ...

javascriptjqueryhtmlcssinput

Changing the designated materialUI class

Within the project, I am utilizing this theme: export const theme = createMuiTheme({ ...defaultThemeConfig, overrides: { ...defaultThemeConfig.overrides, MuiListItem: { root: { '&:nth-child(odd)': { backgro ...

javascriptcssreactjsmaterial-ui

Using the preselection feature in the MUI DataGrid can cause the grid to become disabled

I am customizing a mui datagrid to have preselected rows using the following code snippet: const movieCrewList = movieCrew.map((item) => item.id); const [selecteTabledData, setSelectedTableData] = React.useState([]); <DataGrid rows={crewData} c ...

javascriptreactjsmaterial-ui

The content is overflowing outside the boundaries of the div, yet there is no

I am currently utilizing jQuery to dynamically load the content of a text file into a div element. However, when the content exceeds the dimensions of the div, no scroll bar is displayed. Here is the HTML structure: <!DOCTYPE html> <html lang=" ...

javascriptjqueryhtmlcss

What is the best way to create a function that will return a Promise within an Express Route?

I am working with a business level database module named "db_location" that utilizes the node-fetch module to retrieve data from a remote server through REST API. **db_location.js** DB LOGIC const p_conf = require('../parse_config'); const db_ ...

javascriptnode.jsexpresspromisenode-fetch

Looking for a smart way to extract all the selected elements from a form?

I am attempting to retrieve all the checked items from this form using JavaScript. I have looked at previous solutions, but none of them fit my requirements. <form id="checkform" class="container" style="margin-top:20px;"> <input type="checkb ...

javascriptjqueryhtml

Using ES6's object destructuring to set default values for nested parameters

Utilizing es6 object destructuring for supplying default parameters to a function. function mapStateToProps({ shops: { cakeShop: {}, pieShop: {} }) { return { CakeShopName: shops.cakeShop.Name, PieShopName: shops.pieShop.Name } } An issue ari ...

javascriptreactjsparametersecmascript-6react-redux

Creating a basic bar chart using NVD3 with X and Y axes in AngularJS

I'm currently utilizing the nvd3.js plugin within my angular-js application. I have a straightforward task of creating a bar chart, where bars represent months along the x-axis and revenue values on the y-axis. My goal is to accomplish this using the ...

javascriptangularjsd3.jsangularjs-directivenvd3.js