根据其中的字符长度设置ace编辑器实例的宽度 [英] Set width of ace editor instance according to the length of characters in it

问题描述

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

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

  var editor = ace.edit（script_editor）; 
 editor.commands.on（ exec，函数（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中树重命名编辑器所使用的方法类似的方法 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>内联编辑器< 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，主题： ace / theme / solarized_light，}）//使inlineEditor.renderer.screenToTextCoordinates = function（x，y）{var pos = this.pixelToScreenCoordinates（x，y）;返回this.session.screenToDocumentPosition（Math.min（this.session.getScreenLength（）-1，Math.max（pos.row，0）），Math.max（pos.column，0））;}; inlineEditor.renderer.on（ beforeRender，updateSize）函数updateSize（e，renderer）{var text = renderer.session.getLine（0）; var chars = renderer.session。$ getStringScreenWidth（text）[0]; var width = Math.max（chars，2）* renderer.characterWidth //文字大小+ 2 * renderer。$ padding //填充+ 2 //光标的小附加值+ 0 //必要时添加边框宽度//更新容器大小renderer.container.style.width = width + px; //更新由编辑器renderer.onResize（false，0，width，renderer。$ size.height）;} updateSize（null，inlineEditor.renderer）< / script>  存储的计算大小pre> 

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.

解决方案

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>

这篇关于根据其中的字符长度设置ace编辑器实例的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！