Xinha Discussion Forum

KMH

New member

Registered: 2011-08-19

Posts: 6

CSSPicker select & wrap images

I'm using a highly modified version of the CSSPicker plugin in my webapp project and one thing I needed it to do was also wrap images (or selections that included an image or images).  The way CSSPicker gets the selection from within the editor it was only working with text selections and passing them as a string.  If the selection included an image object it just ended up being deleted instead of wrapped by CSSPicker's element.

Well, I found a solution.  I'm not really a programmer so this may not be the best way to do it, but it works.

Find the part of the csspicker.js file that looks like this:

    if(!toggleState) {
        /* Create a new wrapper when:
         * 1. Selected text has no 'snug' wrapper around it already.
         * 2. If it does have a 'snug' wrapper, only append to the className if it's of the same type (span or div) 
         */
        if(sel == '') sel = ' '; //We insert this if the selection is empty, making it easier for carat placement via click

and change it to this:

    if(!toggleState) {
        /* Create a new wrapper when:
         * 1. Selected text has no 'snug' wrapper around it already.
         * 2. If it does have a 'snug' wrapper, only append to the className if it's of the same type (span or div) 
         */

    var contents = sel.getRangeAt(0)
    var fragment = contents.cloneContents(); // clone the contents into the documentFragment
    var img_sel = false; // assume no image is selected
    for (var d=0; d < fragment.childNodes.length; d++) {
        if (fragment.childNodes[d].tagName) { // text-only selection won't have tagName
            if (fragment.childNodes[d].tagName.toLowerCase()=="img") {
                // if you find an image set nontxt to true
                var nontxt = true;
            }
        }
    }
    if (nontxt==true) {
        // create a disposable div
        var ghost = document.createElement('div');
        // append the fragment into it
        ghost.appendChild(fragment);
        // now we can get innerHTML text
        sel = ghost.innerHTML;
        // discard the div without adding it to the DOM
        ghost = null;
    }

Now, it checks for the presence of images in your selection.  If it finds one the next part creates a phantom DIV, and appends the documentFragment that was copied from your selection into it because you apparently can't use innerHTML on a documentFragment.  Once it's part of the DIV we can get the code and reassign our selection (which is usually a string of text anyway) to a string of text equal to the innerHTML of our selection.  Then that just gets written in by the insertHTML function.

Myrta99

New member

Registered: 2013-09-30

Posts: 2

Re: CSSPicker select & wrap images

If you are serious about paying someone, there is another forum at devshed where you can hire a programmer (If you didn't know). If you're just looking the for functionality of the dropdown list and changing the titles or whatever, don't pay too much. For someone who knows what they're doing, it wouldn't be much of an undertaking.