멀티라인 편집기

멀티라인 편집기는 라인 구분자로 나누어지는 여러 줄의 텍스트를 입력할 수 있습니다. 입력되는 텍스트에 맞춰 편집기의 크기가 조정됩니다. Ctrl+Enter로 줄 나누기를 할 수 있습니다.

기본적인 줄바꿈 키는 ctrl+enter키 이지만 altEnterNewLine속성을 true로 설정하면 alt+enter키 입력시 줄바꿈을 합니다.

줄바꿈을 사용할 컬럼에 white-space css스타일을 적용해야 \n 사용 시 줄바꿈이 되어 표시됩니다.

// *.css
.multiline-editor{
  white-space: pre;
}

자동 줄바꿈 설정은 줄바꿈을 사용할 컬럼에 white-space css스타일을 pre-line로 설정해야 합니다.
영문자의 경우에는 단어를 잘라서 줄바꿈 처리할 수 없으며 공백, 띄어쓰기 단위로만 줄바꿈이 되어집니다.

// *.css
.multiline-editor{
  white-space: pre-line;
}

var columns = [
  {
      name: "CompanyName",
      fieldName: "CompanyName",
      width: "200",
      editor: {
          type: "multiline",
          altEnterNewLine:true
      },
      styleName: "multiline-editor",
      header: {
          text: "Multiline Edit",
          styleName: "orange-column multiline-editor"
      }
  },

라인 편집기 숫자 편집기