cheditor 상에서 폰트변경시 HTML태그 깨짐문의

cyk...@gmail.com

unread,

Jul 1, 2021, 2:58:46 AM7/1/21

to chsoft

안녕하세요.

그룹 검색해보니 같은 증상이 있는 분들이 있는데 아직 답변글이 없어 재문의 남깁니다.

다른분 들과 마찬가지로 cheditor 최신버전(5.1.9.3) 사용 중입니다.

에디터로 글 작성 후 폰트를 변경하면 HTML 태그 중 폰트관련 태그들이 모두 깨지는 버그가 있습니다.

"굴림", "돋움"과 같은 폰트명 글자가 붙어있는 경우에는 이상이 없으나,

"맑은 고딕", "Comic Sans MS", "Courier New"과 같이 폰트명에 띄어쓰기가 포함된 폰트(한글폰트, 영문폰트 동일)들에서 발생하는 버그 같습니다.

해당증상에 대한 개선버전 부탁드립니다.

아래는 폰트변경(맑음 고딕)시 HTML태그가 깨지는 샘플 코드입니다.

확인부탁드립니다.

-------------------------------------------

-----------------------------

chsoft

unread,

Jul 4, 2021, 3:52:45 PM7/4/21

to chsoft

안녕하세요.

해당 문제는 에디터가 textarea 내용을 가져올 때, 브라우저가 textarea의 내용에 포함되어 있는 "를 따옴표(")로 자동 변환시키기 때문에 발생합니다.

아래 함수를 교체해 주십시오.

파일: cheditor.js

함수: openDoc

openDoc 함수를 아래 코드를 교체해 주십시오.

var html = '<html>' +

'<head><title>' + this.config.docTitle + '</title>' +

'<style></style></head><body>';

doc.open();

if (this.toType(contents) === 'string') {

contents = this.trimSpace(contents);

contents = contents.replace(/<([a-zA-Z]+)\s+([^>]+)>/g, function (all, tagName, attrs) {

var rdata = [];

attrs = attrs.replace(/font-family:([^;>]+)/ig,

function (match, attr) {

attr.split(',').forEach(function (elem) {

elem = elem.trim().replace(/["']/g, '');

if (/\s/.test(elem)) {

elem = '"' + elem.replace(/\s+/g, ' ') + '"';

}

rdata.push(elem);

});

return 'font-family: ' + rdata.join(', ');

});

if (rdata.length > 0 && attrs[attrs.length-1] !== '"') {

attrs = attrs + '"';

}

return '<' + tagName + ' ' + attrs + '>';

});

html += contents;

}

html += '</body></html>';

doc.write(html);

doc.close();

감사합니다.

2021년 7월 1일 목요일 오후 3시 58분 46초 UTC+9에 cyk...@gmail.com님이 작성:

chsoft

unread,

Jul 6, 2021, 3:52:06 PM7/6/21

to chsoft

위 코드를 조금 더 수정 하였습니다.

openDoc : function (doc, contents) {

var html = '<html>' +

'<head><title>' + this.config.docTitle + '</title>' +

'<style></style></head><body>';

doc.open();

if (this.toType(contents) === 'string') {

contents = this.trimSpace(contents);

contents = contents.replace(/<([a-zA-Z]+)\s+([^>]+)>/g, function (all, tagName, attrs) {

var rdata = [];

attrs = attrs.replace(/font-family:([^;]+)/ig,

function (match, attr) {

attr.split(',').forEach(function (fontName) {

fontName = fontName.trim().replace(/["']/g, '');

if (/\s/.test(fontName)) {

fontName = '"' + fontName.replace(/\s+/g, ' ') + '"';

}

rdata.push(fontName);

});

return 'font-family: ' + rdata.join(', ');

});

if (rdata.length > 0 && attrs[attrs.length-1] !== '"') {

attrs = attrs + '"';

}

return '<' + tagName + ' ' + attrs + '>';

});

html += contents;

}

html += '</body></html>';

doc.write(html);

doc.close();

},

2021년 7월 5일 월요일 오전 4시 52분 45초 UTC+9에 chsoft님이 작성:

Reply all

Reply to author

Forward