tinyMCE编辑器无法即时更新

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:

我有一个带有tinyMCE编辑器的HTML表单，表单有一个图像上传选项，带有一个按钮，点击后将文件发送到ajax，然后将值发布到控制器并上传图像，我很好，直到这里，一切正常。我想要的是，一旦图像上传，它应该附加到编辑器上，这不会发生。我的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 :

我的HTML表单：

<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="[e-mail]" 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 :

和我的laravel控制器：

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

编辑tinyMCE调用脚本

<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

最有可能的问题是在javascript的18-23行之间

2 个解决方案

#1

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

您正在将图像元素添加到tinymce源元素而不是编辑器。尝试在ajax成功时使用它：

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);
    }
}

#2

Try to add setup block for init script.

尝试为init脚本添加设置块。

<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();
        });
    }
});