リッチエディターのDOMを取得したいです
(function(){'use strict';kintone.events.on('app.record.edit.show',function(event){varspace=document.createElement('button');space.innerText='リッチエディターDOM取得';space.onclick=function(){varrecord=kintone.app.record.get().record;console.log(record.リッチエディター.value);varediter=document.getElementById('control-label-gaia label-5527416'[0]);console.log(editer.src);};kintone.app.record.getSpaceElement('space').appendChild(space);returnevent;});})();
こちらのコードでスクリーンショット貼り付けした際のimgを取得したいのですが、
console.log(editer.src)のところでエラーを吐いてしまいます。
DOMに関しての知識がなにもなく調べながらやっているのですがわかりません。
お助けをよろしくお願いいたします。
ishikawayuito 様
こんにちは。
ざっくりですが、
varediter =document.getElementById('control-label-gaia label-5527416'[0]); // null ※取得できていない
この原因は、まず指定している ‘control-label-gaia label-5527416’[0] の要素が ID ではなく Class のためです。
また、class の場合、document.getElementsByClassName を利用することになるのですが、上記の要素の指定では要素が取得できません。
正しくクラスを認識しているとしても、その指定の方法に問題があります。
その原因は’[0]’の部分が邪魔になっているからです。
varediter = document.getElementsByClassName('control-label-gaia label-5527416'[0]); // HTMLCollection [] ※取得できていない
varediter = document.getElementsByClassName('control-label-gaia label-5527416')[0]; // HTMLCollection (1) ※存在すれば取得できた
となりますが、次の editer.src が結局取得できていません。
この editer はラベルの部分になりますので、そもそも取得をされたい img タグではないため src が存在しないからです。
そうすると、どうやって取得するかになりますが簡潔にお伝えします。
目的の img タグを含む要素を getElementsByClassName 等で取得、その後取得した要素から getElementsByTagName 等で対象の img タグを取得するという方法になるかと思います。
ご確認を宜しくお願い致します。
新屋 育男様
ご返信ありがとうございます！
スクリーンショットが存在したらなど判定についてまだできていませんが、Elementsをみながら試行錯誤してこちらでimgを取得することができました！！ありがとうございます！！
もうひとつ質問なのですが取得したimgはbase64形式になっていると思うのですが取得時にpngのファイル形式にしてrestapiで別アプリの添付ファイルに登録する というのは可能でしょうか。
いろいろ試しているのですがどうしてもダウンロードしてしまって、javascript内でpngに変換してデータ保持、restapiで登録をしたいです。
よろしくお願いいたします。
var editer = document.getElementsByClassName('editor-cybozu cybozu-editor-seamless editable');
var canvas = editer[0].childNodes[0].childNodes[0].currentSrc;
ishikawayuito 様
こんにちは。
現状、リッチエディターでは base64 でエンコードされた画像は保持できず。
また、JSで無理やり入れ込んだとしても保存時に消去されます。
ですので、取得した img が base64形式 には通常はなっていないかと思われます。
現状の方法ですと、私の力では難しいかと思われます。
ご質問の内容ですが、お力になれず大変申し訳ございません。