2013-05-23 18 views
0

Насколько я могу судить, этот код должен работать, но это не так, и я полностью в тупике. Есть предположения?jQuery: изменение содержимого iframe

JQuery

$('.article_chooser').click(function() { 
    var src = $(this).attr('value'); 
$("#doc_edits_attributes_0_body").parent("iframe html body").html($("#article"+src).html()); 
console.log($("#doc_edits_attributes_0_body").parent("iframe html body").html()); 
}); 

HTML

<textarea class="editable_areas" cols="40" id="doc_edits_attributes_0_body" name="doc[edits_attributes][0][body]" rows="20" style="display: none;"></textarea> 
<iframe class="wysihtml5-sandbox" security="restricted" allowtransparency="true" frameborder="0" width="0" height="0" marginwidth="0" marginheight="0"> 
    <html> 
     <body marginwidth="0" marginheight="0" contenteditable="true" class="editable_areas wysihtml5-editor" spellcheck="true"> 
     </body> 
    </html> 
</iframe> 

Ура!

+0

Вы сделать конечно понимаю, что установка атрибута безопасности для ограничений, будет отключить все скрипты в плавающем фрейме для браузеров, которые поддерживают этот атрибут, и любая попытка использовать javascript в iFrame, как правило, терпит неудачу? – adeneo

+0

Ах, право. Я не понимал. IFrame создается с помощью плагина. Наверное, мне нужно каким-то образом настроить его. –

ответ

2

wysihtml5 плагин имеет API, вы можете использовать getValue метод:

var value = editorInstance.getValue(); 

Или, если вы хотите для установки значения, вы можете использовать метод setValue:

editorInstance.setValue('a string'); 

Или, если вы хотите добавить содержимое HTML вы можете использовать .exec() метод:

editorInstance.composer.commands.exec("insertHTML", "<p>bar</p>"); 
+0

Так предположительно 'setValue();' будет делать наоборот, да? Существуют ли документы для API? Я не могу найти. –

+1

@emm Да, на самом деле я использовал 'console.dir' для просмотра каких свойств и методов, которые он предоставляет/поддерживает, вы можете изучить его wiki-страницу github https://github.com/xing/wysihtml5/wiki/ – undefined

+0

Это я буду думать, как только я узнаю, как обращаться к каждому экземпляру редактора. Является ли это идентификатором текстового поля, который он заменяет? Итак, в моем примере выше это будет '$ (" # doc_edits_attributes_0_body ")'? Код iframe не показывает идентификатора. –

8

Для редактирования содержимого в IFRAME необходимо вызвать body тег внутри фрейма:

<iframe class="wysihtml5-sandbox" security="restricted" allowtransparency="true" frameborder="0" width="0" height="0" marginwidth="0" marginheight="0" id="iframe"> 
    <html> 
     <body marginwidth="0" marginheight="0" contenteditable="true" class="editable_areas wysihtml5-editor" spellcheck="true"> 
     </body> 
    </html> 
</iframe> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#iframe').contents().find('body').html('New Content'); 
}); 
</script> 
+0

+1 для представления мне метода содержимого для получения элемента документа iframe http://api.jquery.com/contents/ надеюсь, я не забуду эту функцию ниши. – basarat

+0

В моем случае, который должен перевести на это: '$ (" # doc_edits_attributes_0_body "). Parent (" iframe "). Contents(). Find ('body'). Html ($ (" # article "+ src) .html()); '? Я до сих пор ничего не получаю. –

Смежные вопросы