Skip to main content
Known Participant
November 11, 2011
Question

Pasting TLF into Spark TextInput

  • November 11, 2011
  • 1 reply
  • 1188 views

I imagine I must be missing something, as I've searched a lot and no one is asking this question. We have a TextArea that we allow the user to style (size, color, etc.). We also have Spark TextInputs for forms in the application. When the user copies text, say 60 point red text, they can paste that into a TextInput and it keeps the formatting, thus messing up the TextInput. Is there a quick way to prevent formatting from getting pasted into the TextInput?

I have implemented a workaround where we trap any paste events into the TextInputs and use TLF to turn text in the TextClipboard into plain text, but that is not the cleanest or most efficient way to handle it. Is there something simple I'm missing that allows me to block styling being pasted into a TextInput?

This topic has been closed for replies.

1 reply

Adobe Employee
November 14, 2011

I think you can try customClipboard upon TextInput, which is similar with your workaround.

The custom exporter controlls the behavior when you paste(when the text go out of clipboard),  while the custum importer controlls the behavior when you copy (when the text go into clipboard). That means you only need a custom exporter.

Here is a simple example,

////////////////////////////////////////////////////////////////////////////////

//

// ADOBE SYSTEMS INCORPORATED

// Copyright 2007-2010 Adobe Systems Incorporated

// All Rights Reserved.

//

// NOTICE:  Adobe permits you to use, modify, and distribute this file

// in accordance with the terms of the license agreement accompanying it.

//

////////////////////////////////////////////////////////////////////////////////

package

{

    import flash.display.Sprite;

    import flash.desktop.ClipboardFormats;

   

    import flashx.textLayout.container.ContainerController;

    import flashx.textLayout.conversion.ITextImporter;

    import flashx.textLayout.conversion.TextConverter;

    import flashx.textLayout.edit.EditManager;

    import flashx.textLayout.elements.*;

    import flashx.undo.UndoManager;

   

   

    // Example code to install a custom clipboard format. This one installs at the front of the list (overriding all later formats)

    // and adds a handler for plain text that strips out all consonants (everything except aeiou).

    public class CustomClipboardFormat extends Sprite

    {

        public function CustomClipboardFormat()

        {

            var textFlow:TextFlow = setup();

            TextConverter.addFormatAt(0, "vowelsOnly & append a new list", VowelsOnlyImporter, AdditionalListExporter, "air:text" /* it's a converter for cliboard */);

        }

       

        private const markup:String = '<TextFlow whiteSpaceCollapse="preserve" version="2.0.0" xmlns="http://ns.adobe.com/textLayout/2008"><p><span>Anything you paste will have all consonants removed.</span></p></TextFlow>';

        private function setup():TextFlow

        {

            var importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_LAYOUT_FORMAT);

            var textFlow:TextFlow = importer.importToFlow(markup);

            textFlow.flowComposer.addController(new ContainerController(this,500,200));

            textFlow.interactionManager = new EditManager(new UndoManager());

            textFlow.flowComposer.updateAllControllers();

            return textFlow;

        }

    }

   

}

import flashx.textLayout.conversion.ITextImporter;

import flashx.textLayout.conversion.ConverterBase;

import flashx.textLayout.conversion.ITextImporter;

import flashx.textLayout.conversion.TextConverter;

import flashx.textLayout.elements.IConfiguration;

import flashx.textLayout.elements.TextFlow;

class VowelsOnlyImporter extends ConverterBase implements ITextImporter

{

    protected var _config:IConfiguration = null;

   

    /** Constructor */

    public function VowelsOnlyImporter()

    {

        super();

    }

   

    public function importToFlow(source:Object):TextFlow

    {

        if (source is String)

        {

            var firstChar:String = (source as String).charAt(0);

            firstChar = firstChar.toLowerCase();

            // This filter only applies if the first character is a vowel

            if (firstChar == 'a' || firstChar == 'i' || firstChar == 'e' || firstChar == 'o' || firstChar == 'u')

            {

                var pattern:RegExp = /([b-df-hj-np-tv-z])*/g;

                source = source.replace(pattern, "");

                var importer:ITextImporter = TextConverter.getImporter(TextConverter.PLAIN_TEXT_FORMAT);

                importer.useClipboardAnnotations = this.useClipboardAnnotations;

                importer.configuration = _config;

                return importer.importToFlow(source);

            }

        }

        return null;

    }

   

    /**

     * The <code>configuration</code> property contains the IConfiguration instance that

     * the importerd needs when creating new TextFlow instances. This property

     * is initially set to <code>null</code>.

     * @see TextFlow constructor

     * @playerversion Flash 10.2

     * @playerversion AIR 2.0

     * @langversion 3.0

     */

    public function get configuration():IConfiguration

    {

        return _config;

    }

   

    public function set configuration(value:IConfiguration):void

    {

        _config = value;

    }

}

import flashx.textLayout.elements.ParagraphElement;

import flashx.textLayout.elements.SpanElement;

import flashx.textLayout.elements.ListElement;

import flashx.textLayout.elements.ListItemElement;

import flashx.textLayout.conversion.ITextExporter;

class AdditionalListExporter extends ConverterBase implements ITextExporter

{

    /** Constructor */

    public function AdditionalListExporter()   

    {

        super();

    }

   

    public function export(source:TextFlow, conversionType:String):Object

    {

        if (source is TextFlow)

        {

            source.getChildAt(source.numChildren - 1).setStyle(MERGE_TO_NEXT_ON_PASTE, false);

           

            var list:ListElement = new ListElement();

            var item1:ListItemElement = new ListItemElement();

            var item2:ListItemElement = new ListItemElement();

            var para1:ParagraphElement = new ParagraphElement();

            var para2:ParagraphElement = new ParagraphElement();

            var span1:SpanElement = new SpanElement();

            span1.text = "ab";

            var span2:SpanElement = new SpanElement();

            span2.text = "cd";

            list.addChild(item1);

            list.addChild(item2);

            item1.addChild(para1);

            para1.addChild(span1);

            item2.addChild(para2);

            para2.addChild(span2);

            source.addChild(list);

           

            var exporter:ITextExporter = TextConverter.getExporter(TextConverter.TEXT_LAYOUT_FORMAT);

            exporter.useClipboardAnnotations = this.useClipboardAnnotations;

            return exporter.export(source, conversionType);   

        }

        return null;

    }

}

turbidityAuthor
Known Participant
November 14, 2011

Thanks for this. I had seen a similar sample and had tried to implement a blanket exporter by adding a format with PlainTextExporter as the exporter, but I had trouble getting it to work. In addition, it would appy to all paste operations, if I understand it correctly. I'd love to maintain copy/paste functionality with formatting in my editable text area, while preventing that formatting from getting pasted into TextInputs. The solution I have now makes it possible to do that by listening for paste operations only on the TextInputs I specify. I was hoping there was some setting or technique to use with TextInputs to keep them from receiving TLF formatting, while allowing TLF formatting to be pasted elsewhere. Thanks for the info, though!