Javascript 根据ace编辑器实例中字符的长度设置其宽度

我正在进行一个项目，在该项目中，我使用contenteditable属性创建了一个自定义富文本编辑器。在这个富文本编辑器中，我希望插入单行ace编辑器实例，其宽度将根据其中的字符数进行设置

为了将ace编辑器实例限制为单行，我处理了“Enter”键事件，该事件不允许ace实例插入新行

var editor = ace.edit(script_editor);
editor.commands.on("exec", function (e) {
editor.container.querySelector(".ace_content").style.transform = "none";
 if (e.args && e.args.charCodeAt(0) == 10) {
  e.preventDefault();
  e.stopPropagation();
  console.log("vdgscript-mode.js")
 }
}); 

现在，我面临的问题是，我希望ace实例宽度根据其中的字符数进行调整，而不是具有全宽度

为此，我将使用画布对象并计算文本的宽度。但这段代码的问题是，它在每次按键时都会给我预期的宽度，但是ace编辑器的css left属性并没有保持“0px”，这使得ace编辑器实例中的文本隐藏在左侧

设置宽度的代码如下所示：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
ctx.font = "15px sans-serif";
var width = ctx.measureText(code).width;
editor.container.style.width = (width + 3) + "px";

实际结果：

预期结果：

---

下图中的黑色是我在其中输入数组的ace实例。

您可以使用类似于cloud9中树重命名编辑器使用的方法

#内联编辑{
显示：内联块；
垂直对齐：中间对齐；
}
内联编辑器
var inlineEditor=ace.edit（“inlineEditor”{
maxLines:1，
错,，
showPrintMargin:false，
主题：“ace/主题/日光灯”，
})
//使光标移动更方便
inlineEditor.renderer.screenToTextCoordinates=函数（x，y）{
var pos=该像素扫描坐标（x，y）；
将this.session.screen返回到DocumentPosition(
Math.min（this.session.getScreenLength（）-1，Math.max（pos.row，0）），
数学最大值（位置列，0）
);
};
inlineEditor.renderer.on（“beforeRender”，updateSize）
函数updateSize（e，渲染器）{
var text=renderer.session.getLine（0）；
var chars=renderer.session.$getStringScreenWidth（文本）[0]；
var width=Math.max（字符数，2）*renderer.characterWidth//文本大小
+2*渲染器。$padding//padding
+2//光标有点多余
+0//如果需要，请添加边框宽度
//更新容器大小
renderer.container.style.width=width+“px”；
//更新编辑器存储的计算大小
onResize（false，0，width，renderer.$size.height）；
}
updateSize（null，inlineEditor.renderer）

这正是我想要的。非常感谢。