Suneditor: Classic Mode에서 툴바 위치 변경

[hajeonghun]

React에서 suneditor-react
Classic 모드로 사용하는데 툴바 위치를 에디터 입력하는 컨텐츠 부분과 떨어뜨려서 페이지 상단에 고정하고싶은데
이처럼 툴바에 대한 스타일을 지정할 수 있는 옵션이 따로 있을까요?

[JiHong88]

toolbarContainer 옵션을 사용하면 해당 element 안에 툴바가 생성 됩니다.
element 의 클래스 이름에 'sun-editor` 가 포함되어 있어야 합니다.

<div id="id" class="sun-editor"></div>

{toolbarContainer: '#id' or document.querySelector('#id')}

[hajeonghun]

toolbarContainer 옵션을 사용하면 해당 element 안에 툴바가 생성 됩니다.
element 의 클래스 이름에 'sun-editor` 가 포함되어 있어야 합니다.

<div id="id" class="sun-editor"></div>

{toolbarContainer: '#id' or document.querySelector('#id')}

정말 감사합니다. 덕분에 문제를 해결했습니다.
혹시 추가로 질문드려도 될까요?

1.툴바는 1개만 쓰고 컨텐츠는 2개이상 쓰고싶은데 방법이 있을까요? 즉, 툴바 1개로 각각의 컨텐츠에 효과를 주는방식.

[JiHong88]

1번은 현재 구조로는 불가능 합니다.
포커스 이벤트때 각각의 툴바를 숨기거나 (toolbar.[])
또는 포커스 이벤트때 toolbarContainer 를 숨기는 것도 방법일 수 있겠네요.

[hajeonghun]

1번은 현재 구조로는 불가능 합니다.
포커스 이벤트때 각각의 툴바를 숨기거나 (toolbar.[])
또는 포커스 이벤트때 toolbarContainer 를 숨기는 것도 방법일 수 있겠네요.

각각의 툴바를 숨기고 포커스중인 에디터의 툴바를 노출시키는건 성공했습니다.
근데 <SunEditor/><SunEditor/> 이렇게 2개의 썬에디터가 있을 경우 첫번째 썬에디터에서 유지되고 있는
스타일 값(툴바)의 내용을 두번째 썬에디터에 defaultStyle 속성으로 적용하고싶은데 가능한 이벤트가 있을까요?
옵션 페이지를 참고중인데 못찾아서 도움이 필요합니다~! 감사합니다.

[JiHong88]

defaultStyle 속성은 setDefaultStyle 함수로 바꿀수 있습니다.

[hajeonghun]

defaultStyle 속성은 setDefaultStyle 함수로 바꿀수 있습니다.

네 해당옵션은 알고있는데, 2개의 에디터가 있는경우 1번 에디터에 스타일 속성을 가져올 수 있는 방법이 있을까요?
1번 에디터에서 Bold, fontSize:15 로 작성중이다가 2번 에디터에도 작성을 시작할때 똑같은 스타일을 유지하고 싶어서요!

[JiHong88]

만약 마지막에 커서가 있던 라인의 스타일을 유지 하려면, 현재 라인의 노드와 스타일 정보를 다 확인한 후에 2번에디터의 초기 HTML을 세팅해주는 방법밖에는 없습니다.

let currentNode = core.getSelectionNode() // 거의 텍스트 노드가 오지만 포맷엘리먼트가 올수도 있습니다.
const tags = [core.util.createElement('br')]

while (!core.util.isFormatElement(currentNode)) {
  if (currentNode.nodeType === 1) {
    tags.push(currentNode.cloneNode(false))
  }
  currentNode = currentNode.parentElement
}
tags.push(currentNode.cloneNode(false))

const init = tags.pop();
while (tags.length > 0) {
  init.appendChild(tags.pop())
}

editor2.setContents(init.outerHTML)

테스트 해보진 않았지만, 이런식으로.. 현재 위치에서 포맷까지 노드를 복사하여 setContents 함수로 넣어 주세요.

[hajeonghun]

getSelectionNode

정말 빠른 피드백으로 도움을 주셔서 너무 감사드립니다. 덕분에 큰 도움을 얻었습니다.
마지막으로 질문드려도 될까요?(죄송합니다)

에디터에 글자의 개수, 파일의 크기와 상관없이 A4 용지의 크기에 맞게만 입력을 받고싶은데 A4용지의 height가 250mm라고 하였을 경우 char, byte, html 크기 제한이 아닌 라인수 혹은 height 제한을 걸어서 딱 A4용지 이상을 작성할 수 없도록 할 수 있는 방법이 있을까요? 텍스트와 그림을 첨부하여도 A4용지 이상으로 넘어가지 않도록...(없다면 추천하시는 방식이 있으신지..)

