jEditable: sending TinyMCE data back to textarea

Hey, I've got a mix of TinyMCE jQuery plugin and Jeditable on a textarea. What happens is, when the editable element is clicked it turns into a TinyMCE iframe. Now, my challenge is to get the content from the iframe back to the textarea using tinymce.triggerSave() BEFORE the form is ajaxed.

Any thoughts or ideas on this?

    function editNote(){
    $('.edit').editable('<?php echo base_url(); ?>index.php/notes/edit', {
         type      : 'textarea',
         onblur    : 'ignore',
         cancel    : 'Cancel',
         submit    : 'OK',
         indicator : "<img src='<?php echo base_url(); ?>css/images/indicator.gif'>",
         tooltip   : 'Click to edit...'

     });
 }

 $('.edit').live('click', function(){
    editNote();
    $('textarea').tinymce({
                    // Location of TinyMCE script
                    script_url : '<?php echo base_url(); ?>js/tiny_mce/tiny_mce.js',

                    // General options
                    theme : "simple"
});
});

The provided code initiates the editNote function and then executes the TinyMCE JavaScript.

I'm trying to figure out how to execute tinyMCE.triggerSave(); BEFORE the jeditable form is submitted. Essentially, looking for a pre-submission solution.

Thank you,

Billy

Answer №1

Replace the existing code with this snippet to create a new type named 'mce'.

$.fn.tinymce = function(options){
   return this.each(function(){
      tinyMCE.execCommand("mceAddControl", true, this.id);
   });
}

function initMCE(){
   tinyMCE.init({
        mode : "textarea",
        theme : "advanced",
        ... // YOUR CUSTOMIZATION
      });
}

initMCE();

$.editable.addInputType('mce', {
   element : function(settings, original) {
      var textarea = $('<textarea id="'+$(original).attr("id")+'_mce"/>');
      if (settings.rows) {
         textarea.attr('rows', settings.rows);
      } else {
         textarea.height(settings.height);
      }
      if (settings.cols) {
         textarea.attr('cols', settings.cols);
      } else {
         textarea.width(settings.width);
      }
      $(this).append(textarea);
         return(textarea);
      },
   plugin : function(settings, original) {
      tinyMCE.execCommand("mceAddControl", true, $(original).attr("id")+'_mce');
      },
   submit : function(settings, original) {
      tinyMCE.triggerSave();
      tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');
      },
   reset : function(settings, original) {
      tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');
      original.reset(this);
   }
});

Update your JEditable initialization to use the 'mce' type:

    $(".edit").editable('ajax/save.php?editnotetext', {
        type : 'mce',
        ... // etc
    });

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

Jquery Ajax Request

