3

Embedly/Jquery-Preview 非常棒。但是，我正在尝试更改预览结果的位置，但遇到了麻烦。现在，结果出现在输入字段的正下方......但我宁愿将它放在页面的单独部分中。有没有办法做到这一点？

我尝试更改选择器的位置并加载 div，但这并没有帮助。它似乎忽略了那些 div 并将其放在提交按钮的正下方。

下面是我的代码：

   <form accept-charset="UTF-8" action="private" class="new_comment" data-remote="true" id="new_comment" method="post">
   <input class="photo_comm" id="comment_comment" name="comment[comment]" placeholder="add a comment or link..." size="30" type="text" /><span type="text" id="counter">1000</span>
   <input class="btn btn-primary btn-mini" data-disable-with="Submitting..." name="commit" type="submit" value="Post" />
   </form>

   <!-- Placeholder that tells Preview where to put the loading icon-->
   <div class="loading">
        <img src='http://embedly.github.com/jquery-preview/images/loading-rectangle.gif'>
   </div>

   <!-- Placeholder that tells Preview where to put the selector-->
   <div class="selector"></div>


$('#comment_comment').preview({ key:'60f1dcdf3258476794784148a6eb65e7', // Sign up for a key: http://embed.ly/pricing
  selector : {type:'rich'},
  preview : {
    submit : function(e, data){
      e.preventDefault();
      $.ajax({
        dataType: 'script',
        url: this.form.attr('action'),
        type: 'POST',
        data: data
      });
    },
  },
  autoplay : 0,
  maxwidth : 400,
  display : {display : 'rich'}
});

更新

我可以在表单内上下移动选择器（）......但不能将它移到表单之外，或者在选择器 div 和表单末尾之间放置一个。我需要将选择器移到表单之外，这就是问题所在。任何帮助都会很棒。谢谢你。

4

2 回答 2

2

我相信您实际上必须在选择器对象上设置选择器，而不是在显示上。

尝试：

...
selector : {type:'rich', selector: '#show_me'},
...

请注意，选择器需要位于表单元素内。

于 2012-11-21T20:11:00.377 回答
1

显示选项有selector选项

来自文档

显示
为给定对象创建一个 Feed 项。
.....
选择器
    告诉创建将Feed项html添加到的位置。默认值为#feed。

使用您的样品：

HTML：

<div id="show_here"></div>
<form accept-charset="UTF-8" action="private" class="new_comment" data-remote="true" id="new_comment" method="post">
   <input class="photo_comm" id="comment_comment" name="comment[comment]" placeholder="add a comment or link..." size="30" type="text" /><span type="text" id="counter">1000</span>
   <input class="btn btn-primary btn-mini" data-disable-with="Submitting..." name="commit" type="submit" value="Post" />
   </form>

   <!-- Placeholder that tells Preview where to put the loading icon-->
   <div class="loading">
        <img src='http://embedly.github.com/jquery-preview/images/loading-rectangle.gif'>
   </div>

JS：

$('#comment_comment').preview({ key:'60f1dcdf3258476794784148a6eb65e7', // Sign up for a key: http://embed.ly/pricing
  selector : {type:'rich'},
  preview : {
    submit : function(e, data){
      e.preventDefault();
      $.ajax({
        dataType: 'script',
        url: this.form.attr('action'),
        type: 'POST',
        data: data
      });
    }
  },
  autoplay : 0,
  maxwidth : 400,
  display : {display : 'rich',selector : "#show_here"}
});
于 2012-11-21T01:59:36.750 回答