javascript - tinyMCE editor not updating on the fly

I have a HTML form with tinyMCE editor in it the form has an image upload option with a button which on click sends the file to ajax which then posts the value to the controller and uploads the image, I am good till here and everything is working. What I want is once the image has been uploaded it should be appended to the editor which is not happening. My javascript:

$('#uploadImageOnTheFly').click(function()
{
var photo = document.getElementById('photo');

var formData = new FormData();

formData.append('photo', photo.files[0], photo.value);

var editorvalue = $('#textbody').val();
$.ajax({
    type: 'POST',
    url: '/admin/uploadPhotoForTemplate',
    data: formData,
    contentType: false,
    processData: false,
    success: function (data) {
        var parsed = JSON.parse(data);
        if(parsed.status === 'success')
        {
            var body = $('#textbody');
            html = '<img src="' +parsed.url +'">';
            body.prepend(html);
        }
    }
});
});

My HTML form :

<div class="form-wrap">
    <div class="panel panel-body">
        <form method="POST" action="http://127.0.0.1/admin/infringing/email/templates/show/1" accept-charset="UTF-8"><input name="_token" type="hidden" value="vsKR2MtkUxpTI7ku97Hsknz8RurV4ioQeJLkA9NP">
        <div class="form-group">
            <label for="name">Name</label>
            <input class="form-control" name="name" type="text" value="Alibaba edited" id="name">
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input class="form-control" name="email" type="text" value="[email protected]" id="email">
        </div>

        <div class="form-group">
            <label for="subject">Subject</label>
            <input class="form-control" name="subject" type="text" value="Testing" id="subject">
        </div>

        <div class="form-group">
            <div class="input-group">
                <input type="file" id="photo">
                <span class="input-group-btn">
                    <button type="button" id="uploadImageOnTheFly" class="btn btn-info">Upload</button>
                    </span>
            </div>
        </div>

        <textarea style="min-height: 400px;" name="body" id="textbody">Data fetched from database goes here ...</textarea>
        <br/>

        <div class="form-group">
            <input type="submit" value="Save" class="btn btn-success">
            <button type="button" class="btn btn-danger">Cancel</button>
        </div>
        </form>
    </div>
</div>

and my laravel controller :

public function upload()
{
    if(Input::hasFile('photo'))
    {
        $allowedext = ["png", "jpg", "jpeg", "gif"];
        $photo = Input::file('photo');
        $destinationPath = public_path() . '/uploads/templates';
        $filename = str_random(12);
        $extension = $photo->getClientOriginalExtension();
        if(in_array($extension, $allowedext))
        {
            Input::file('photo')->move($destinationPath, $filename . '.' . $extension);
        } else
        {
            return json_encode('File format not supported');
        }

        return json_encode(['status' => 'success', 'url' => '/uploads/templates/' . $filename . '.' . $extension]);
    } else
    {
        return json_encode(['status' => 'failure']);
    }
}

EDIT tinyMCE calling script

<script type="text/javascript" src="/tinymce/tinymce.min.js"></script>

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
        "table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
    ],

    toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
    toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor",
    toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",

    menubar: false,
    toolbar_items_size: 'small',

    style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ],

    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
});</script>

Most probably the problem is between line 18-23 in javascript

$('#uploadImageOnTheFly').click(function()
{
var photo = document.getElementById('photo');

var formData = new FormData();

formData.append('photo', photo.files[0], photo.value);

var editorvalue = $('#textbody').val();
$.ajax({
    type: 'POST',
    url: '/admin/uploadPhotoForTemplate',
    data: formData,
    contentType: false,
    processData: false,
    success: function (data) {
        var parsed = JSON.parse(data);
        if(parsed.status === 'success')
        {
            var body = $('#textbody');
            html = '<img src="' +parsed.url +'">';
            body.prepend(html);
        }
    }
});
});

My HTML form :

