Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/400.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 那里';在tinymce中更改图像信息后获得回调的方法是什么?_Javascript_Ruby On Rails_Tinymce_Tinymce 4 - Fatal编程技术网

Javascript 那里';在tinymce中更改图像信息后获得回调的方法是什么?

Javascript 那里';在tinymce中更改图像信息后获得回调的方法是什么?,javascript,ruby-on-rails,tinymce,tinymce-4,Javascript,Ruby On Rails,Tinymce,Tinymce 4,我想在更改图像中的ALT属性后获得回调。上图显示了功能性 包含图像后,我单击图像,然后单击图像选项按钮(或插入/编辑图像) 将打开一扇窗户。更改数据后,我需要一个回调,以获取新的可选文本,然后保存到数据库中 我试过了,但没用 我的TinyMCE插件是。tinymce工作正常,我只希望使用tinymce的默认对话框在更改后通过回调获取alt attr TinyMCE设置: tinyMCE.init({ selector: "textarea.tinymce", menubar:

我想在更改图像中的ALT属性后获得回调。上图显示了功能性

  • 包含图像后,我单击图像,然后单击图像选项按钮(或插入/编辑图像)

  • 将打开一扇窗户。更改数据后,我需要一个回调,以获取新的可选文本,然后保存到数据库中

  • 我试过了,但没用

    我的TinyMCE插件是。tinymce工作正常,我只希望使用tinymce的默认对话框在更改后通过回调获取alt attr

    TinyMCE设置:

      tinyMCE.init({
        selector: "textarea.tinymce",
        menubar: false,
        paste_as_text: true,
        resize: true,
        height: 500,
        language: "pt_BR",
        style_formats: [{"title":"Título Principal","block":"h1"},{"title":"Título Secundário","block":"h2"},{"title":"Título Terciário","block":"h3"},{"title":"Título Menor","block":"h4"},{"title":"Parágrafo normal","block":"p"}],
        plugins: "link,autolink,advlist,paste,lists,textcolor,colorpicker,hr,emoticons,imagetools,wordcount",
        toolbar: ["undo redo removeformat | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent hr | link | forecolor backcolor emoticons"]
      });
    
      tinyMCE.init({
        selector: "textarea.tinymce",
        menubar: false,
        paste_as_text: true,
        resize: true,
        height: 500,
        language: "pt_BR",
        style_formats: [{"title":"Título Principal","block":"h1"},{"title":"Título Secundário","block":"h2"},{"title":"Título Terciário","block":"h3"},{"title":"Título Menor","block":"h4"},{"title":"Parágrafo normal","block":"p"}],
        plugins: "link,autolink,advlist,paste,lists,textcolor,colorpicker,hr,emoticons,imagetools,wordcount",
        toolbar: ["undo redo removeformat | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent hr | link | forecolor backcolor emoticons"],
        file_browser_callback: "UpdateImgAlt"
      });
    
    谢谢

    编辑1

    更改tinymce设置(包括
    文件\u浏览器\u回调
    )后,什么也不会发生。代码是:

    TinyMCE设置:

      tinyMCE.init({
        selector: "textarea.tinymce",
        menubar: false,
        paste_as_text: true,
        resize: true,
        height: 500,
        language: "pt_BR",
        style_formats: [{"title":"Título Principal","block":"h1"},{"title":"Título Secundário","block":"h2"},{"title":"Título Terciário","block":"h3"},{"title":"Título Menor","block":"h4"},{"title":"Parágrafo normal","block":"p"}],
        plugins: "link,autolink,advlist,paste,lists,textcolor,colorpicker,hr,emoticons,imagetools,wordcount",
        toolbar: ["undo redo removeformat | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent hr | link | forecolor backcolor emoticons"]
      });
    
      tinyMCE.init({
        selector: "textarea.tinymce",
        menubar: false,
        paste_as_text: true,
        resize: true,
        height: 500,
        language: "pt_BR",
        style_formats: [{"title":"Título Principal","block":"h1"},{"title":"Título Secundário","block":"h2"},{"title":"Título Terciário","block":"h3"},{"title":"Título Menor","block":"h4"},{"title":"Parágrafo normal","block":"p"}],
        plugins: "link,autolink,advlist,paste,lists,textcolor,colorpicker,hr,emoticons,imagetools,wordcount",
        toolbar: ["undo redo removeformat | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent hr | link | forecolor backcolor emoticons"],
        file_browser_callback: "UpdateImgAlt"
      });
    
    函数以获取回调:

    function UpdateImgAlt(callback, value, meta){
      console.log('callback: '+callback);
      console.log('value: '+value);
      console.log('meta: '+meta);
    }
    

    编辑器不提供与图像插入关联的特定事件。如果您查看
    图像
    插件的源代码,它会触发一个
    更改
    事件,以便在发生这种情况时得到通知。获取该通知的代码如下所示:

    tinymce.init({
      selector: '#myeditor',
      ...
      setup: function (editor) {
        editor.on('change', function (e) {
          console.log('change event fired');
          console.log(e);
          console.log('Content changed to:  ' + editor.getContent());
        });
      }
    });
    

    然后,您可以查看更改的内容中是否有图像,并从中执行您需要的操作。

    NodeChange是您可能要查找的事件。这是我正在使用的代码。确保在块的末尾输入一个返回值,以允许javascript继续执行——否则,您将无法执行诸如编辑图像之类的操作

    // When an image is inserted into the editor after image upload...
    editor.on('NodeChange', function (e) {
        if (e.element.tagName === "IMG") { 
            // Set an alt attribute. We will insert the value when the image was successfully uploaded and the imageId was returned from the server. We saved the alt tag that we want into the imageId hidden input field (imageId) when the server returned data. Here, we are taking that value and inserting the new alt tag.
            e.element.setAttribute("alt", $("#imageId").val());
            return; 
        }
        return;
    });
    

    尝试
    文件\u浏览器\u回调时出现了多大的错误?@rails id你好!当我使用
    文件\u浏览器\u回调
    时,什么也没发生。也许我用错了。我用代码更新了答案你有没有试着把thant回调函数作为值,而不是函数的“名称”?类似这样:
    file\u browser\u callback:function(){…
    ?我想知道答案。它可能有效,但分析我认为不是一个好主意。但是,你给了我一个好主意。当用户单击完成并提交到服务器时,我将使用Nokogiri解析html内容,我将获得所有
    img
    标记并获得
    alt
    。然后,将新的
    alt
    保存在中数据库。