如何为text-angular编辑器中的文本添加tooltip功能

嘿，我来帮你搞定text-angular编辑器里的文本悬停tooltip功能！结合你给出的现有代码，我整理了一套可行的实现步骤，一起来看：

1. 先修改编辑器HTML，添加渲染完成事件 #

text-angular提供了ta-rendered事件，会在编辑器内容渲染完成后触发，我们可以利用这个事件来绑定后续的鼠标监听逻辑：

<div text-angular id="htmlEditorId" 
     ng-class="totalOrphans == 0 ? 'add-heightTo-textEditor' : 'html-editor-container'" 
     class="textcontent-modal" 
     spellcheck="false" 
     ng-model="data.htmlDocument" 
     ta-disabled="isEditingDisabled" 
     ng-mouseup="doSomethingWithSelectedText($event)" 
     ng-keyup="doSomethingWithSelectedText($event)" 
     ta-rendered="onEditorRendered()" <!-- 新增这个事件 -->
     name="editor1"> 
</div>

2. 在控制器中实现核心逻辑 #

接下来在你的Angular控制器里编写tooltip的创建、定位和事件监听逻辑：

angular.module('yourApp').controller('YourController', function($scope, $document) {
    // 存储tooltip元素，避免重复创建
    let tooltipElement = null;

    // 编辑器渲染完成后绑定事件
    $scope.onEditorRendered = function() {
        const editorContainer = document.getElementById('htmlEditorId');
        
        // 用事件委托监听鼠标悬停和离开事件
        editorContainer.addEventListener('mouseover', handleTextMouseOver);
        editorContainer.addEventListener('mouseout', handleTextMouseOut);
    };

    // 处理鼠标悬停事件
    function handleTextMouseOver(event) {
        const target = event.target;
        // 只处理包含有效文本的节点
        if ((target.nodeType === Node.TEXT_NODE && target.textContent.trim()) || 
            (target.nodeType === Node.ELEMENT_NODE && target.textContent.trim())) {
            
            const hoveredText = target.textContent.trim();
            if (!hoveredText) return;

            // 创建tooltip元素（首次悬停时创建）
            if (!tooltipElement) {
                tooltipElement = document.createElement('div');
                // 基础样式，你可以改成自定义CSS类
                Object.assign(tooltipElement.style, {
                    position: 'absolute',
                    backgroundColor: '#333',
                    color: '#fff',
                    padding: '4px 8px',
                    borderRadius: '4px',
                    zIndex: '9999',
                    pointerEvents: 'none', // 防止tooltip干扰鼠标事件
                    fontSize: '12px'
                });
                $document[0].body.appendChild(tooltipElement);
            }

            // 设置tooltip内容，这里可以根据业务逻辑自定义（比如查数据）
            tooltipElement.textContent = `悬停文本：${hoveredText}`;

            // 计算tooltip的定位，显示在文本上方居中位置
            const targetRect = target.getBoundingClientRect();
            tooltipElement.style.left = `${targetRect.left + window.scrollX + (targetRect.width / 2) - (tooltipElement.offsetWidth / 2)}px`;
            tooltipElement.style.top = `${targetRect.top + window.scrollY - tooltipElement.offsetHeight - 10}px`;
            tooltipElement.style.display = 'block';
        }
    }

    // 处理鼠标离开事件
    function handleTextMouseOut() {
        if (tooltipElement) {
            tooltipElement.style.display = 'none';
        }
    }

    // 控制器销毁时清理资源，避免内存泄漏
    $scope.$on('$destroy', function() {
        const editorContainer = document.getElementById('htmlEditorId');
        if (editorContainer) {
            editorContainer.removeEventListener('mouseover', handleTextMouseOver);
            editorContainer.removeEventListener('mouseout', handleTextMouseOut);
        }
        if (tooltipElement) {
            $document[0].body.removeChild(tooltipElement);
            tooltipElement = null;
        }
    });
});

3. 可选优化点 #

• 自定义tooltip内容：如果需要根据特定文本或标记显示不同内容，可以修改handleTextMouseOver里的逻辑，比如检查元素的data-tooltip属性，或者根据文本匹配后台数据。
• 定位优化：可以添加判断，如果tooltip顶部空间不足，就显示在文本下方，避免超出视口。
• 样式优化：把内联样式改成CSS类，方便统一维护，比如定义一个.editor-tooltip类。
• 动态内容适配：如果编辑器内容会动态更新，可以监听ta-change事件，不过事件委托本身不受DOM更新影响，这一步也可以省略。

内容的提问来源于stack exchange，提问作者ganesh kaspate