jquery - tinymce エディタで要素を測定

Question

tinymce エディター インスタンス内の要素を測定する方法はありますか? テーブルの相対的な列幅を見つけることができるように、テーブルと列の幅を測定する必要があります。テーブルにコンテンツが含まれていても、以下のコードは 0 を返します。

var doc = tinymce.get('text_box_desc0').getDoc();
var width = $('table', doc).width();
alert(width); 

Answer 1

はい、これは可能です。

getBoundingClientRect()これは、いくつかの情報を取得するために使用する方法の例です

        var ed = tinymce.get('text_box_desc0');

        // this will take the first table in the editor, you may define another selector to get 'your' table element 
        var elem = $(ed.getBody()).find('table:first').get(0);
        try {
            box = elem.getBoundingClientRect();
        } 
        catch(e) 
        {
            console.log('error creating box: ' + e);
        }
        // various info
        var doc = ed.getDoc(),
            docElem = doc.documentElement,
            body = ed.getBody(),
            win = ed.getWin(),
            clientTop  = docElem.clientTop  || body.clientTop  || 0,
            clientLeft = docElem.clientLeft || body.clientLeft || 0,
            scrollTop  = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop  || body.scrollTop,
            scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft,
            top  = box.top  + scrollTop  - clientTop,
            left = box.left + scrollLeft - clientLeft;

あなたが探しているのは

box.width;

しかし、次のようなさらに多くの属性があります

box.height;