ROES Web - V5 Text Editor

A new text editor is available in ROES Web v5 introducing the ability to individually control font faces, sizes, styles, and colors allowing colors to be restricted to the swatches that you define.

ROES Web v5 has four new attributes for controlling font related selections available to users when entering text. The attributes are font_styles, font_colors, font_faces and  font_sizes.

  • font_styles - default is true, add with a value of false to dim the Bold and Italic buttons within the editor pane.

  • font_colors - can be specified in rgb, rgba, hex triplet, and hex quad. The swatch display is self centering with a max width of 11 columns. The separator character is a semi colon (;). The full range of colors are available when font_colors is undefined. Some examples.
    • Red = rgb(255,0,0) or rgba(255,0,0,1) or #ff0000 or #ff0000ff. Opacity is in the range of 0 - 1 for rgba. For hex quad the range is 00 to ff (0 - 255).
    • r,g,b,c,m,y,wht,blk values used in rgba format would look like below:
      • rgba(255,0,0,1.0);rgba(0,255,0,1.0);rgba(0,0,255,1.0);rgba(0,255,255,1.0);rgba(255,0,255,1.0);rgba(255,255,0,1.0);rgba(255,255,255,1.0);rgba(0,0,0,1.0)

  • font_faces - a comma separated string of font faces you would like available for selection. IE: Merriweather,Poppins,Raleway. If not defined the fonts available are those defined in the lab overriding css file.

  • font_sizes - specify the sizes that will be available in the sizes drop down. If not defined the sizes listed are the full range from 8 to 64. Include 18 in your font_sizes list. 18 is the default starting size unless set on the node. Without 18 defined the size drop down will be blank to start.

Sizes

Selection Model - When accessing a text node all default or previously entered text is highlighted. A change to font face, size, style or color will change all text. In v5 when no text is selected a change to font face, size, style or color will change all text. Individual characters, words or lines can be selected and styled independently.

Article Details

Article ID:
80
Category: