Question

Hello stackoverflow社区我的脚本需要帮助。我正在使用NicEditor，我正试图让它像文本区一样可以调整大小。但是当我创建div：resize:both时，它可以在高度上调整大小，但不能在宽度上调整大小。这是脚本：

    <div style="width: 147px; border-width: 0px 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; overflow-y: auto; overflow-x: hidden;">
<div class=" nicEdit-main" style="resize:both; width: 139px; margin: 4px; min-height: 45px; overflow: hidden;" contenteditable="true">
<br>
</div>
</div>

如何使此编辑器像文本区域一样可以调整大小？这是jsfidle：https://jsfiddle.net/JVhpJ/11/

Answer 1

我首先要创建一个名为editorcontainer的div，并将您在html中使用的值插入到NicEditor的容器中。

通过添加width:auto并添加display:inline-block并删除所有溢出值，div现在将适应子项的宽度和高度。

示例下方：

<script src="js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>

.nicEdit-main {
    resize:both;
    border:1px solid grey;
}

.editorcontainer{
	width:auto;
	border-width: 0px 1px 1px;
	border-style: none solid solid;
	border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204);
	-moz-border-top-colors: none; 
	-moz-border-right-colors: none;
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	border-image: none;
        display:inline-block;
    
}

<div class="editorcontainer">
<div class=" nicEdit-main" style="resize:both; width: 139px; margin: 4px; min-height: 45px; overflow: hidden;" contenteditable="true">
<br>
</div>
</div>

下面还可以找到你修改过的小提琴：

https://jsfiddle.net/JVhpJ/13/

Answer 2

这是一个小小的hackish，但这就是我所做的：

bkLib.onDomLoaded(function () {
    nicEditors.allTextAreas();
    $("#container").children().css("width", "100%");
    $("#container").resizable();
    $("#textarea1").prev().css("height", "70%");
});

.nicEdit-main {
    height:90%;
    width:98% !important;
}
textarea {
    width:100%;
}
#container {
    overflow:hidden;
}

Here is the JSFiddle demo

Answer 3

嗯，也许是这样的（主要的div风格：overflow：auto; resize：both）？

<div style="width: 147px; border-width: 0px 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none;  resize: both;
    overflow: auto;">
    <p>vw v wev wv vw ev</p>
</div>

如何使div可重新调整大小

3 个答案: