Quill로 입력 한 이미지를 js로 얻는 방법
결론
다음과 같이 취득한 DELTA 형식의 데이터를 JSON으로 취급하여 화상 데이터 부분을 취득한다.
개념 코드.jsvar quill = new Quill();
var contents = quill.getContents();//エディタに入力されている全内容の取得 DELTA形式
var img = new Image();
img.src = contents["ops"]["insert"]["image"] //DELTA形式はJSONと同様に扱えばいい
Quill은?
Ctrl+V에 의한 이미지 붙여넣기에 대응한 WYSIWIG 텍스트 에디터의 인터페이스입니다.
간단한 html+js로 다음과 같은 텍스트 편집기 UI를 웹 페이지에 포함할 수 있습니다.
예를 들어 다음 HTML을 만들고 브라우저에서 열 수 있습니다. 간단! !
입력 데이터 취득 및 DELTA 형식
입력 데이터는 getContents() 에 의해 델타 형식으로 취득을 합니다.
DELTA 형식의 데이터는 JSON의 엄격한 하위 집합과 기재가 있습니다.
샘플 코드
submit 버튼을 누르면 입력된 이미지를 페이지 상단에 표시하는 샘플 페이지를 만들었습니다.
quill.html<html>
<header>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</header>
<body>
<div id="editor">
<p>Hello Quill!</p>
<div id="imageput"></div>
</div>
<form>
<input type="button" onclick="click_action();" value="submit" />
</form>
<div id="edit"></div>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
var quill = new Quill('#edit', {
theme: 'snow'
});
//=====================================================
//以下より拝借
//https://qiita.com/yasumodev/items/e1708f01ff87692185cd
// Base64形式の文字列 → <img>要素に変換
// base64img: Base64形式の文字列
// callback : 変換後のコールバック。引数は<img>要素
//=====================================================
function Base64ToImage(base64img, callback) {
var img = new Image();
img.onload = function() {
callback(img);
};
img.src = base64img;
}
function click_action(){
var content = quill.getContents();
console.log(content);
content["ops"].forEach((c) => {
console.log(c);
if('insert' in c){
if(typeof(c["insert"]) === "string"){
}
else if('image' in c['insert']){
console.log("GET IMAGE");
Base64ToImage(c["insert"]["image"], function(img) {
// <img>要素としてDOMに追加
document.getElementById('imageput').appendChild(img);
// <img>要素にすることで幅・高さがわかります
var log = "w=" + img.width + " h=" + img.height;
document.getElementById('log').value = log;
});
}
}
});
}
</script>
</body>
</html>
출처
감사! !
- [JavaScript] 이미지 변환 : 요소 ⇔ Base64 (상호 변환)
- Quill 공식 getContents
- DELTA 형식 정보
- GitHub에서 스타가 많은 WYSIWYG 에디터(2019년 11월)
Reference
이 문제에 관하여(Quill로 입력 한 이미지를 js로 얻는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/trickre/items/001cb465130cdd9a1071
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
var quill = new Quill();
var contents = quill.getContents();//エディタに入力されている全内容の取得 DELTA形式
var img = new Image();
img.src = contents["ops"]["insert"]["image"] //DELTA形式はJSONと同様に扱えばいい
Ctrl+V에 의한 이미지 붙여넣기에 대응한 WYSIWIG 텍스트 에디터의 인터페이스입니다.
간단한 html+js로 다음과 같은 텍스트 편집기 UI를 웹 페이지에 포함할 수 있습니다.
예를 들어 다음 HTML을 만들고 브라우저에서 열 수 있습니다. 간단! !
입력 데이터 취득 및 DELTA 형식
입력 데이터는 getContents() 에 의해 델타 형식으로 취득을 합니다.
DELTA 형식의 데이터는 JSON의 엄격한 하위 집합과 기재가 있습니다.
샘플 코드
submit 버튼을 누르면 입력된 이미지를 페이지 상단에 표시하는 샘플 페이지를 만들었습니다.
quill.html<html>
<header>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</header>
<body>
<div id="editor">
<p>Hello Quill!</p>
<div id="imageput"></div>
</div>
<form>
<input type="button" onclick="click_action();" value="submit" />
</form>
<div id="edit"></div>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
var quill = new Quill('#edit', {
theme: 'snow'
});
//=====================================================
//以下より拝借
//https://qiita.com/yasumodev/items/e1708f01ff87692185cd
// Base64形式の文字列 → <img>要素に変換
// base64img: Base64形式の文字列
// callback : 変換後のコールバック。引数は<img>要素
//=====================================================
function Base64ToImage(base64img, callback) {
var img = new Image();
img.onload = function() {
callback(img);
};
img.src = base64img;
}
function click_action(){
var content = quill.getContents();
console.log(content);
content["ops"].forEach((c) => {
console.log(c);
if('insert' in c){
if(typeof(c["insert"]) === "string"){
}
else if('image' in c['insert']){
console.log("GET IMAGE");
Base64ToImage(c["insert"]["image"], function(img) {
// <img>要素としてDOMに追加
document.getElementById('imageput').appendChild(img);
// <img>要素にすることで幅・高さがわかります
var log = "w=" + img.width + " h=" + img.height;
document.getElementById('log').value = log;
});
}
}
});
}
</script>
</body>
</html>
출처
감사! !
- [JavaScript] 이미지 변환 : 요소 ⇔ Base64 (상호 변환)
- Quill 공식 getContents
- DELTA 형식 정보
- GitHub에서 스타가 많은 WYSIWYG 에디터(2019년 11월)
Reference
이 문제에 관하여(Quill로 입력 한 이미지를 js로 얻는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/trickre/items/001cb465130cdd9a1071
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
submit 버튼을 누르면 입력된 이미지를 페이지 상단에 표시하는 샘플 페이지를 만들었습니다.
quill.html
<html>
<header>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</header>
<body>
<div id="editor">
<p>Hello Quill!</p>
<div id="imageput"></div>
</div>
<form>
<input type="button" onclick="click_action();" value="submit" />
</form>
<div id="edit"></div>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
var quill = new Quill('#edit', {
theme: 'snow'
});
//=====================================================
//以下より拝借
//https://qiita.com/yasumodev/items/e1708f01ff87692185cd
// Base64形式の文字列 → <img>要素に変換
// base64img: Base64形式の文字列
// callback : 変換後のコールバック。引数は<img>要素
//=====================================================
function Base64ToImage(base64img, callback) {
var img = new Image();
img.onload = function() {
callback(img);
};
img.src = base64img;
}
function click_action(){
var content = quill.getContents();
console.log(content);
content["ops"].forEach((c) => {
console.log(c);
if('insert' in c){
if(typeof(c["insert"]) === "string"){
}
else if('image' in c['insert']){
console.log("GET IMAGE");
Base64ToImage(c["insert"]["image"], function(img) {
// <img>要素としてDOMに追加
document.getElementById('imageput').appendChild(img);
// <img>要素にすることで幅・高さがわかります
var log = "w=" + img.width + " h=" + img.height;
document.getElementById('log').value = log;
});
}
}
});
}
</script>
</body>
</html>
출처
감사! !
- [JavaScript] 이미지 변환 : 요소 ⇔ Base64 (상호 변환)
- Quill 공식 getContents
- DELTA 형식 정보
- GitHub에서 스타가 많은 WYSIWYG 에디터(2019년 11월)
Reference
이 문제에 관하여(Quill로 입력 한 이미지를 js로 얻는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/trickre/items/001cb465130cdd9a1071
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Quill로 입력 한 이미지를 js로 얻는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/trickre/items/001cb465130cdd9a1071텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
