Viewed   322 times

I am taking Spanned Text from an EditText box and converting it to a HTML tagged string using HTML.toHtml. This works fine. I have verified that the string is correct and contains a <br> in the appropriate location. However, when I got to convert the tagged string back to a spanned text to populate a TextView or EditText using HTML.fromHtml the <br> (or multiple ones if they are present) at the end of the first paragraph disappear. This means that if a users entered text with multiple line breaks and wanted to keep that formatting it gets lost.

I attached a picture to help illustrate this. The first EditText is the user input, the TextView Below it is the HTML.tohtml result of the EditText above it, the EditText below it is populated using HTML.fromHtml using the string in the TextView above it. As you can see the line breaks have disappeared and so have the extra lines. Furthermore, when the spanned text of the second edit text is run through the HTML.toHtml it now produces a different HTML tagged String.

I would like to be able to take the HTML tagged String from the first EditText and populate other TextViews or EditTexts without losing line breaks and formatting.

 Answers

5

I also had this problem and I could not find an easy "transform" or something alike solution. Note something important, when the user presses "enter" java produces the special character n but in HTML there is no such format for line breaking. It is the <br />.

So what I have done was to replace some specific CharSequences, from the plain text, by the alternative HTML format. In my case there was only the "enter" character so it was not that messy.

Wednesday, November 16, 2022
2

This issue can be solved partially (if not completely) with a custom nl2br() function:

function nl2br_special($string){

    // Step 1: Add <br /> tags for each line-break
    $string = nl2br($string); 

    // Step 2: Remove the actual line-breaks
    $string = str_replace("n", "", $string);
    $string = str_replace("r", "", $string);

    // Step 3: Restore the line-breaks that are inside <pre></pre> tags
    if(preg_match_all('/<pre>(.*?)</pre>/', $string, $match)){
        foreach($match as $a){
            foreach($a as $b){
            $string = str_replace('<pre>'.$b.'</pre>', "<pre>".str_replace("<br />", PHP_EOL, $b)."</pre>", $string);
            }
        }
    }

    // Step 4: Removes extra <br /> tags

    // Before <pre> tags
    $string = str_replace("<br /><br /><br /><pre>", '<br /><br /><pre>', $string);
    // After </pre> tags
    $string = str_replace("</pre><br /><br />", '</pre><br />', $string);

    // Arround <ul></ul> tags
    $string = str_replace("<br /><br /><ul>", '<br /><ul>', $string);
    $string = str_replace("</ul><br /><br />", '</ul><br />', $string);
    // Inside <ul> </ul> tags
    $string = str_replace("<ul><br />", '<ul>', $string);
    $string = str_replace("<br /></ul>", '</ul>', $string);

    // Arround <ol></ol> tags
    $string = str_replace("<br /><br /><ol>", '<br /><ol>', $string);
    $string = str_replace("</ol><br /><br />", '</ol><br />', $string);
    // Inside <ol> </ol> tags
    $string = str_replace("<ol><br />", '<ol>', $string);
    $string = str_replace("<br /></ol>", '</ol>', $string);

    // Arround <li></li> tags
    $string = str_replace("<br /><li>", '<li>', $string);
    $string = str_replace("</li><br />", '</li>', $string);

    return $string;
}

This must be applied to the content before it is HTML-Purified. Never re-process a purified content, unless you know what you're doing.

Please note that because each line-break and double line-breaks are already kept, you should not use the AutoFormat.AutoParagraph feature of HTML Purifier:

// Process line-breaks
$string = nl2br_special($string);

// Initiate HTML Purifier config
$purifier_config = HTMLPurifier_Config::createDefault();
$purifier_config->set('HTML.Allowed', 'p,ul,ol,li,strong,b,em,i,u,a[href],code,pre,blockquote,cite,img[src|alt],br,hr,h3,h4');
//$purifier_config->set('AutoFormat.AutoParagraph', true); // Make sure to NOT use this

// Initiate HTML Purifier
$purifier = new HTMLPurifier($purifier_config);

// Purify the content!
$string = $purifier->purify($string);

That's it!


Furthermore, because allowing basic HTML tags was originally intended to improve user experience by not adding another markup syntax, you might want to allow users to post code, and especially HTML code, which would not be interpreted/removed by HTML Purifier.

