隐藏 Div 中的 NicEdit 被调整小
-
13-12-2019 - |
题
我正在尝试使用 NicEdit 编辑器来隐藏在 div 中的文本区域。当用户单击按钮时,目标文本区域的父 div 就会显示。文本区域的宽度设置为父级 div 的 100%。问题是父 div 被隐藏,因此在显示父 div 之前 textrea 没有宽度。如果我尝试在显示其父 div 的同时附加 NicEdit 编辑器,则编辑器会显得很小。
<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>
有没有办法解决这个问题,以便编辑器的宽度在加载后设置为父 div 的 100%?
解决方案
当然,基本上在创建编辑器之后,检查它以查找它的 ID 或它所具有的类,并设置它的宽度 $('#editorsID').width('100%');
例如。
或者也许找到它的父 div 的宽度(以像素为单位)并将其设置为该宽度。
其他提示
在我的情况下,这与jQuery一起工作:
new nicEditor().panelInstance('myArea');
$('.nicEdit-panelContain').parent().width('100%');
$('.nicEdit-panelContain').parent().next().width('100%');
.
或绝对宽度:
$('.nicEdit-panelContain').parent().width('400px');
$('.nicEdit-panelContain').parent().next().width('400px');
. @hans的答案与我一起工作......但是我需要添加它,也可以调整包含正在编辑的文本的div的大小(仅在不使用下面的行时被调整大小的容器):
$('.nicEdit-main').width('100%');
. $('.nicEdit-panelContain').parent().width('100%');
$('.nicEdit-panelContain').parent().next()
.width($('.nicEdit-panelContain').parent().width()-2);
.
如果textarea的父级具有prop“填充左”或“填充 - 右”,则添加“-2”至“宽度”。
这对我来说最适用:
new nicEditor().panelInstance('nic-me');
$('.nicEdit-panelContain').parent().width('100%');
$('.nicEdit-panelContain').parent().next().width('98%');
$('.nicEdit-main').width('100%');
. 解决我的案子! 谢谢
$(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%');
});
});
. 对于那些有同样问题的人,我优化了它,它看起来完全正常:
$(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"});
});
});
. 不隶属于 StackOverflow