EditText style content on the fly?

Question

I am working on a text editor in Android. These are mainly bold, italic, and button links that are bound to an EditText to change the style of the content. I work fine if we first select the text that you want to style, and then select the button using this method: http://developer.android.com/guide/appendix/faq/commontasks.html#selectingtext . p>

What I'm trying to do is work as a text editor, where you can use the buttons as a switch to style the text as much as you want, and then press the switch again to stop using the style. Therefore, if I wanted to type “ Pay attention to it! ” In bold, I would press the “B” button and then start typing, and everything I type will be bold until I press “B” 'again .

Any ideas on how to do this? Hope I was clear enough :)

Answer 1

You can simply update the style after each character they type using TextWatcher and addTextChangedListener() .

Well, this is just an example of code with bones.

 int mStart = -1; // Bold onClickListener public void onClick(View view) { if(mStart == -1) mStart = mEditText.getText().length(); else mStart = -1; } // TextWatcher onTextChanged(CharSequence s, int start, int before, int count) { if(mStart > 0) { int end = mEditText.getText().length(); mEditText.getText().setSpan(new StyleSpan(android.graphics.Typeface.BOLD), mStart, end - mStart, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); } } 

Answer 2

For those who are interested, I got this to work, keeping the cursor location (the "styleStart" variable below) when ToggleButton was pressed, and then when the user types more characters, I actually delete the corresponding StyleSpan style with removeSpan (), then add it again using setSpan (), using the saved source cursor location + length of the characters that are currently typed.

You also need to keep track of whether the user changes the cursor position so that style text is not needed for you. Here is the TextWatcher code:

 final EditText contentEdit = (EditText) findViewById(R.id.content); contentEdit.addTextChangedListener(new TextWatcher() { public void afterTextChanged(Editable s) { //add style as the user types if a toggle button is enabled ToggleButton boldButton = (ToggleButton) findViewById(R.id.bold); ToggleButton emButton = (ToggleButton) findViewById(R.id.em); ToggleButton bquoteButton = (ToggleButton) findViewById(R.id.bquote); ToggleButton underlineButton = (ToggleButton) findViewById(R.id.underline); ToggleButton strikeButton = (ToggleButton) findViewById(R.id.strike); int position = Selection.getSelectionStart(contentEdit.getText()); if (position < 0){ position = 0; } if (position > 0){ if (styleStart > position || position > (cursorLoc + 1)){ //user changed cursor location, reset styleStart = position - 1; } cursorLoc = position; if (boldButton.isChecked()){ StyleSpan[] ss = s.getSpans(styleStart, position, StyleSpan.class); for (int i = 0; i < ss.length; i++) { if (ss[i].getStyle() == android.graphics.Typeface.BOLD){ s.removeSpan(ss[i]); } } s.setSpan(new StyleSpan(android.graphics.Typeface.BOLD), styleStart, position, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); } if (emButton.isChecked()){ StyleSpan[] ss = s.getSpans(styleStart, position, StyleSpan.class); boolean exists = false; for (int i = 0; i < ss.length; i++) { if (ss[i].getStyle() == android.graphics.Typeface.ITALIC){ s.removeSpan(ss[i]); } } s.setSpan(new StyleSpan(android.graphics.Typeface.ITALIC), styleStart, position, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); } if (bquoteButton.isChecked()){ QuoteSpan[] ss = s.getSpans(styleStart, position, QuoteSpan.class); for (int i = 0; i < ss.length; i++) { s.removeSpan(ss[i]); } s.setSpan(new QuoteSpan(), styleStart, position, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); } if (underlineButton.isChecked()){ UnderlineSpan[] ss = s.getSpans(styleStart, position, UnderlineSpan.class); for (int i = 0; i < ss.length; i++) { s.removeSpan(ss[i]); } s.setSpan(new UnderlineSpan(), styleStart, position, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); } if (strikeButton.isChecked()){ StrikethroughSpan[] ss = s.getSpans(styleStart, position, StrikethroughSpan.class); for (int i = 0; i < ss.length; i++) { s.removeSpan(ss[i]); } s.setSpan(new StrikethroughSpan(), styleStart, position, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); } } } public void beforeTextChanged(CharSequence s, int start, int count, int after) { //unused } public void onTextChanged(CharSequence s, int start, int before, int count) { //unused } }); 

And here is one of the Clickgle ToggleButton actions:

 final ToggleButton boldButton = (ToggleButton) findViewById(R.id.bold); boldButton.setOnClickListener(new Button.OnClickListener() { public void onClick(View v) { EditText contentText = (EditText) findViewById(R.id.content); int selectionStart = contentText.getSelectionStart(); styleStart = selectionStart; int selectionEnd = contentText.getSelectionEnd(); if (selectionStart > selectionEnd){ int temp = selectionEnd; selectionEnd = selectionStart; selectionStart = temp; } if (selectionEnd > selectionStart) { Spannable str = contentText.getText(); StyleSpan[] ss = str.getSpans(selectionStart, selectionEnd, StyleSpan.class); boolean exists = false; for (int i = 0; i < ss.length; i++) { if (ss[i].getStyle() == android.graphics.Typeface.BOLD){ str.removeSpan(ss[i]); exists = true; } } if (!exists){ str.setSpan(new StyleSpan(android.graphics.Typeface.BOLD), selectionStart, selectionEnd, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); } boldButton.setChecked(false); } } }); 

There may be a better solution, glad to hear it if you have one!

Answer 3

There is a text editor with extended source code EditText called android-richtexteditor , but the code was inexplicably removed in r5. Code is still present in older versions; just use svn to check r4 or earlier to access it. The code seems to support italics, underlining, color picker, text size, etc.

Also answered these questions: 1 , 2

Answer 4

I know this is an old thread, but my colleague noticed DroidWriter on the Internet. I played a little with him, and he is very clear and very easy to use and modify. Hope this helps anyone who wants to create a rich text editor.

Answer 5

Only one possibility, not sure if this is the best solution, but what comes to mind and who knows, but that it will inspire you to a more elegant solution:

Maybe you could consider internal tracking of the hierarchical structure of the “document” style with all its style tags and restoring / replacing the final output with each character? Of course, you will also have to track the cursor position.