getContents 관련 문의 드립니다.

[22jkim]

안녕하세요. 고생 많으십니다.

현재 si 프로젝트에서 해당 에디터를 저희 하이브리드 앱의 메일 전송/회신 메뉴에 적용하려고 합니다.

javascript, jquery 를 사용중이고요, 문의 드리고 싶은건 기존 메일의 회신 기능 시 setContents 기능을 통해 기존 메일을 full html 로 끌어 오는데요, 몇개의 태그가 적용이 되지 않고 콘솔에서 typeerror 가 나오고 있습니다. 혹시 해결 방안이 있다면 알려주셨으면 합니다.^^

[JiHong88]

안녕하세요~ 사용해 주셔서 감사합니다.
setContents 메소드로 full html 을 넣고 있는건가요?
setContents html 전체 가 아닌 컨텐츠만 삽입할 수 있습니다.
"fullPage" 옵션을 사용 중이라면 html의 body 안에 삽입됩니다.
setContents 를 통해 삽입하는 내용을 올려주실수 있나요?

[22jkim]

보안 정책때문에 전체 내용을 올려드릴순 없지만, 안쪽에 img 태그등도 있습니다. 최초에 suneditor를 create 할때 fullPage : true 로 옵션을 주고 있는 상태입니다. 혹시 다른 방법으로 fullpage 옵션을 줘야 하는지 알려주시면 감사하겠습니다.

[JiHong88]

fullPage 옵션 사용시 setContents는 body 태그 안에 innerHTML 로 내용을 넣습니다.
아래와 같이 head, body 에 따로 넣어주시면 됩니다.

const editor = suneditor.create(..)

editor.core._wd.head.innerHTML = ''
editor.core._wd.body.innerHTML = ''

[22jkim]

답변 감사드립니다. 제가 하고싶던 작업은 아래와 같은 html 소스를 편집기 안쪽에 미리 뿌려놓고 편집기 작업을 진행하고자 함이었습니다.

innerHTML사용 시점이 setContents 전인지 궁금하네요.

[JiHong88]

"fullPage" 옵션을 사용하면 iframe 안에 편집영역이 렌더링되고, iframe 의 전체 html을 편집할 수 있습니다.
"fullPage" 옵션 사용중일때 setContents 함수는 html의 body 안에 컨텐츠를 넣어줍니다.
html 전체를 편집기에 넣으려면 head 부분까지 넣어야 하니 위와 같이 설명드렸습니다.
body 안에 html 전체 태그를 넣을순 없습니다.
head 와 body 안의 내용을 각각 넣어주시면 됩니다.

const editor = suneditor.create(..)

editor.core._wd.head.innerHTML = 'head innerHTML'
editor.setContents('body innerHTML');

이렇게 head 부분은 따로 넣어주고 setContents 로 body 안의 내용을 채워주시면 될것 같네요.

코드를 보니 head 부분이 따로 없는데,
"fullPage" 옵션을 사용하는 이유가 있나요

[22jkim]

네 그래서 처음에는 fullPage 옵션을 쓰지 않고 setContents 로만 사용을 하였더니 적용이 되지 않는 태그들이 좀 있더라고요..

혹시 setContents 함수에서 지원하지 않는 태그들이 있는건지요?

[JiHong88]

어떤 태그가 적용이 안됐나요?
br|p|div|pre|blockquote|h[1-6]|ol|ul|li|hr|figure|figcaption|img|iframe|audio|video|table|thead|tbody|tr|th|td|a|b|strong|var|i|em|u|ins|s|span|strike|del|sub|sup
현재 위의 태그들 이외의 태그는 적용되지 않습니다.

[22jkim]

콘솔에서는 이런 내용이 찍히는 상태입니다. min파일이라 제가 열어볼수는 없어서요.

suneditor.min.js:1 Uncaught TypeError: Cannot read property 'style' of null
at Object.cancelPercentAttr (suneditor.min.js:1)
at Object.setSize (suneditor.min.js:1)
at Object.resetTransform (suneditor.min.js:1)
at Object.setAutoSize (suneditor.min.js:1)
at Object.applySize (suneditor.min.js:1)
at Object.checkImagesInfo (suneditor.min.js:1)
at Object._checkComponents (suneditor.min.js:1)
at u (suneditor.min.js:1)
at Object.push (suneditor.min.js:1)
at Object.setContents (suneditor.min.js:1)

[JiHong88]

setContents 로 넣은 html string 을 올려주실수 있나요.

[22jkim]

txt.txt

넵. 올려드리겠습니다. 번거롭게 해드려 죄송하네요 ㅠ

[JiHong88]

괜찮습니다^^
근데 구조가 이상하네요.
body 안에 다시 html이 들어가 있습니다.
일단 setContents 메소드에서 태그가 삭제돼서 문제되진 않습니다.
font태그또한 setContents 과정에서 삭제 됩니다.

"fullPage" 옵션은 사용할 필요가 없어 보이네요.
setContents 메소드만 사용하면 됩니다.

이미지 체크 에러는 에디터의 버그 입니다..
수정했으니 다음 버전에 적용될 예정입니다.

그리고 font 태그등 에디터에서 허용되지 않는 태그들을 추가하는 옵션 또한 다음 버전에 포함되니
버전 업데이트 후에 알려드리겠습니다.

[22jkim]

감사합니다^^ 기다리고 있겠습니다!

[22jkim]

안녕하세요. 한가지 더 여쭤보려고요.

에디터 내부의 focus in/out 기능을 써야 될 일이 있는데요, focus in 의 경우 제공하고계시는 onclick 이벤트로 대체 했습니다만 blur 기능은 아무리봐도 찾을수가 없어 혹시 사용 가능한 api가 있는지 여쭤보고 싶습니다.

[JiHong88]

onBlur 이벤트는 develop 브런치에는 추가 되어 있습니다.
버전 업데이트후에 사용할 수 있습니다.ㅠ

[22jkim]

그러면 정말정말 죄송한데 다음 업데이트 예정일이 언제인지 좀 여쭤봐도 될까요^^;;

[JiHong88]

이번주를 목표로 하고 있습니다ㅎㅎ

[JiHong88]

2.26.0 버전이 업데이트 되었습니다.
관련된 이슈가 있다면 새로운 이슈를 등록해주세요.
감사합니다.