Set width of ace editor instance according to the length of characters in it

问题

I am working on the project where I have created a custom Rich Text Editor using contenteditable attribute. In this rich text editor I want insert single line ace editor instance of which width will be set according to the number of characters in it.

For restricting the ace editor instance to single line I have handled the "Enter" key event which does not let the ace instance to insert new line.

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")
 }
});

Now, the problem I am facing is that I want the ace instance width to adjust according to the number of character in it instead to have full width.

For that I am taking a canvas object and calculating the width of the text. But the problem with this code is, it is giving me the expected width on every key press but the css left property of the ace editor does not stay '0px' which makes the text in the ace editor instance to hide at the left side.

Code for setting the width is as follows:

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";

Actual Result:

Expected Result:

The black in the below image the ace instance in which I have entered an array.

回答1:

you can use a method similar to the one used by the tree rename editor in cloud9 https://github.com/c9/core/blob/master/plugins/node_modules/ace_tree/lib/ace_tree/edit.js

<style>
#inlineEditor {
  display: inline-block;
  vertical-align: middle;
}
</style>
<div>inline editor <span id=inlineEditor>txt</span></div>
<script src=https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js>
</script>

<script>

var inlineEditor = ace.edit("inlineEditor", {
  maxLines: 1,
  showGutter: false,
  showPrintMargin: false,
  theme: "ace/theme/solarized_light",
})


// make cursor movement nicer for
inlineEditor.renderer.screenToTextCoordinates = function(x, y) {
    var pos = this.pixelToScreenCoordinates(x, y);
    return this.session.screenToDocumentPosition(
        Math.min(this.session.getScreenLength() - 1, Math.max(pos.row, 0)),
        Math.max(pos.column, 0)
    );
};
        
inlineEditor.renderer.on("beforeRender", updateSize)
function updateSize(e, renderer) {
  var text = renderer.session.getLine(0);
  var chars = renderer.session.$getStringScreenWidth(text)[0];
   
  var width = Math.max(chars, 2) * renderer.characterWidth // text size
    + 2 * renderer.$padding // padding
    + 2 // little extra for the cursor
    + 0 // add border width if needed
   
  // update container size
  renderer.container.style.width = width + "px";
  // update computed size stored by the editor
  renderer.onResize(false, 0, width, renderer.$size.height);
}
updateSize(null, inlineEditor.renderer)
</script>

来源：https://stackoverflow.com/questions/57274039/set-width-of-ace-editor-instance-according-to-the-length-of-characters-in-it

标签

javascript

contenteditable

ace-editor