NicEdit em Oculto Div é redimensionada pequeno
-
13-12-2019 - |
Pergunta
Estou tentando usar o NicEdit editor para um textarea escondido em uma div.Quando o usuário clica em um botão, o destino textarea da div principal é revelado.A largura da área de texto é definido para 100% da div principal.O problema é que a div principal é oculto, de modo a textrea não tem largura antes da div principal é revelado.Se eu tentar anexar o NicEdit editor, ao mesmo tempo, como revelando a div principal, o editor aparece minúsculo.
<script type="text/javascript">
function add_task_editor() {
new nicEditor({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','ul','link']}).panelInstance('task_description');
};
$('#trigger_it').click(function (e) {
$('#parent_div').show();
add_task_editor();
});
</script>
<div id="parent_div" style="display: none;">
<textarea id="task_description"></textarea>
</div>
Existe uma maneira de corrigir isso para que o editor tem a largura é definida para 100% da div principal depois que ele é carregado?
Solução
É claro que, basicamente, depois que o editor é criado, inspecioná-lo de encontrá-lo ID ou uma classe que tem, e definir a sua largura $('#editorsID').width('100%');
por exemplo.
Ou, talvez, encontrar o seu pai div largura em pixels e defina-o para que.
Outras dicas
No meu caso, isso funcionou com o jquery:
new nicEditor().panelInstance('myArea');
$('.nicEdit-panelContain').parent().width('100%');
$('.nicEdit-panelContain').parent().next().width('100%');
Ou absoluto witdh:
$('.nicEdit-panelContain').parent().width('400px');
$('.nicEdit-panelContain').parent().next().width('400px');
A resposta por @Hans trabalhou comigo ...Mas eu precisava para adicionar este bem para redimensionar a div que contém o texto que está sendo editado (só o recipiente ao redor que div foi sendo redimensionada quando não utilizando a linha abaixo):
$('.nicEdit-main').width('100%');
$('.nicEdit-panelContain').parent().width('100%');
$('.nicEdit-panelContain').parent().next()
.width($('.nicEdit-panelContain').parent().width()-2);
Adicionar "-2" a "largura" se o pai do textarea tem prop "padding-left" ou "padding-right".
Isso funcionou melhor para mim:
new nicEditor().panelInstance('nic-me');
$('.nicEdit-panelContain').parent().width('100%');
$('.nicEdit-panelContain').parent().next().width('98%');
$('.nicEdit-main').width('100%');
Isso resolve o meu caso!Obrigado
$(document).ready(function(){
bkLib.onDomLoaded(function() {
new nicEditor({fullPanel : true, maxHeight:100}).panelInstance('myArea');
$('.nicEdit-panelContain').parent().width('100%');
$('.nicEdit-panelContain').parent().next().width('98%');
$('.nicEdit-main').width('100%');
});
});
para aqueles que têm o mesmo problema, eu otimizado e que ele parece completamente normal:
$(document).ready(function(){
bkLib.onDomLoaded(function() {
new nicEditor({fullPanel : true}).panelInstance('myArea');
$('.nicEdit-panelContain').parent().css({width:'100%', padding:"0"});
$('.nicEdit-panelContain').parent().next().css({width:'100%', padding:"5px"});
$('.nicEdit-main').css({width:'100%', padding:"0", minHeight:"80px"});
});
});