• Getting to know the Text Editor

    A large part of the CMS uses the Text Editor. From the Blog and Product entry to the simple Text Plugin. The same text editor is used throughout the site, the only thing that will change will be the availability of some features.

    Demo

  • If you are familiar with most Word Processing software, then you'll find this basic version a breeze.

    You can just start typing, and the text will be used within whatever plugin or feature this appears in, but if you want to know what individual buttons do, then keep reading.

  • Toolbar Buttons


    Source Button

    The source button is probably best left to people who have an understanding of HTML and CSS. This is probably the only advanced feature in the Text Editor, but is a vital tool for people who edit websites with a little more complexity.

    Toggling the Source button switches the display between normal Wysiwyg view, and code view. So you'll see the raw HTML code that the normal view generates for you. The raw code is what is actually used by the web browser to work out how to display each element of your site.

    Text Editor Source Code

    Cut Button

    Simply cuts the highlighted text and places it on the clip board.

    Copy Button

    Copies the highlighted text and places it on the clip board.

    Paste Button

    Places the last copy to the clip board into the text editor. Image will only work if they have been copied from another website, and we run a filter on all text that strips out text formatting to leave just the basic text.

    Paste as Plain Text

    This button will provide you with a dialog to paste text into. It will then strip out all formatting, including headers and table layouts and provide you with just plain text.

    This button is likely to be removed in a future update.

    Paste from Word

    This button attempts to paste from a Word Document.

    This button is likely to be removed in a future update.

    Undo Button

    This button undoes the last edit that was made.

    Redo Button

    This button will put back everything that was removed or added when you clicked on your undo button.

    YouTube Button

    A very useful feature, which will help you insert a YouTube video directly into your text. We do have a YouTube Plugin, but for things like Products and Blogs, you'll have to use this option.

    Clicking on this will present you with a dialog, along with some options. The first text box will allow you to place in the embed code copied directly from the YouTube page under the share options.

    We suggest using the next option, which requests that you just paste in the URL of the YouTube video. A default width and height are already populated, which you can change if you wish.

    Text Editor YouTube Box

    For most websites now, we suggest you tick the first tick box which will make your video responsive, and ignore the height and the width and fill its container.

    You can then choose whether to display suggested videos at the end of the video, enable privacy-enhanced mode, or auto-play when the page is loaded.

    The last option allows you to manually set where to start the video.

    Align Buttons

    The align buttons position the text to the Left, the Centre, Right or justify it to full up the width.

    If for any reason these have no effect on the text, then it'll be because the area of text you are editing is being overridden into a default position by the template. For example. The footer on the far right might be aligned right by default.

    Create a link

    When you want text to link to another page, site or file, you'll need to create a link. To do this, highlight the text that you want to link when clicked on, and select the link button. This will bring up the link dialog.

    Text Editor Link Info

    To view this in more detail, you'll need to head over to the full instructions.

    Remove Link

    This button will remove any link that is highlighted, or that the cursor currently sits within. See both examples below.

    Text Editor Remove Link

    Create Anchor

    To create an anchor, which is a place on a certain section on a page in which you can direct uses to via a link, place a cursor at the beginning of the text that the browser is to scroll to, and select the Anchor button. This will present you with a dialog box in which you must enter the name of your anchor. This is what you'll link to from either a link on this page or on other pages.

    Insert Image

    In the simplest form, this provides you with a box in which you can select an image to insert into a text. Alternatively, you may just need our Image Plugin. But if you have to insert an image within the text, this will give you a dialog box in which you can place the URL of the Image or you can select an image or File from the File Manager, then enter the Alt Title and click OK.

    Text Editor Image Dialog

    View the advanced options documentation.

    Insert Table

    You can also insert tables into your text. Please remember that tables are for displaying data, and not for positioning images and text, as this will break your responsive template.

    The Tables Dialog window gives you basic table options. Insert your Rows and your columns. Set your width, if your not sure what width you want, set to 100% as this will fill the container and will work with your responsive template. Maybe best to leave your height blank so that it stretches with the content.

    Headers allows you to set if you have a header row, column or none at all. This will give that row a different style.

    Setting your border size will have a different effect depending on your template. Best to stick with the default and alter it until you get your desired effect.

    Align allows you to align the table, much like you would with text and images.

    Cell spacing is the the space between cells. Cell padding is the space between the cell boundaries and the text.

    View the advanced options documentation.

    Insert Horizontal Line

    Simply inserts a line at the position the cursor currently sits at. Style of the horizontal line will depend on the settings of your template.

    Line example:


    Helps to split things up nicely between areas of text.

    Insert Special Character

    Allows you to insert a character or symbol not found on your keyboard, and avoids you having to learn special keyboard shortcuts to get the © symbol.

    Maximize

    Increases the text editors size to full screen, allowing you to use the full space of your browser to do your work. Just because sometimes the dialog window just isn't big enough.

    Bold Button

    Toggles the current font style or the highlighted text to Bold.

    Italic Button

    Toggles the current font style or the highlighted text to italic.

    Underline Button

    Toggles the current font style or the highlighted text to Underlined.

    Strike Through Button

    Toggles the current font style or the highlighted text to Strike Through. Strike Through looks like the text has been crossed out.

    Subscript Button

    Toggles the current font style or the highlighted text to Subscript. A subscript is a number, figure, symbol, or indicator that is smaller than the normal line of type. Subscripts appear at or below the baseline.

    Superscript Button

    Toggles the current font style or the highlighted text to Superscript. A superscript is a number, figure, symbol, or indicator that is smaller than the normal line of type. Superscripts appear above the baseline.

    Remove Format

    This removes any formatting currently assigned to the highlighted text. By default, we strip out any formatting on paste. This does the same to anything that currently has formatting that you have since adding. Leaving you with just basic formatted text. So removing colours, sizes, styles etc.

    Numbered List

    Inserts or removes a numbered list. Similar to bulleted list.

    Bulleted List

    Inserts or removes a bulleted list. Similar to a numbered list.

    Decrease Indent

    Decreases the indent to the text if there has been one added.

    Increase Indent

    Adds an indent to the current section of text. Useful for quotes or lists. Works similar to a bulleted list, but without the graphical points.

    Block Quote

    Toggles the current section of text to Block Quote text. The display of this will depend greatly on any style that has been added to your template. By default, padding will be added to the section, it'll become slightly indented and the font style will be italic.

    Font

    This allows you to change the current font style. We strongly recommend that you refrain from using this option as the font style should really be chosen by your template. You run the risk of having different font styles on different pages which can badly affect the look of your site.

    Best to change the Paragraph Format instead or select from the Styles list.

    Font Size

    This allows you to change the font size. Again, same as the Font Style, we strongly recommend that you refrain from using this option as the font size should really be chosen by your template. You run the risk of having different font sizes on different pages which can badly affect the look of your site.

    Best to change the Paragraph Format instead or select from the Styles list.

    Paragraph Format

    This allows you to change the type of text you are inserting into the Text Editor. Each option is a standard HTML formatted type, and the look of each one will be different from what actually appears on your site due to the fact that the Template that your site uses styles everything like this, and can changed depending on page and location.

    Best to try out the style, save the plugin and make changes once you've viewed it on your site. The main ones you'll find yourself using will be the Normal Text and Heading options.

    Styles

    This is a list of custom styles built into your current template. Each site will be different, and these can be customised by BarkWeb. This is handy when you have styles that appear on several pages, like a red highlight text. This way should the style need to be changed in the future, we can change it in the template and it'll update every place the style is used, making things easier to manage and keeping everything looking the same.

    If your style list does not appear, then there are no styles for your current template.

    If the drop down is blank, then you may need to highlight a certain piece of text, link a link for example, for the style to appear.