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

我的 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="contact@alibaba.com" 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>

和我的 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']);
    }
}

编辑 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>

问题很可能出在 javascript 的第 18-23 行之间

最佳答案

尝试为初始化脚本添加setup block 。

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

关于javascript - tinyMCE 编辑器没有即时更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33887980/