How to Insert Key-Value Pairs into CKEditor Selection Element

According to the documentation, to include a select element with distinct keys and values, you can follow this format:

{
    id: 'my-element-id',
    type: 'select',
    label: 'My element',
    items: [ 
        { value: 'Value1', text: 'Option 1' }, 
        { value: 'Value2', text: 'Option 2' }, 
        { value: 'Value3', text: 'Option 3' }, 
        { value: 'Value4', text: 'Option 4' } 
    ]
},

Instead of having both the keys and values the same, this allows for differentiation between the keys and values in the select options.

How do you add a select element with separate keys and values?

Answer №1

This is what I have come up with so far:

{
    ID: 'element-123',
    Type: 'dropdown',
    Name: 'Sample Dropdown',
    Options: [ [ 'Option1', 'Value1' ], [ 'Option2', 'Value2'  ], [ 'Option3', 'Value3'  ], [ 'Option4', 'Value4' ] ]
},

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

What is the best way to uninstall yarn from angular cli so that I can switch to using npm for installing packages?

When attempting to install packages using yarn for tooling, an error occurred stating: 'yarn' is not recognized as an internal or external command, operable program or batch file. Package installation failed with the details provided above. For f ...

Unable to retrieve the value of a selected table cell from dynamically generated HTML tables

I've gone through a plethora of Google and Stack Overflow examples To showcase my problem, I have set up a fiddle. Issue: "Upon clicking on a person's name, I want to retrieve their name from the first column." While I managed to create a click ...

Notation for JavaScript UML component diagrams

When creating connections between entities on a UML diagram, the standard notation is the ball-and-socket/lollipop method. Each pair should include the interface implemented. However, since my project is in JavaScript and doesn't have interfaces, I am ...

I am interested in incorporating pinia state management into my Vue 3 project

I'm currently working on implementing pinia state management in Vue 3, but I've encountered the following error: Module not found: Error: Can't resolve 'src/stores/cart' in 'C:\Users\Ali Haider\theme-project&b ...

What is the correct way to iterate through a list of images fetched with getStaticProps and display them within the same component?

What is the proper way to map a list of images returned using getStaticProps? I had successfully implemented this by passing a prop to the gallery component in another page. However, I now want to consolidate all the getStaticProps code within the gallery ...

Creating a Checkbox Tree with JSON Data in MVC: A Step-by-Step Guide

I am working with JSON data that includes a parent-child relationship. My goal is to create a tree structure from this data. Within the JSON return value, we are sending two objects: DomainUserViews and ModuleUserViews. However, the current output displa ...

Updating the state in a React array of objects can be achieved by checking if the specific id already exists in the array. If

In the scenario where the parent component receives an object from the child component via a callback function, I need to verify the existence of an object with a specific rowID. If it exists, the object should be updated with the passed value "val"; oth ...

Display the text field in Angular with the appearance of a password field, not an input field

I am currently working with Angular 8 for my Angular-Electron project. Within this application, I have a sensitive field labeled API-Key stored in tabular format that needs to be displayed on the user's account page. However, it must appear as a passw ...

The website is experiencing functionality issues with Ajax

On my personal website, I am trying to add a simple ajax server clock in the header section but unfortunately it is not appearing as expected. Here's the snippet of Javascript code that I am using: var httpxml; try { // Firefox, Opera 8.0+, Safari ...

Ensure that the input button for uploading is only accessible when checked and is marked as

Most of my previous questions have been about input boxes and SQL, as I am still in the learning process. Any help is greatly appreciated. My current question revolves around displaying a button to upload an image using PHP (although for this example, I w ...

Switch up the action for the middle click?

Is it possible to reconfigure the functionality of right click and middle click so that they behave as left click when activated within a webpage? If so, how can this be achieved? ...

Create dynamic HTML files using Express, EJS, and FS, and deliver them using Nginx as the server instead of relying

Imagine a scenario where we have a JSON object: [ { "id": 1, "title": "Title 1", "description": "Description 1" }, { "id": 2, "title": "Title 2", ...

Manipulating SVG image color using JavaScript

Is there a way to change the colors of an svg image using Javascript? Perhaps by loading it as an object and accessing the color/image data? I would greatly appreciate any responses or tips on this matter! ...

No results in AngularJS

I have two factory functions: Factories factory.getCurrEmployee = function() { data = {"api_token": authenticationFactory.getToken()}; url = GLOBALS.url + 'show/employee/' + $cookieStore.get('employeeid'); return requestFa ...

Instructions on incorporating a regular expression test within an array find operation

My array looks like this: const arr = [{id: "12f"},{id: "12F"},{id: "13"}] const itemToBeFound = {id: "12f"} I'm trying to locate that item using a method like RegExp(/12f/i).test(string) The reason for using the regexp is to make the search case ...

Using Javascript to open a new page and execute a script

I need to be able to launch a new window window.open(url,'_blank'); After that, I want to execute a JavaScript script like this: window.open(url,'_blank').ready("javascript code here"); However, I'm unsure how to accomplish thi ...

Is there a way to launch QTP from JavaScript without relying on ActiveXObject?

Is there a way to call QTP from JavaScript without relying on ActiveXObject? I would appreciate any guidance on how to accomplish this task. Thanks in advance, Ramya. ...

Guide on how to load just the content section upon clicking the submit button

Here is an example of my code: <html> <head> <title>Test Loading</title> </head> <body> <div id="header"> This is header </div> <div id="navigation" ...

Create custom components by wrapping npm components and exporting them as a single custom component

Encountering issues while installing 3rd party components from npm. For instance, a dropdown react module that can be used easily in my own module; however, I find myself needing to declare its style and other dependencies in multiple modules. For example ...

FusionMaps XT integration with VueJs: Troubleshooting connectorClick events issue

I am experiencing some issues with events connectorClick on my VueJS processed map. When I click on the connector line in the example below, the alert function does not seem to work as expected. Vue.use(VueFusionCharts, FusionCharts); let grphMap = new ...