My goal is to create an Ajax call with the following specifications: $.ajax({ type: "GET", dataType: "json", contentType: "application/json", username: "user123", password: "admin123", url: "http://localhos ...

unveiling the comparison between the revealing module and object literal patterns in encapsulating code

When developing a new feature, my typical approach is to create a separate component for each one. For example, if I have a feature called abc, I would write the following JavaScript: var AbcComponent = (function(){} var initialize = function(){ }, ...

Search Box in Motion

I found a fascinating resource on how to create an animated search box using CSS3. The only challenge I'm facing is that I need the position to be set as 'relative'. Instead of having the search box in the center of the screen, I want it pos ...

Obtain the RadNumericTextBox value using JavaScript or jQuery in an ASP.NET environment

In my ASP.Net Web Page, I have a RadNumericTextBox within a DetailsView. I am attempting to access this element in JavaScript using jQuery. Despite successfully obtaining the RadNumericTextBox as a variable in JavaScript and verifying that it contains all ...

Issue with submitting input fields that were dynamically added using jquery

I created a table where clicking on a td converts it into an input field with both name and value. The input fields are successfully generated, but they do not get submitted along with the form. In my HTML/PHP : <tr> <f ...

Retrieve the content from a specific cell within the table in the current row using Javascript

I am working with a dynamically generated table where each row has a button. My goal is to retrieve the text from a specific cell when the button in that particular row is clicked. For example: Here is an example of my table structure: <table> ...

Discovering the magic of toggling multiple hide/show effects on click in Bootstrap 4

I have successfully implemented Hide and Show effects through the on-click event. $(document).ready(function () { // hiding clear button initially $(".clearfiltershow .clearFiltersBtn").css('visibility', 'hidden') ...

What steps are necessary to obtain a specific set of data and organize it accordingly?

I'm currently working on structuring my input data, but I'm facing some challenges in achieving the desired outcome. The input data is dynamic and will be coming from a database. Let's consider the JSX code snippet provided below. My aim is ...

"Unpredictable behavior observed with useSWR hook or potential issues with outdated closure function

Within my React functional component, I have implemented a Lesson Video Player that functions similarly to Instagram Stories. Each lesson contains videos ("clips") with interactive elements that trigger a multiple-choice quiz for the user. Below is a simpl ...

The data display in MUI-Datatable is experiencing an issue where it is unable to read properties of undefined, specifically when trying to split the data

Whenever I include data within the MuiDatatable, it triggers this error: Cannot read properties of undefined (reading 'split') Is there a solution to this problem so that the data can be properly displayed? To demonstrate the issue, I have se ...

What could be causing my input to not activate my function?

I am having issues with my input buttons not triggering my functions. Can anyone provide some insight into this problem? <div id="windowBar"> <h3>Imagine you were a superhero...</h3> <input id="WindowClose" type="button" onclick=" ...

Looking to retrieve the raw HTTP header string in Node.js using express.js?

Currently, I am utilizing Node.js and express.js for my work. The project I am currently working on requires me to access the raw strings of the HTTP headers (charset and accepted). In express.js, there is a function available that can provide the charset ...

Click the submit button on the form with JavaScript enabled to display the "Please wait" message,

When I was working on my ASP.NET MVC application, I encountered a situation where I needed to display a "Please wait" message when the submit button in a form was clicked. To ensure that all mandatory fields were filled out before submission, I added requ ...

Can you identify the issue with this particular JSON parsing function's reviver?

I am trying to parse a JSON string with a reviver function to only include specific properties. Here is my code snippet: const whitelist = ['prop1', 'prop2', 'result']; const reviver = (key, value) => { if (whitelist.i ...

Angular: Truncating text based on element width - A guide

I am working on displaying a String text and determining how many words to hide based on the screen width. Here is my current approach: app.filter('words', function () { return function (input, words) { if (isNaN(words)) re ...

Guide on implementing a personalized 'editComponent' feature in material-table

I'm currently integrating 'material-table' into my project. In the 'icon' column, I have icon names that I want to be able to change by selecting them from an external dialog. However, I am encountering issues when trying to update ...

Display table rows that are hidden in an HTML/Angular toggle function

I am relatively new to Angular and I have a task of setting up a table. The dataset that I have is as follows:- data = [{rollno: 1,name: 'abc',subject: 'maths'}, {rollno: 4,name: 'xyz',subject: 'history'}, ...

iOS is causing issues with the JavaScript function and not allowing it to

By creating an NSString that contains JavaScript, I am able to set the e-mail body. NSString * someString =@"<!DOCTYPE html>\n <html>\n <body> \n <h1>My Web Page</h1> \n <p ...

Tips for displaying just one dropdown when selecting an option in a jQuery menu

My menu is almost perfect, but I am facing one issue. When I click on .dropdown-toggle, only the closest ul should show, but in my code, all of them are shown and hidden simultaneously. What I want is that when I click on .dropdown-toggle, only the next ul ...

Sorting options tailored for arrays within arrays

Here is an array with nested arrays: var array = [ ['201', 'Tom', 'EES', 'California'], ['189', 'Charlie', 'EE', 'New Jersey'], ['245', 'Lisa', ' ...