0

プレゼンテーション ビルダーを構築し、params から JavaScript オブジェクト $("#data-store") にデータを書き込もうとしています。すべてがスムーズに進みますが、問題は @content に現れます。1 つのスライドの html が含まれています。parent.$("#data-store").data("content[<%=n%>]", "<%= @content[n.to_s].html_safe %>" ); を使用しようとすると コンソールで Uncaught SyntaxError: 予期しない識別子が表示されます。

  var fillUpData = function() {
       if ( $.isEmptyObject(parent.$("#data-store").data())) {
         console.log("empty")
         parent.$("#data-store").data("wallpaper", "<%= @wallpaper %>" );
         parent.$("#data-store").data("imageNum", "<%= @imageNum %>" );
          <% @num_slides.times do |n| %> 
         parent.$("#data-store").data("background[<%=n%>]", "<%= @background[n.to_s] %>" );
         parent.$("#data-store").data("content[<%=n%>]", "<%= @content[n.to_s].html_safe %>" );
          <% end %>
         // parent.$("#data-store").data("data", [<%= @datastore.html_safe %>]);
          } else {
        console.log("notempty");
        }
      }

@content のデータ構造に問題があるのではないかと思います。@content の params は次のようになります。

"content"=>{"0"=>"<img id=\"link2\" style=\"position: absolute\" src=\"http://i.imgur.com/X0XCFys.png \"><div class=\"editor\" contenteditable=\"true\" style=\"position: absolute; left: 743px; top: 312px;\"><h2 class=\"text2\">Title</h2></div><div class=\"ui-wrapper ui-draggable\" style=\"overflow: hidden; position: absolute; width: 128px; height: 128px; top: 225.1111125946045px; left: 508.1111145019531px; margin: 0px;\"><img id=\"link1\" style=\"position: static; margin: 0px; resize: none; zoom: 1; display: block; height: 128px; width: 128px;\" src=\"http://i.imgur.com/qTXDZhT.png \" class=\"ui-resizable\"><div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\"></div><img class=\"icon-layer-up icon-on-img\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down icon-on-img\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash1 icon-on-img\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><img class=\"icon-copy-el icon-on-img\" src=\"/assets/icon_copy.png\" style=\"z-index: 2;\"><img class=\"icon-layer-up icon-on-img\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down icon-on-img\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash1 icon-on-img\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><img class=\"icon-copy-el icon-on-img\" src=\"/assets/icon_copy.png\" style=\"z-index: 2;\"></div>\r\n                    \r\n         \r\n    \r\n        ", "1"=>"\r\n                    \r\n         \r\n    \r\n        ", "2"=>"\r\n                    \r\n         \r\n    \r\n        ", "3"=>"\r\n                    \r\n         \r\n    \r\n        ", "4"=>"\r\n                    \r\n         \r\n    \r\n        ", "5"=>"\r\n                    \r\n         \r\n    \r\n        ", "6"=>"\r\n                    \r\n         \r\n    \r\n        ", "7"=>"\r\n                    \r\n         \r\n    \r\n        "},

コンソールでこの関数を検査すると、次のような結果が得られます。 

 var fillUpData = function() {
   if ( $.isEmptyObject(parent.$("#data-store").data())) {
     console.log("empty")
     parent.$("#data-store").data("wallpaper", "http://i.imgur.com/cRrY9Fk.png" );
     parent.$("#data-store").data("text", "" );
     parent.$("#data-store").data("imageNum", "1" );
     parent.$("#data-store").data("background[0]", "url(http://i.imgur.com/nYkdOne.png)" );
     parent.$("#data-store").data("content[0]", "<div class="editor ui-resizable ui-draggable" contenteditable="true" style="position: absolute; left: 298.1111602783203px; top: 193.09722900390625px;"><h2 class="text2">Titsadasdle</h2><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><img class="icon-layer-up2 icon-on-edit" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down2 icon-on-edit" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash2 icon-on-edit" src="/assets/icon_trash.png" style="z-index: 2;"><i class="icon-move icon-on-edit" style="z-index: 2;"></i><i class="icon-font font2 icon-on-edit" style="z-index: 2;"></i><img class="icon-font-size icon-on-edit" src="/assets/font_size2.png" style="z-index: 2;"></div><div class="ui-wrapper ui-draggable" style="overflow: hidden; position: absolute; width: 128px; height: 128px; top: 285.1111125946045px; left: 52.111114501953125px; margin: 0px;"><img id="link1" style="position: static; margin: 0px; resize: none; zoom: 1; display: block; height: 128px; width: 128px;" src="http://i.imgur.com/qTXDZhT.png " class="ui-resizable"><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"><img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"><img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"><img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"></div>



    " );
     parent.$("#data-store").data("background[1]", "url(http://i.imgur.com/zXJv24z.png)" );
     parent.$("#data-store").data("content[1]", "



    " );
     parent.$("#data-store").data("background[2]", "" );
     parent.$("#data-store").data("content[2]", "



    " );
     parent.$("#data-store").data("background[3]", "" );
     parent.$("#data-store").data("content[3]", "



    " );
     parent.$("#data-store").data("background[4]", "" );
     parent.$("#data-store").data("content[4]", "



    " );
     parent.$("#data-store").data("background[5]", "" );
     parent.$("#data-store").data("content[5]", "



    " );
     parent.$("#data-store").data("background[6]", "" );
     parent.$("#data-store").data("content[6]", "



    " );
     parent.$("#data-store").data("background[7]", "" );
     parent.$("#data-store").data("content[7]", "



    " );
      } else {
    console.log("notempty");
    }
  }

各コンテンツのパラメーターを JavaScript オブジェクトの data() に書き込めるようにするにはどうすればよいですか?

4

1 に答える 1

3

生成された HTML に問題があります:

parent.$("#data-store").data("content[0]", "<div class="editor ui-resizable ui-draggable" contenteditable="true" style="position: absolute; left: 298.1111602783203px; top: 193.09722900390625px;"><h2 class="text2">Titsadasdle</h2><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><img class="icon-layer-up2 icon-on-edit" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down2 icon-on-edit" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash2 icon-on-edit" src="/assets/icon_trash.png" style="z-index: 2;"><i class="icon-move icon-on-edit" style="z-index: 2;"></i><i class="icon-font font2 icon-on-edit" style="z-index: 2;"></i><img class="icon-font-size icon-on-edit" src="/assets/font_size2.png" style="z-index: 2;"></div><div class="ui-wrapper ui-draggable" style="overflow: hidden; position: absolute; width: 128px; height: 128px; top: 285.1111125946045px; left: 52.111114501953125px; margin: 0px;"><img id="link1" style="position: static; margin: 0px; resize: none; zoom: 1; display: block; height: 128px; width: 128px;" src="http://i.imgur.com/qTXDZhT.png " class="ui-resizable"><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"><img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"><img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"><img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"></div>")
//                                                     ^ etc.

作品にスパナを投げるエスケープされていない引用があります。ここでは電話をかける.html_safeだけでは不十分です。"に置き換えるには、少しのコードで HTML を実行する必要があります\"。幸いなことに、これは簡単な作業です。

tmp = @content[n.to_s].html_safe
begin
  # regex matches a double-quote not preceded by a backslash
  tmp[/(?<!\\)"/] = '\\"' while true
rescue
  # the regex failed; all quotes are now escaped (or no quotes in the first place)
end
# now echo tmp

parent.$("#data-store").data("content[0]", "<div class=\"editor ui-resizable ui-draggable\" contenteditable=\"true\" style=\"position: absolute; left: 298.1111602783203px; top: 193.09722900390625px;\"><h2 class=\"text2\">Titsadasdle</h2><div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\"></div><img class=\"icon-layer-up2 icon-on-edit\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down2 icon-on-edit\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash2 icon-on-edit\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><i class=\"icon-move icon-on-edit\" style=\"z-index: 2;\"></i><i class=\"icon-font font2 icon-on-edit\" style=\"z-index: 2;\"></i><img class=\"icon-font-size icon-on-edit\" src=\"/assets/font_size2.png\" style=\"z-index: 2;\"></div><div class=\"ui-wrapper ui-draggable\" style=\"overflow: hidden; position: absolute; width: 128px; height: 128px; top: 285.1111125946045px; left: 52.111114501953125px; margin: 0px;\"><img id=\"link1\" style=\"position: static; margin: 0px; resize: none; zoom: 1; display: block; height: 128px; width: 128px;\" src=\"http://i.imgur.com/qTXDZhT.png \" class=\"ui-resizable\"><div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\"></div><img class=\"icon-layer-up icon-on-img\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down icon-on-img\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash1 icon-on-img\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><img class=\"icon-copy-el icon-on-img\" src=\"/assets/icon_copy.png\" style=\"z-index: 2;\"><img class=\"icon-layer-up icon-on-img\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down icon-on-img\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash1 icon-on-img\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><img class=\"icon-copy-el icon-on-img\" src=\"/assets/icon_copy.png\" style=\"z-index: 2;\"></div>")

同様の戦略を使用して、JavaScript が文句を言う可能性のある他のすべてを回避できます。

于 2013-10-30T01:35:10.497 に答える