Fatal编程技术网
  • javascript/
  • Javascript tinyMCE编辑器未动态更新

Javascript tinyMCE编辑器未动态更新

javascript jquery ajax laravel-5 tinymce

Javascript tinyMCE编辑器未动态更新,javascript,jquery,ajax,laravel-5,tinymce,Javascript,Jquery,Ajax,Laravel 5,Tinymce,我有一个带有tinyMCE编辑器的HTML表单，表单中有一个图像上传选项，带有一个按钮，点击后将文件发送到ajax，然后将值发布到控制器并上传图像，我在这里很好，一切正常。我想要的是，一旦上传了图像，它就应该被附加到编辑器中，而这并没有发生。我的javascript： $('#uploadImageOnTheFly').click(function() { var photo = document.getElementById('photo'); var formData = new Form

我有一个带有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);
        }
    }
});
});
编辑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>


tinymce.init({
选择器：“文本区域”，
插件：[
“advlist autolink autosave link image list charmap打印预览hr锚定页面中断拼写检查器”，
“searchreplace wordcount visualblocks visualchars代码全屏插入日期时间媒体非中断”，
“表格上下文菜单方向性表情模板文本颜色粘贴整页文本颜色”
],
工具栏1：“新建文档全页|粗体斜体下划线删除线|左对齐中心对齐右对齐对齐对齐|样式选择格式选择字体选择字体大小选择”，
工具栏2：“剪切复制粘贴|搜索替换| bullist numlist | outdent缩进块报价|撤消重做|链接取消链接锚定图像媒体代码|插入时间预览|前景色背景色”，
工具栏3：“表格| hr removeformat |下标上标| charmap表情符号|全屏打印| ltr rtl |拼写检查器| visualchars visualblocks非破坏性模板pagebreak restoredraft”，
梅努巴：错，
工具栏项目大小：“小”，
样式和格式：[
{标题：“粗体文本”，内联：“b'}，
{标题：'Red text'，内联：'span'，样式：{color:'#ff0000'}}，
{title:'Red header'，block:'h1'，style:{color:'#ff0000'}}，
{title:'example1'，inline:'span'，classes:'example1'}，
{title:'example2'，inline:'span'，classes:'example2'}，
{title:'表格样式'}，
{title:'Table row 1'，选择器：'tr'，类：'tablerow 1'}
],
模板：[
{标题：'测试模板1'，内容：'测试1'}，
{标题：'测试模板2'，内容：'测试2'}
]
});
最可能的问题是javascript中第18-23行之间的问题

尝试为init脚本添加
setup
块

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


tinymce.init({
选择器：“文本区域”，
插件：[
“advlist autolink autosave link image list charmap打印预览hr锚定页面中断拼写检查器”，
“searchreplace wordcount visualblocks visualchars代码全屏插入日期时间媒体非中断”，
“表格上下文菜单方向性表情模板文本颜色粘贴整页文本颜色”
],
工具栏1：“新建文档全页|粗体斜体下划线删除线|左对齐中心对齐右对齐对齐对齐|样式选择格式选择字体选择字体大小选择”，
工具栏2：“剪切复制粘贴|搜索替换| bullist numlist | outdent缩进块报价|撤消重做|链接取消链接锚定图像媒体代码|插入时间预览|前景色背景色”，
工具栏3：“表格| hr removeformat |下标上标| charmap表情符号|全屏打印| ltr rtl |拼写检查器| visualchars visualblocks非破坏性模板pagebreak restoredraft”，
梅努巴：错，
工具栏项目大小：“小”，
样式和格式：[
{标题：“粗体文本”，内联：“b'}，
{标题：'Red text'，内联：'span'，样式：{color:'#ff0000'}}，
{title:'Red header'，block:'h1'，style:{color:'#ff0000'}}，
{title:'example1'，inline:'span'，classes:'example1'}，
{title:'example2'，inline:'span'，classes:'example2'}，
{title:'表格样式'}，
{title:'Table row 1'，选择器：'tr'，类：'tablerow 1'}
],
模板：[
{标题：'测试模板1'，内容：'测试1'}，
{标题：'测试模板2'，内容：'测试2'}
],
设置：功能（ed）{
教育署署长（‘更改’，职能（e）{
tinyMCE.triggerSave（）；
});
}
});

您将图像元素添加到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);
    }
}

成功：函数（数据）{
var parsed=JSON.parse（数据）；
if（parsed.status==“success”）
{
//获取编辑器主体
var editor=tinymce.get（'textbody'）；
//将图像标记创建为字符串
var html=''；
//在编辑器的插入符号位置插入图像
execCommand（'insertHTML'，false，html）；
}
}
将您的
tinymce
调用脚本（javascript）放入
textbody
here@SimhachalamGullaaddedI回滚了上次修改：无法将问题转换为工作代码。相反，你需要发布（或接受）答案。或者你可以简化你的问题，使之成为一个MCVE（重现问题所需的最少代码）。我已经接受了答案。你使用的是哪个版本的tinymce？在我的/tinymce/tinymce.min.js文件中，我有//4.3.0。所以我相信它的版本4.3.0我没有看到我的代码和小提琴有任何变化，你能指出你改变了什么吗？
setup
code
模板：[{title:'testtemplate 1'，content:'Test 1'}，{title:'testtemplate 2'，content:'Test 2'}]，setup:function（ed）{ed.on（'change'，function（e）{tinyMCE.triggerSave（）；}}让我们来看看。这很有效，非常感谢！我还可以告诉ajax将此图像放置在编辑器中光标所在的位置吗？我应该放置已编辑的代码行，而不是$（editor_body）。prepend（html）？非常感谢你，你是一个生命的救世主，你能解释一下代码中实际发生了什么吗？嗯，这或多或少已经出现在评论中了。tinymce.get（'editor_id'）；是通过id获取编辑器的tinymce方法（id与编辑器源元素的id匹配-在您的示例中为“textbody”。使用execCommand INSERHTML，您可以在实际插入符号位置或dom范围输入预定义字符串（您将覆盖所选文本）。有关详细信息，请参阅此信息页： 
<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();
        });
    }
});

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