Search code examples
javascriptjqueryhtmltinymcerte

Selected content to upperCase?


I am just wondering if there is a simple solution already to the problem of turning selected content in tinymce to upperCase letters.

Anyone got a solution?

PS: The upperCase-function is known, but won't solve the tinymce setting of selected content alone.


Solution

  • This is what i came up with after some fiddling

            // check if a node intersects the given range
            rangeIntersectsNode: function (range, node) {
                var nodeRange;
                if (range.intersectsNode) {
                    return range.intersectsNode(node);
                }
                else {
                    nodeRange = node.ownerDocument.createRange();
                    try {
                        nodeRange.selectNode(node);
                    } catch (e) {
                        nodeRange.selectNodeContents(node);
                    }
    
                    return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) == -1 &&
                        range.compareBoundaryPoints(Range.START_TO_END, nodeRange) == 1;
                }
            },
    
    
    // Tinymce-Shortcut:  (cmd/ctrl + shift +a)
    if ( ( (mac && evt.metaKey)|| (!mac && evt.ctrlKey)) && evt.shiftKey && evt.keyCode == 65 ){
    
        if (!ed.selection.isCollapsed()) {
    
            var selection   = ed.getWin().getSelection();   // user selection
            var range       = selection.getRangeAt(0);      // erste range
            var start       = range.startContainer;
            var start_offset = range.startOffset;
            var end         = range.endContainer;
            var end_offset  = range.endOffset;
    
            // Get all textnodes of the common ancestor
            // Check foreach of those textnodes if they are inside the selection
            // StartContainer and EndContainer may be partially inside the selection (if textnodes)
            // concatenate those textnode parts and make toUppercase the selected part only
            // all textnodes inbetween need to become upperCased (the nodeContents)
            // Selection needs to be reset afterwards.
            var textnodes = t.getTextNodes(range.commonAncestorContainer);
            for (var i=0; i<textnodes.length; i++) {
                if (t.rangeIntersectsNode(range, textnodes[i])){
                    if (textnodes[i] == start && textnodes[i] == end) {
                        var text_content = start.textContent;
                        text_content = start.textContent.substring(0, start_offset) + text_content.substring(start_offset, end_offset).toUpperCase() + end.textContent.substring(end_offset);
                        textnodes[i].nodeValue = text_content;
                    }
                    else if (textnodes[i] == start){
                        var text_content = start.textContent.substring(0, start_offset) + start.textContent.substring(start_offset).toUpperCase();
                        textnodes[i].nodeValue = text_content;
    
                    }
                    else if (textnodes[i] == end){
                        var text_content = end.textContent.substring(0, end_offset).toUpperCase() + end.textContent.substring(end_offset);
                        textnodes[i].nodeValue = text_content;
                    }
                    else {
                        // Textnodes between Start- and Endcontainer
                        textnodes[i].nodeValue = textnodes[i].nodeValue.toUpperCase();
                    }
                }
            }
    
            // reset selection
            var r = ed.selection.dom.createRng();
            r.setStart(start, start_offset);
            r.setEnd(end, end_offset);
            ed.selection.setRng(r);
    
            evt.preventDefault();
            return false;
        }
    }