HTML Purifier currently allows to post code but requires complex CDATA markers:

<![CDATA[
Place code here
]]>

Hard to remember and to write. To simplify the user experience as much as possible I believe it is best to allow users to add code by embedding it with simple <code> (for inline code) and <pre> (for blocks of code) tags. Here is how to do that:

function custom_code_tag_callback($code) {

    return '<code>'.trim(htmlspecialchars($code[1])).'</code>';
}
function custom_pre_tag_callback($code) {

    return '<pre><code>'.trim(htmlspecialchars($code[1])).'</code></pre>';
}

// Don't require HTMLPurifier's CDATA enclosing, instead allow simple <code> or <pre> tags
$string = preg_replace_callback("/<code>(.*?)</code>/is", 'custom_code_tag_callback', $string);
$string = preg_replace_callback("/<pre>(.*?)</pre>/is", 'custom_pre_tag_callback', $string);

Note that like the nl2br processing, it must be done before the content is HTML Purified. Also, keep in mind that if the user puts <code> or <pre> tags in his own posted code, then it will close the parent <code> or <pre> tag enclosing his code. This cannot be solved, and also applies with the original CDATA markers or with any markup, even the one used on (for example using the ` symbol in a code sample will close the code tag).

Finally, for a great user experience there are other things that we might want to automate like for example the links which we want to be made clickable. Luckily this can be done by HTML Purifier AutoFormat.Linkify feature.

Here is the final code that includes everything for an ultimate setup:

// === Declare functions ===

function nl2br_special($string){

    // Step 1: Add <br /> tags for each line-break
    $string = nl2br($string); 

    // Step 2: Remove the actual line-breaks
    $string = str_replace("n", "", $string);
    $string = str_replace("r", "", $string);

    // Step 3: Restore the line-breaks that are inside <pre></pre> tags
    if(preg_match_all('/<pre>(.*?)</pre>/', $string, $match)){
        foreach($match as $a){
            foreach($a as $b){
            $string = str_replace('<pre>'.$b.'</pre>', "<pre>".str_replace("<br />", PHP_EOL, $b)."</pre>", $string);
            }
        }
    }

    // Step 4: Removes extra <br /> tags

    // Before <pre> tags
    $string = str_replace("<br /><br /><br /><pre>", '<br /><br /><pre>', $string);
    // After </pre> tags
    $string = str_replace("</pre><br /><br />", '</pre><br />', $string);

    // Arround <ul></ul> tags
    $string = str_replace("<br /><br /><ul>", '<br /><ul>', $string);
    $string = str_replace("</ul><br /><br />", '</ul><br />', $string);
    // Inside <ul> </ul> tags
    $string = str_replace("<ul><br />", '<ul>', $string);
    $string = str_replace("<br /></ul>", '</ul>', $string);

    // Arround <ol></ol> tags
    $string = str_replace("<br /><br /><ol>", '<br /><ol>', $string);
    $string = str_replace("</ol><br /><br />", '</ol><br />', $string);
    // Inside <ol> </ol> tags
    $string = str_replace("<ol><br />", '<ol>', $string);
    $string = str_replace("<br /></ol>", '</ol>', $string);

    // Arround <li></li> tags
    $string = str_replace("<br /><li>", '<li>', $string);
    $string = str_replace("</li><br />", '</li>', $string);

    return $string;
}


function custom_code_tag_callback($code) {

    return '<code>'.trim(htmlspecialchars($code[1])).'</code>';
}

function custom_pre_tag_callback($code) {

    return '<pre><code>'.trim(htmlspecialchars($code[1])).'</code></pre>';
}



// === Process user's input ===

// Process line-breaks
$string = nl2br_special($string);

// Allow simple <code> or <pre> tags for posting code
$string = preg_replace_callback("/<code>(.*?)</code>/is", 'custom_code_tag_callback', $string);
$string = preg_replace_callback("/<pre>(.*?)</pre>/is", 'custom_pre_tag_callback', $string);


// Initiate HTML Purifier config
$purifier_config = HTMLPurifier_Config::createDefault();
$purifier_config->set('HTML.Allowed', 'p,ul,ol,li,strong,b,em,i,u,a[href],code,pre,blockquote,cite,img[src|alt],br,hr,h3,h4');
$purifier_config->set('AutoFormat.Linkify', true); // Make links clickable
//$purifier_config->set('HTML.TargetBlank', true); // Uncomment if you want links to open new tabs
//$purifier_config->set('AutoFormat.AutoParagraph', true); // Leave this commented as it conflicts with nl2br


// Initiate HTML Purifier
$purifier = new HTMLPurifier($purifier_config);

// Purify the content!
$string = $purifier->purify($string);

Cheers!

Monday, November 21, 2022
 
tariq
 
1

Did u try this method?

final EditText edt = (EditText) findViewById(R.id.editText1);

edt.setText("http://");
Selection.setSelection(edt.getText(), edt.getText().length());


edt.addTextChangedListener(new TextWatcher() {

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            // TODO Auto-generated method stub

        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count,
                int after) {
            // TODO Auto-generated method stub

        }

        @Override
        public void afterTextChanged(Editable s) {
            if(!s.toString().startsWith("http://")){
                edt.setText("http://");
                Selection.setSelection(edt.getText(), edt.getText().length());

            }

        }
    });
Saturday, August 6, 2022
 
tim_r
 
4

UPDATE: Another better approach is to use BreakIterator:

private void init() {
    String definition = "Clickable words in text view ".trim();
    TextView definitionView = (TextView) findViewById(R.id.text);
    definitionView.setMovementMethod(LinkMovementMethod.getInstance());
    definitionView.setText(definition, BufferType.SPANNABLE);
    Spannable spans = (Spannable) definitionView.getText();
    BreakIterator iterator = BreakIterator.getWordInstance(Locale.US);
    iterator.setText(definition);
    int start = iterator.first();
    for (int end = iterator.next(); end != BreakIterator.DONE; start = end, end = iterator
            .next()) {
        String possibleWord = definition.substring(start, end);
        if (Character.isLetterOrDigit(possibleWord.charAt(0))) {
            ClickableSpan clickSpan = getClickableSpan(possibleWord);
            spans.setSpan(clickSpan, start, end,
                    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        }
    }
}

private ClickableSpan getClickableSpan(final String word) {
    return new ClickableSpan() {
        final String mWord;
        {
            mWord = word;
        }

        @Override
        public void onClick(View widget) {
            Log.d("tapped on:", mWord);
            Toast.makeText(widget.getContext(), mWord, Toast.LENGTH_SHORT)
                    .show();
        }

        public void updateDrawState(TextPaint ds) {
            super.updateDrawState(ds);
        }
    };
}

OLD ANSWER

I wanted to handle click in my own Activity. I solved it by following code:

private void init(){
    String definition = "Clickable words in text view ".trim();
    TextView definitionView = (TextView) findViewById(R.id.definition);
    definitionView.setMovementMethod(LinkMovementMethod.getInstance());
    definitionView.setText(definition, BufferType.SPANNABLE);

    Spannable spans = (Spannable) definitionView.getText();
    Integer[] indices = getIndices(
            definitionView.getText().toString(), ' ');
    int start = 0;
    int end = 0;
      // to cater last/only word loop will run equal to the length of indices.length
    for (int i = 0; i <= indices.length; i++) {
        ClickableSpan clickSpan = getClickableSpan();
       // to cater last/only word
        end = (i < indices.length ? indices[i] : spans.length());
        spans.setSpan(clickSpan, start, end,
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        start = end + 1;
    }
}
private ClickableSpan getClickableSpan(){
     return new ClickableSpan() {
            @Override
            public void onClick(View widget) {
                TextView tv = (TextView) widget;
                String s = tv
                        .getText()
                        .subSequence(tv.getSelectionStart(),
                                tv.getSelectionEnd()).toString();
                Log.d("tapped on:", s);
            }

            public void updateDrawState(TextPaint ds) {
                 super.updateDrawState(ds);
            }
        };
}
public static Integer[] getIndices(String s, char c) {
    int pos = s.indexOf(c, 0);
    List<Integer> indices = new ArrayList<Integer>();
    while (pos != -1) {
        indices.add(pos);
        pos = s.indexOf(c, pos + 1);
    }
    return (Integer[]) indices.toArray(new Integer[0]);
}
Friday, August 12, 2022
 
hsluo
 
2

You could search the string for rn. That's DOS style line ending.

EDIT: Take a look at this

Tuesday, September 13, 2022
 
Only authorized users can answer the search term. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :