Rich Text Editor

We are looking for a simple Text Editor that allows setting attributes like bold, italic, text size and color, nothing too fancy. As far as i can tell JUCE does not offer this out of the box. I guess a text editor that can handle AttributedString would get the job done. To be clear, we need to be able to specify different attributes to different parts of the text.
Does anyone have or knows a solution for this?

Have you looked at the FontsDemo.h example project?

Ahh no i didn’t, you might be on to something :wink:
This works, but there is no method to apply font or colour to the selected text it seems, right?

	editor.setMultiLine(true);
	editor.setColour (juce::TextEditor::textColourId, juce::Colours::red);
	editor.setFont(juce::Font(14.0f));
	editor.moveCaretToTop(false);
	editor.insertTextAtCaret("Some lines of text \n");
	editor.moveCaretToEnd();
	editor.setColour (juce::TextEditor::textColourId, juce::Colours::green);
	editor.setFont(juce::Font(24.0f));
	editor.insertTextAtCaret("More lines of text \n");

I’d recommend checking out the docs for the TextEditor class:

https://docs.juce.com/master/classTextEditor.html

It’s not possible to directly change the colour of the selection, but you can change the colour and font of newly-added text. You would need to write your own utility to keep track of the fonts and colours of different text regions. Then, to change the colour of the selection, you’d delete back to the beginning of the selection, set the new font and colour, reinsert the selection, then change the font and colour back to their original values and reinsert the rest of the text (possibly doing this in chunks if the remainder of the text also has multiple fonts and colours).

I’m wondering wether there is an applyFontToAllText but not an applyFontToHighlightedText. Same goes for colour.

I’m of course checking out the docs, how do you think i managed to write the code above.

Alright, this seems to work alright.
Maybe a good idea to examples like these to the documentation or maybe just add methods to alter the highlighted region of text.

auto range = editor.getHighlightedRegion();
if (!range.isEmpty())
{
	juce::String text = editor.getHighlightedText();
	editor.cut();
	editor.setCaretPosition(range.getStart());
	editor.setColour (juce::TextEditor::textColourId, juce::Colours::yellow);
	editor.setFont(juce::Font(14.0f));
	editor.insertTextAtCaret(text);
}

So some more questions.

  1. How can i find out which font and colour is used at the caret position?
  2. Can would i serialise the content of the text editor including font and colours?

I don’t think this is directly possible at the moment.

Right, so the original question still stands i guess. There is no TextEditor in JUCE that allows setting the text font and color, you can edit it but you can’t make a toolbar with a combo and some buttons that reflect the selection because based on the caret position you cannot determine the font and color being used.

Should be fairly easy to add methods to get the font and colour right, i mean it knows internally which font and colour to use when drawing.

For serialisation it might be useful to exposing the UniformTextSection(s) using a visitor method?

Bit late to the game, but maybe this can be useful…

3 Likes

Hi @MarcelH, thanks for the tip. We are still looking into this so this might prove to be a good starting point.

@MarcelH Does it also allow to find out what formatting is used at certain position? We would like a little toolbar atop of the editor that indicates the formatting at the position of the Caret.

Not as such. But it’s state could be retrieved, so should not be too hard to adapt.

cool, can this do auto fallback font for other languages?