Question

这是SVG元素的示例。使用双击我想获得文本内容以在textarea中显示。但在我的尝试中，它取决于用户点击的精确位置：当用户点击一个line-element时，我只得到一行，如果用户没有完全点击一行，我会得到一个空值（但是仍然在g元素内部。）

SVG

<g id="j_7" model-id="15449af1-b873-4d0f-92da-ca064c322b77">

    <rect id="v-41"></rect>

    <text id="v-46" y="0.8em" display="null" xml:space="preserve">
        <tspan id="v-139" class="line">Line 1</tspan>
        <tspan id="v-140" class="line">Line 2</tspan>
        <tspan id="v-141" class="line">Line 3</tspan>
    </text>
</g>

JS

使用JointJS的dblclick事件（因为它是图表编辑器的一部分）

'cell:pointerdblclick': function(cellView, event, x, y){
    var content = event.target.innerHTML;

        $('#target').prepend('<textarea id="overlay">' + content + '</textarea>');
        $('#overlay').focus().select();                
},

所以我需要的是

Line 1
Line 2
Line 3

作为content，如果用户双击g元素中的某个位置，则在textarea中显示此内容。

Answer 1

假设您将文本存储在属性（应该是这种情况）或属性中，最好执行以下操作：

'cell:pointerdblclick': function(cellView, event, x, y) {
    var content = cellView.model.get('mytext'); // in case the text is in a property
    var content = cellView.model.attr('text/text') // in case the text is in an attribute

    $('#target').prepend('<textarea id="overlay">' + content + '</textarea>');
    $('#overlay').focus().select();
},

Answer 2

尝试使用jQuery提取文本

'cell:pointerdblclick': function(cellView, event, x, y) {
    var content = cellView.$el.find('tspan').map(function() {
        return $(this).text();
    }).get().join("\n");

    $('#target').prepend('<textarea id="overlay">' + content + '</textarea>');
    $('#overlay').focus().select();
},

通过dblclick事件

2 个答案: