javascript - 如何将部分数据转换为 HTML

Question

我需要将一些数据注入(inject)表单(ckeditor)。问题是当我注入(inject)它时它给了我这样的东西:

如您所见，图片和标题都很好，但描述却不好。

<script type="text/javascript">

  jQuery(function($) {
    var dialog = window.parent.CKEDITOR.dialog.getCurrent();

    var form       = $('#dynamictemplates-contents');
    var targetHtml = $('input[name=html]').val('');
    var generateHtmlContent = function()
    {
      $.ajax({
        url: form.attr("action"),
        type: form.attr("method"),
        dataType : 'html',
        data: form.serialize(),
        success: function(data, status) {
            targetHtml.val(data);

            // var iframe = $(dialog._.editor.document.$.defaultView.frameElement);
            // iframe.contents().find("head").append('<scr' + 'ipt type="text/javascript" src="{{ asset('backend/js/holder.min.js') }}"></scr' + 'ipt>');

            //dialog._.editor.insertHtml(data);
            //dialog.hide();
        },
        error: function(data, status, error){
          alert('Une erreur a eu lieu lors de la récupération du contenu : "'+data+'"');
        }
      })
    }

    var elmts = form.find('input[type=hidden][name^="content_ids"]');
    if(!elmts.length)
    {
      generateHtmlContent();
    }
    else
    {

      elmts.on('change', function(){
        var submit = true;
        elmts.each(function()
        {
          if(!$(this).val())
            submit = false;
        });

        if(submit)
          generateHtmlContent();
        else
          targetHtml.val('');
      });
    }

  });
</script>

我已经尝试过

targetHtml.val($('<div />').html(data).text());

这适用于描述，但标题失去了风格并且图像消失了。

这是表单的行源:

<section class="ckedt-dragrow content recipe">
    <div class="container">
        <div class="box img">
            <div class="img-container ckedt-img-to-background" style="background-image:url('/cache/570x380/uploads/image/2015/04/A-FILETTA-PAOLO-FRESU-DANIELE-DI-BONAVENTURA.jpg')">
                &nbsp;
            </div>
        </div>

    <div class="box text">
        <div class="title">
            <span>[Genre]</span> <strong>Jérôme Paoli, garde de la réserve</strong>
        </div>
        &lt;section class="ckedt-dragrow content video"&gt; &lt;div class="container"&gt; &lt;div class="box img"&gt; &lt;div class="box-content"&gt; &lt;div class="img-container ckedt-img-to-background" style="background-image:url('http://placehold.it/570x380')"&gt;&amp;nbsp;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="box text"&gt; &lt;div class="box-content"&gt; &lt;p&gt;Ici, ce n’est pas un mais trois canaux qui parcourent nos paysages, tantôt rectilignes, tantôt onduleux, ils sont autant d’atmosphères contrastées et d’émotions à vivre.&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Le Canal du Midi&lt;/strong&gt;, fabuleuse ligne de vie entre les hommes et de commerce entre les régions. Ses 241 km sont une formidable prouesse technique, et ses paysages d’une douceur extrême.&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Le Canal de la Robine&lt;/strong&gt;, sur les traces de l’ancien lit du fleuve Aude, il traverse Narbonne et les lagunes avant de rejoindre la Méditerranée.&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Le Canal de Jonction&lt;/strong&gt;, comme son nom l’indique, connecte la Canal du Midi à la Robine. Un canal espéré pendant plus d’un siècle.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; <a href="/app_dev.php/fr/jerome-paoli-garde-de-la-reserve">+ lire</a></div>
    </div>
</section>

您知道如何修复它吗？

Answer 1

.text() 为您提供文本，以便将 html 转换为文本，如果您想预先编写跨站点脚本(也可能发生在替代源中)，则可以保存该文本

看看这个 fiddle : http://jsfiddle.net/hossain/sUTVg/