[디컴] 더블 클릭으로 서식 있는 텍스트 대화 상자 오픈

[디컴] 더블 클릭으로 서식 있는 텍스트 대화 상자 오픈 > 지식 쉐어링

개발꿀팁 [디컴] 더블 클릭으로 서식 있는 텍스트 대화 상자 오픈

추천0 비추천 0

페이지 정보

작성자 얼룩깨모

작성일 2022-06-28 13:47 조회 477회 댓글 0건

본문

관련링크

디자이너 컴포넌트(디컴)에서 사용자가 "서식이 있는 텍스트" 설정하고 수정하기 위해서는,

일반적으로 아래와 같이 특정 셀 위에서 마우스 오른쪽을 눌러 "서식이 있는 텍스트" 메뉴를 들어가야 수정이 가능합니다.

만약 서식이 지정된 값을 수정하기 위해, 해당 셀을 더블 클릭을 하거나, F2를 눌러 수정 모드로 들어가면,

서식이 사라지고 텍스트 값으로 변경되는 것을 볼 수 있을 것입니다.

서식이 적용되어 있는 상태로 수정이 되면 좋을 텐데 말이죠..
아마도 Excel에서 제공하지 않는 기능이어서 그런 것 같습니다.

그래서 아래와 같이 "서식이 있는 텍스트" 셀을 사용자가 더블 클릭 하면,

디자이너 컴포넌트의 "서식이 있는 텍스트 대화 상자"가 무조건 나타나게 구현해 봤습니다.

코드는 아래와 같습니다.

 $(document).ready(function () {

  // SpreadJS WorkBook 생성
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));

  // 디자이너 컴포넌트를 생성하고 위에서 만든 Workbook 바인딩
  var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), '', spread);
  
  //디자이너에 있는 Workbook 가져오기
  var workbook = designer.getWorkbook();

  // 셀을 더블 클릭 했을 때, 해당 셀이 RichText 타입일 경우, 
  // 디자이너 컴포넌트의 "서식이 있는 텍스트 대화 상자" 오픈
  workbook.bind(GC.Spread.Sheets.Events.CellDoubleClick, function (type, args) {
    var sheet = args.sheet, row = args.row, col = args.col;
    var val = sheet.getValue(row, col, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.ValueType.richText);
    if (val && val.richText) {
            GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.RichText).execute.apply(designer, [designer]);
     }
 })

});

아래와 같은 결과 화면을 구현하실 수 있습니다.