WYSIHTML5 Editor em janela modal

[aprendizhtm 3]

Bom dia!

 

Estive pesquisando sobre como adicionar um editor de texto numa janela modal, e cheguei até este ponto:

 

HTML

<div id="form_modal" class="modal container hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalBankLabel" aria-hidden="true">
	<div class="modal-body">
		<form name="relatorioADICIONAR" class="form-horizontal" action="" method="POST" enctype="multipart/form-data">
			<div class="scroller" style="height:300px" data-always-visible="1" data-rail-visible1="1">
				<div class="control-group">
					<label class="control-label">Relatório</label>
					<div class="controls">
						<textarea class="span7 textarea m-wrap" name="relatorio" rows="6"></textarea>
					</div>
				</div>
			</div>
			<div class="form-actions">
				<button type="submit" class="btn blue" name="relatorioADICIONAR" onclick="document.relatorioADICIONAR.submit()">Salvar Relatório</button>
				<button type="button" data-dismiss="modal" class="btn">Cancelar</button>
			</div>
		</form>
	</div>
</div>

Javascript:

<script type="text/javascript">
$('#form_modal').on('shown', function(){
	$('.textarea').wysihtml5();
});
</script>

Estava tentando inserir o editor direto no HTML, mas ele ficava bloqueado, não dava pra usar. Descobri então que preciso instanciá-lo via javascript para fazê-lo funcionar. Até aí tudo bem.

 

Porém, percebi um detalhe: se o usuário fechar a janela modal e abri-la de novo, sem dar "refresh" na página, o editor aparece bloqueado e com duas "toolbars". Se repetir novamente o processo, aparece com três "toolbars" e assim por diante.

 

Eu creio que entendi mais ou menos o que aconteceu: quando abri a janela modal, o editor tornou-se instanciado, mas ao fechá-la não há nenhum método para "destruí-lo" ou "resetá-lo", de modo que ao reabrir a modal o editor seja instanciado novamente. Seria esta a melhor solução?

 

Obrigado!

[aprendizhtm 3]

Substituí "on" por "one" e quase resolvi o problema:

<script type="text/javascript">
$('#form_modal').one('shown', function(){
	$('.textarea').wysihtml5();
});
</script>

Agora, não importa quantas vezes eu feche e abra a janela modal: eu sempre terei apenas um editor instanciado. Porém, o mesmo continua bloqueado a partir da segunda "chamada" da janela modal (não se consegue escrever nada nele).

 

Eu tava quase fazendo POG, pensei em forçar um "reload" da página caso o usuário clicasse em "Cancelar", mas queria evitar isso.

[William Bruno 1501]

Hum.. seria interessante se conseguíssemos identificar oq eu é esse "bloqueado".

Qual propriedade muda, ou qual elemento entra "na frente" do editor.

 

Apenas olhando o código, não vi nada que pudesse causar, ou que poderíamos mudar.

[aprendizhtm 3]

Como é que eu vou explicar...

 

Dei uma inspecionada no código e vi que acontece o seguinte: quando o editor wysihtml5 é instanciado, o textarea no qual ele é chamado fica com "display: none" e no lugar dele é criado um iframe, onde há um html cujo body possui várias propriedades, entre elas uma tal "contenteditable=true".

 

Ao fechar e abrir a modal, esse "body" dentro do iframe agora aparece sem propriedade nenhuma, apenas com marginwidth="0" marginheight="0". Ou seja: o "bloqueado" que estou falando significa que a gente clica pra escrever, mas não dá.

 

Se colocar o editor direto na janela modal, ele não funciona: ele tem que ser instanciado na execução da modal. Então, pra mim, das duas uma: ou existe uma forma de "destruir" essa instância para, ao abrirmos novamente a modal, ele seja construído novamente, ou então eu apelo pra POG e tento forçar um reload na página (péssimo).