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

Use a for loop to fill an array with values and then showcase its contents

I have been trying to figure out how to populate an array and display it immediately when targeting the route in my NodeJS project. Currently, I am able to console log a list of objects. However, I want to populate an array and show it when accessing loca ...

javascriptarraysnode.jsexpress

Tips for displaying the Material UI Menu component on the left side instead of the default right side

Recently, I created a dropdown component using Material UI's Menu component. However, the default behavior of the menu is to open towards the right side. I actually need it to open towards the left instead. I attempted to modify its styling, and whil ...

javascriptreactjsmaterial-ui

Error: The locator I used with the ID getUserById did not find any elements

Here is the code snippet from my HTML file: <h1>User list</h1> <button class="btn btn-primary" [routerLink]="'/register'">Register</button> <br> <br> <table class="table& ...

javascripthtmlangularprotractor

The utility of commander.js demonstrated in a straightforward example: utilizing a single file argument

Many developers rely on the commander npm package for command-line parsing. I am considering using it as well due to its advanced functionality, such as commands, help, and option flags. For my initial program version, I only require commander to parse ar ...

javascriptnode.jstypescriptnode-commander

The setInterval function does not function properly in IE8 when set to 0

I have a function called changeColor that updates the styling of certain elements in my HTML. In order to apply this function, I am using a timer like so: var timer = setInterval(changeColor,0); The issue I am encountering is that setting the time interv ...

javascripthtmlcssinternet-explorer-8

Pause Next.js pages temporarily during the build process

Encountering SSR-related issues with certain pages in a Next.js project, causing errors during npm run build and hindering the overall building process: pages/ foo/ bar/ [id].jsx index.jsx index.jsx ... Take for instance, the page ...

javascriptreactjsnext.jsserver-side-rendering

Angular 12: Running ng test shows code coverage error - TypeError: Unable to access 'initialize' property as undefined

I encountered an error in the code coverage console: TypeError: Cannot read properties of undefined (reading 'initialize') I am trying to call a service method from the component.ts file The code in the component.ts file looks like: this.myAuth ...

javascriptangularrxjskarma-jasmine

Calculating minutes per hour during a specific date range using JavaScript

What is the method to create an array representing minute counts per hour within a specified date range? If we have the following dates: const initial = new Date('2019-04-04 12:14'); const final = new Date('2019-04-04 16:21'); How ca ...

javascriptarraysecmascript-6

Sequelize encountered an error: getaddrinfo ENOTFOUND (even though the address is correct)

I've encountered some Sequelize errors while attempting to deploy a site I developed using Angular and Express/Sequelize. Here's the issue: Everything works perfectly on my local WAMP server, connecting to the local database without any problems ...

javascriptnode.jsexpresssequelize.js

Mysterious anomaly observed: Peculiar trajectory detected in canvas image during left

I have a fascinating HTML5 Canvas that showcases the movement of two identical objects to both the right and the left. Although the right side operates flawlessly, I've noticed that the left object leaves behind an intriguing trail with a hint of gree ...

javascriptjqueryhtmlcsshtml5-canvas

`Achieving object placement on top of another object in ThreeJS`

Being new to ThreeJS, I am seeking help with a basic question. I have loaded multiple GLTF files into my scene and I need to position one object on top of another (but the position should be adjustable later on) For instance: https://i.sstatic.net/oJq1BIi ...

javascriptthree.jsgltf

Using JavaScript to retrieve and compare element values for a total sum

Given two arrays, the goal is to determine if any two numbers in the array add up to 9. The function should return either true or false. For example: array1 [1, 2, 4, 9] has no pair that sums up to 9, so it returns false array2 [1, 2, 4, 5] does have a ...

javascriptarrays

Getting the output from AJAX when the onreadystatechange event occurs

Struggling with retrieving a value from a function and storing it in a variable? Getting an "undefined" result due to JavaScript's asynchronous nature? Unsure how to fix this using "callbacks" or "promises"? Check out the code snippet below. The goal ...

javascriptajax

The children within simplexml are not being returned as expected

I am struggling to extract child elements from the provided XML using SimpleXML. The WhateverItem is the primary element with several children such as whateverItem:Properties, whateverItem:Test, and so on. $xmlDoc = new SimpleXMLElement($xml); var_dump($x ...

phpxmlparsingsimplexml

Exploring different approaches to recreate the functionality of promise.allsettled by utilizing async.each

I previously had a code snippet containing Promise.allSettled(payoutPromises); Unfortunately, it did not function properly on our server due to its nodejs version being 10. After consulting some blogs for guidance, I came up with the following alternativ ...

javascriptnode.js

Monitoring Javascript inactivity timeouts

As I work to incorporate an inactivity timeout monitor on my page, the goal is to track whether individuals working from home are present at their desks or not. The Jquery plugin http://plugins.jquery.com/project/timeout that I am utilizing initiates a ti ...

javascriptjqueryhtmlajaxjquery-plugins

Browser tries to interpret Javascript code as a file organization system

Encountering an issue while trying to load my website. When I open index.html in my browser, I receive a problem loading page message. This response is puzzling as it does not indicate a file loading error. Here's a snippet of the response: Firefox c ...

javascriptjqueryhtmlgoogle-maps

error message: The file you are trying to access does not exist due to the

I seem to be facing an issue with my package.json file. I am trying to include a new "command" in a correctly written package. Specifically, I am looking to add a command that will load test data, so I updated the scripts section as follows: "load-test-da ...

javascriptnode.jsnpmpackage.json

Inserting an item into ng-model within a dropdown menu

I have a select box populated with data from my backend. This data is an array of objects: [Object { superkund_id="4", nod_id="12068", namn="Växjö Fagrabäck"}, Object { superkund_id="5", nod_id="9548", namn="Halmstad Bågen / Pilen"}] I am using ng-o ...

javascriptangularjs

Testing Vue Components - Simulating the return value of a plugin

I have a unique scenario where I need to mock the return value of a custom plugin without importing it directly into my test. By creating a mock function for the plugin, I can easily achieve this goal. However, I am unsure how to change the return value of ...

javascriptunit-testingvue.jsvue-test-utils