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?

Foi útil?

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"});
    });
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top