将html注入表单

时间:2015-10-27 10:08:27

标签: javascript jquery html

我使用chkeditor作为网站的后台,我正在尝试向表单注入内容。

我在jquery中执行此代码:

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

  });

html:

{% block body %}
<p><a href="{{ path('app_backend_ckeditor_dynamictemplates')}}" class="btn btn-xs btn-blue"> &lt; Retour</a></p>

<h3>{{ template.title }}</h3>
<p><img src="{{ asset('backend/ckeditor/plugins/dynamictemplates/templates/images/' ~ template.id ~ '.png') }}" alt="" title="" /></p>

<form id="dynamictemplates-contents" action="{{ path('app_backend_ckeditor_dynamictemplatesgenerate', {template: template.id, locale: locale} )}}" method="get">

  {% if template.length is defined %}
    <p>Merci de préciser les contenus {{ template.type is defined ? '(type(s) : ' ~ template.type|join(', ') ~ ')' : '' }} référents qui alimenteront le gabarit : </p>
    {% for i in 0..template.length-1 %}
      <div class="form-group">
        <label class="control-label col-lg-2" for="">Document {{ (i+1) }} :</label>
        <div class="col-lg-10">
          <input type="hidden" name="content_ids[{{ i }}]" data-remote="{{ path('app_backend_document_autocomplete', { types: template.type is defined ? template.type|join(',') : '' } ) }}" class="chzn-select" />
        </div>
      </div>
    {% endfor %}
  {% endif %}

   <input type="hidden" name="html" value="" />
</form>

{% endblock %}

问题是html代码以

的形式显示

enter image description here

当我查看我得到的源代码时:

enter image description here

但我不知道哪些是错的,有什么想法吗?

2 个答案:

答案 0 :(得分:2)

您正在使用纯文本而不是HTML。尝试将其转换为:

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

答案 1 :(得分:0)

使用targetHtml.html(数据)代替targetHtml.val(数据)将解决您的问题!