Question posted in
You can find the official documentation here.

Dynamically loading content into TinyMce through jQuery Ajax

I’m trying to load content from records in my database, the database does indeed return the correct values; the problem is populating TinyMce with said values.

The HTML:

        <textarea cols="20" class="tiny modal-body-content">
        </textarea>

The Ajax (jQuery)

        $.ajax({
            type: "POST",
            url: '/WebServices/masterData.asmx/ShowBio',
            data: t,
            cache: false,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            error: OnError,
            timeout: 15000
        });

        function OnSuccess(data, status) {
            if (data.d != "false") {
                tinymce.init({
                    selector: "tiny",
                    setup: function (editor) {
                        editor.on('init', function () {
                            editor.setContent(data.d);
                        })
                    }
                })
            }

I also tried populating the HTML into the ID TinyMce generates using:

$(".mce-edit-area").html(data.d);

Although this does put the HTML into the TinyMce editor, it’s not editable, and quite clearly a massive bodge.

Does anybody know what I’m doing wrong here?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This worked:

            function OnSuccess(data, status) {
            if (data.d != "false") {
                $(".tiny").html(data.d);
                tinyMCE.activeEditor.setContent(data.d);
            }
        };

  2. 0

    this will add the content (tag/element/text or whatever .. ) exactly in the current mouse position :

    tinymce.activeEditor.execCommand(
 'mceInsertContent',
  false, 
  '<span style="text-decoration : underline">an Appended Content !</span>');

    while this will inject directly the content on the TinyMce editor (wiping of the previous content)

     tinymce.activeEditor.setContent("<p>I will replace the original content</p>", {
                            format: 'raw'
                        });

    Here is a quick example with AJax :

    $.ajax({
                url: '/Documents/ajaxGetDocumentById/2',
                type: 'GET',
                dataType: 'json',
                async: true,
                success: function (document) {
                    $("#form-edit").attr(
                        'action',
                        '/Documents/EditExistingDocument/2'
                    );
                    $("#input-document-title").val(document.title);
                    tinymce.activeEditor.setContent(document.CustomHtmlContent, {
                        format: 'raw'
                    });
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log('Erreur de requéte Ajax ....');
                }
            });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search