바쁘신데 시간내주셔서 정말 감사합니다.

[JiHong88]

도움이 됐다니 다행이네요^^
현재는 change 나 input 이벤트때마다 에디터의 높이를 확인해서 기준을 넘어가면 경고창을 띄우거나 할 수 있고..
경고창: noticeOpen('message'), noticeClose()

특히 한글은 입력이 된 후에 keyDown 이벤트가 발생해서 크기 제한 시에도 입력된 문자를 지워주는 식으로 구현했기 때문에 완전하게 구현하기는 어려울것 같습니다.

editor.onInput = (e, core) {
  const data = (e.data === null ? '' : e.data === undefined ? ' ' : e.data) || ''
  core._getCharLength(data, 'char') // 현재 글자수
  core.context.element.wysiwygFrame.offsetHeight // 에디터 높이
}

오버된 글자를 지우고 싶으면 여기 코드를 참고해주세요. https://github.com/JiHong88/SunEditor/blob/master/src/lib/core.js#L4298
에디터에서 크기제한을 벗어난 문자를 삭제하는 코드 입니다.

[hajeonghun]

도움이 됐다니 다행이네요^^
현재는 change 나 input 이벤트때마다 에디터의 높이를 확인해서 기준을 넘어가면 경고창을 띄우거나 할 수 있고..
경고창: noticeOpen('message'), noticeClose()

특히 한글은 입력이 된 후에 keyDown 이벤트가 발생해서 크기 제한 시에도 입력된 문자를 지워주는 식으로 구현했기 때문에 완전하게 구현하기는 어려울것 같습니다.

editor.onInput = (e, core) {
  const data = (e.data === null ? '' : e.data === undefined ? ' ' : e.data) || ''
  core._getCharLength(data, 'char') // 현재 글자수
  core.context.element.wysiwygFrame.offsetHeight // 에디터 높이
}

오버된 글자를 지우고 싶으면 여기 코드를 참고해주세요. https://github.com/JiHong88/SunEditor/blob/master/src/lib/core.js#L4298
에디터에서 크기제한을 벗어난 문자를 삭제하는 코드 입니다.

에디터 높이구하는 방식으로 하면 될 것 같습니다!
근데 리액트에선 onInput 이벤트에 e 이벤트 객체만 들어오고 core라는 값은 없는데
어떻게 적용할수 있는건가요?

[JiHong88]

음.. 코드를 보니까 일부러 넘기지 않는 것 같네요.
suneditor-react 는 제가 관리하지 않아서ㅠ
core 객체를 어떻게 사용할 수 있는지, https://github.com/mkhstar/suneditor-react 여기 이슈를 남겨주세요.

[hajeonghun]

음.. 코드를 보니까 일부러 넘기지 않는 것 같네요.
suneditor-react 는 제가 관리하지 않아서ㅠ
core 객체를 어떻게 사용할 수 있는지, https://github.com/mkhstar/suneditor-react 여기 이슈를 남겨주세요.

네 이슈 남겨놓았는데, 제가 node_modules 내부에서 core 객체를 넘기도록 커스텀해서 사용해도 괜찮은건가요 혹시?

[JiHong88]

음..그렇게 하면 배포할때는 적용이 안되지 않을까요.
차라리 이 패키지를 react 프로젝트에 적용하는게 좋을것 같습니다.

[hajeonghun]

음..그렇게 하면 배포할때는 적용이 안되지 않을까요.
차라리 이 패키지를 react 프로젝트에 적용하는게 좋을것 같습니다.

일단 남겨놓은 이슈에 답변이 달린 후에 core객체를 사용하지 못한다면 해당 방법도 고려해보겠습니다!

https://choyongjoon.com/patch-package/
혹은, 위 링크에 방법이 문제가 안된다면 위 내용으로 시도해보고, 라이센스등에 문제가 될 경우엔
말씀하신 것처럼 이 패키지를 적용해보겠습니다.

[JiHong88]

이런 방법이 있었군요.
간단하게 되겠네요.
원본이 MIT 라이선스이니 문제는 없을 것 같습니다.

[hajeonghun]

이런 방법이 있었군요.
간단하게 되겠네요.
원본이 MIT 라이선스이니 문제는 없을 것 같습니다.

네 우선, 커스텀하지않고 core를 쓸수있는 방법이 가장좋으니 이슈에 대한 답변을 기다려보겠습니다!
정말 감사합니다.