Style TextEditor element

[damcuongcak3]

Why when i can't set some style for element

class CustomEditor extends TextEditor {
    constructor(arg: any) {
      super(arg);
    }

    createElements(): void {
      super.createElements();

      // this.TEXTAREA = document.createElement("input");
      this.TEXTAREA = document.createElement("textarea");
      this.TEXTAREA.style.fontFamily =
        '"ＭＳ ゴシック", "MS Gothic", Osaka, sans-serif';
      this.TEXTAREA.style.fontSize = "12.8px";
      this.TEXTAREA.style.width = this.TEXTAREA_PARENT.style.width;
      this.TEXTAREA.style.maxWidth = "100px";
      this.textareaStyle = this.TEXTAREA.style;

      this.TEXTAREA.setAttribute("data-hot-input", "true");
      this.TEXTAREA.setAttribute(
        "class",
        `spreadsheet-editor ${payload.classes}`,
      );
      this.TEXTAREA_PARENT.innerText = "";
      this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);
    }
  };

[adrianszymanski89]

Hi @damcuongcak3

Please send a code demo where the issue is replicable. That's not enough information to determine what might be the problem.

[damcuongcak3]

Hi @adrianszymanski89. Thank for your support!
Simple I want to custom some style (fontSize, fontFamily, maxWidth,..) for texteditor element. btw how can i custom event click, input for element in vuejs project.
This is my demo
https://jsfiddle.net/cuongdv/z34v0grf/

[adrianszymanski89]

Hi @damcuongcak3

Thank you for the example. The problem is that the textarea element doesn't accept some CSS attributes. That's why it should be done as an input element. Additionally, we have an issue with declaring CSS through JS, and we have it already reported for further investigation.

For now, the workaround is to set the styling in one CSS class. Here's an example: https://jsfiddle.net/handsoncode/nhucxf9e/

[adrianszymanski89]

@damcuongcak3 for input element you can use this specific CSS property to control the line break: https://developer.mozilla.org/en-US/docs/Web/CSS/line-break

[damcuongcak3]

Hi @adrianszymanski89 Sorry to bother,

Is there any way I can display the correct number of rows in the table like when editing?
https://jsfiddle.net/cuongdv/z34v0grf/3/

[adrianszymanski89]

Hi @damcuongcak3

Do you mean the row headers? Like here? https://jsfiddle.net/handsoncode/bg2yfhzn/

[damcuongcak3]

It seems I found the solution, what I meant was autoWrapRow . Sorry for wasting your time 🙇

[adrianszymanski89]

No problem, I'm glad that you've found what you needed.