Supplying JSON reply to tinymce template configuration initialize value

Hey guys, I've been trying to implement the template plugins in TinyMCE text editor following the documentation on their official website at TinyMCE Template Plugins Documentation. However, I'm having trouble with the JSON response when initializing it from TinyMCE like this:

Ajax Setup

$.ajaxSetup({

    type: "POST",
    url: "<?php echo base_url('admin_surat/json_get_template') ?>",
    cache: false,
});

$("#surat_template_id").change(function() {

    var value = $(this).val();
    if (value > 0) {
        $.ajax({
            data: {
                id: value
            },
            success: function(respond) {
                var obj = respond.response.text;
            }
        })
    }
});

Ajax Response

{
  "title": "Surat Undangan",
  "description": "Surat Undangan",
  "url": "http:\/\/localhost\/ci-eoffice\/upload\/template-surat\/surat_undangan.html"
}

TinyMCE Init on HTML FILE

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "template",
  menubar: "insert",
  toolbar: "template",
  templates: [obj]
});

Can anyone help me figure out how to pass the JSON response into the Template configuration during TinyMCE initialization? Thanks!

Answer №1

To ensure the proper functionality, make sure to pass a valid array to templates within your ajax success function:

var responseObj = res.data;
var templateArray = [];
templateArray.push(responseObj);

Additionally, when initializing tinymce, use the following setup:

tinymce.init({
  selector: "textarea",  // modify this as needed for your HTML
  plugins: "template",
  menubar: "insert",
  toolbar: "template",
  templates: templateArray
});

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

ScrollMagic Fading Transition

I have a block of HTML that fades in when the trigger element is activated, but also fades out when the user scrolls back past the trigger. I don't want it to fade out – I want it to stay faded in until the user hits F5 or reloads the page. $ ...

Produce an additional page while remaining on the present one

I have a PHP-based invoice system that displays all customer invoices. I am interested in adding a feature that allows users to print an invoice directly from the list page without navigating away. While I am familiar with window.print() and media="print" ...

Adjust the header as the user scrolls

Having a little issue with my header. I'm new to Bootstrap and would like to change my header when scrolling down. Everything works perfectly, but when I reload the page, the header remains in the "scrolling state". Apologies for any language mistakes ...

What is the best way to utilize useEffect in this scenario in order to promptly update the state? Alternatively, is there a

Has anyone encountered the issue of the updated state "filledBoxes" not showing up when using console.log in code until one turn later? I've been trying to figure out how to incorporate 'useEffect' but keep getting errors when trying to use ...

Building a hierarchical tree structure from a Python dictionary of parent-child relationships in a flat format

I have a list of dictionaries that represent a hierarchical structure: [{ "parent": "com.company.object.kind.type.subtype.family.Feline", "class": "com.company.object.kind.type.subtype.family.species.Cat" }, { "parent": "com.company.object.kin ...

"What is the best way to manipulate arrays in vue.js using the map function

I'm currently dealing with a Vue code that incorporates anime.js. My code has grown substantially to over 1500 lines. In order for Stack Overflow to accept my question, I have only included 5 items of my sampleText, even though it actually consists of ...

The functionality of Angular's $window.scrollTo() seems to be malfunctioning

After successfully finding a specific element on my Angular app's page, I am attempting to scroll to it. However, despite trying both $window.scrollTo() and window.scrollTo(), the scrolling action is not being executed as expected. My console does log ...

Converting JSON to a std::string in C++ retrieved from a URL

Is there a simple method to fetch JSON data from a URL link and convert it into a std::string in a C++ file? I'm looking to implement this functionality and would appreciate any guidance or advice on how to achieve this. ...

Having issues with Vue.js and the splice method not functioning properly on an array row

Having an Object array, I noticed that when I try to remove an object from the array list, only items are deleted from the end. <div class="hours" v-for="(time, index) in hour" :key="index"> So, I decided to place a cli ...

Deciphering JSON data with jQuery

After receiving the JSON from mediawiki, I need to extract specific data in a list format. Here is an example of the JSON: { "query-continue": { "allcategories": { "accontinue": "SB_Canto_09_Verses_Appearing_in_CC" } }, ...

What is the best way to incorporate a PHP variable into my Jquery image slider?

I've been experimenting with a Jquery Image slider and I'm interested in enhancing it further. My goal is to display two divs when the full-size image loads, one containing an image title and the other providing a description of the picture. How ...

Adapting the colors of various elements throughout the entire webpage

My goal is to incorporate color-switch buttons on my webpage. When these buttons are clicked, I want the existing colors to change to different shades. However, my challenge lies in the fact that these colors are used for various elements such as backgro ...

Encountering errors like "Cannot find element #app" and "TypeError: Cannot read property 'matched' of undefined" typically happens when using vue-router

Recently, I decided to dive into Vue.js as a way to revamp an existing frontend app that was originally built using Scala Play. My goal is to explore the world of component-based web design and enhance my skills in this area. Initially, everything seemed ...

Displaying Google Picker results in an error due to an invalid origin value

After utilizing the same code for a period of 2 years, we are encountering an issue where the picker no longer displays. I have consulted resources on Google Picker API Invalid origin but haven't been able to successfully set the origin value. The cod ...

Is it possible to integrate a Backbone app as a component within a separate app?

I am currently in the process of familiarizing myself with Backbone.js and front-end development, as my background is more focused on back-end development. I have a question related to composition. Imagine that I need to create a reusable component, like ...

managing nested JSON arrays in JavaScript

I have a straightforward task with handling a simple array that is divided into two parts: a group of vid_ids and a single element named page. Initially, I was iterating through the vid_id array using a for loop. However, upon adding the page element, I en ...

Using C# to generate a JSON array by extracting information from a CSV file

I am trying to generate JSON data in C# by pulling information from a CSV file. The desired JSON structure is shown below: { "car":[ { "manufacturer": "Nissan", "fuelType": "p ...

Failure occurs when attempting to utilize external .js and .css files

As I embark on creating a website using Bootstrap, I stumbled upon a registration page code that consists of three files - HTML, CSS, and .js. registration.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> ...

Electron's Express.js server waits for MongoDB to be ready before executing queries

As I work on a demo application, Express serves some React code that interacts with a MongoDB database hosted on mLab. The data is retrieved using SuperAgent calls in my main React code loaded via index.html. While everything works fine when starting the ...

Display a toast notification by making a call from the controller

I am currently utilizing MVC and I am looking to display a message as a toast based on the result of my function from the controller. However, my code seems to be functioning one step behind. Below is My View: @(Html.DevExtreme() .Button( ...