<div class="form-wrap">
    <div class="panel panel-body">
        <form method="POST" action="http://127.0.0.1/admin/infringing/email/templates/show/1" accept-charset="UTF-8"><input name="_token" type="hidden" value="vsKR2MtkUxpTI7ku97Hsknz8RurV4ioQeJLkA9NP">
        <div class="form-group">
            <label for="name">Name</label>
            <input class="form-control" name="name" type="text" value="Alibaba edited" id="name">
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input class="form-control" name="email" type="text" value="[email protected]" id="email">
        </div>

        <div class="form-group">
            <label for="subject">Subject</label>
            <input class="form-control" name="subject" type="text" value="Testing" id="subject">
        </div>

        <div class="form-group">
            <div class="input-group">
                <input type="file" id="photo">
                <span class="input-group-btn">
                    <button type="button" id="uploadImageOnTheFly" class="btn btn-info">Upload</button>
                    </span>
            </div>
        </div>

        <textarea style="min-height: 400px;" name="body" id="textbody">Data fetched from database goes here ...</textarea>
        <br/>

        <div class="form-group">
            <input type="submit" value="Save" class="btn btn-success">
            <button type="button" class="btn btn-danger">Cancel</button>
        </div>
        </form>
    </div>
</div>

and my laravel controller :

public function upload()
{
    if(Input::hasFile('photo'))
    {
        $allowedext = ["png", "jpg", "jpeg", "gif"];
        $photo = Input::file('photo');
        $destinationPath = public_path() . '/uploads/templates';
        $filename = str_random(12);
        $extension = $photo->getClientOriginalExtension();
        if(in_array($extension, $allowedext))
        {
            Input::file('photo')->move($destinationPath, $filename . '.' . $extension);
        } else
        {
            return json_encode('File format not supported');
        }

        return json_encode(['status' => 'success', 'url' => '/uploads/templates/' . $filename . '.' . $extension]);
    } else
    {
        return json_encode(['status' => 'failure']);
    }
}

EDIT tinyMCE calling script

<script type="text/javascript" src="/tinymce/tinymce.min.js"></script>

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
        "table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
    ],

    toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
    toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor",
    toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",

    menubar: false,
    toolbar_items_size: 'small',

    style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ],

    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
});</script>

Most probably the problem is between line 18-23 in javascript

Share Improve this question edited Jul 29, 2017 at 14:03 Cœur 38.8k25 gold badges206 silver badges278 bronze badges asked Nov 24, 2015 at 7:45 Khan Shahrukh 6,4214 gold badges37 silver badges44 bronze badges

put your tinymce calling script(javascript) for textbody here – Simhachalam Gulla Commented Nov 24, 2015 at 7:49
@SimhachalamGulla added – Khan Shahrukh Commented Nov 24, 2015 at 7:53
1 I rollbacked your last modification: you can't transform a question into working code. Instead you need to post (or accept) an answer. Or what you can do is simplify your question to make it an MCVE (minimal code needed to reproduce the issue) – Cœur Commented Jul 29, 2017 at 14:04
I have already accepted an answer. – Khan Shahrukh Commented Jul 29, 2017 at 17:53

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

Try to add setup block for init script.

<script type="text/javascript">

  tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
        "table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
    ],

    toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
    toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor",
    toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",

    menubar: false,
    toolbar_items_size: 'small',

    style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ],

    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ],
    setup: function(ed) {
        ed.on('change', function(e) {
            tinyMCE.triggerSave();
        });
    }
});

You are adding the image element to the tinymce source element instead of the editor. Try to use this on ajax success:

success: function (data) {
    var parsed = JSON.parse(data);
    if(parsed.status === 'success')
    {
        // gets the editor body
        var editor = tinymce.get('textbody');

        // create the image tag as a string
        var html = '<img src="' +parsed.url +'">';

        // insert the image at the caret position of the editor
        editor.execCommand('insertHTML', false, html);
    }
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - tinyMCE editor not updating on the fly - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)