Visual web editors are computer programs that let you design your web page without your needing any knowledge of HTML or CSS. You design them visually on your computer using your mouse and keyboard, so that what you see in your computer monitor is what you get on your website. That's why they are called What You See Is What You Get web editors, or "WYSIWYG web editors" for short. As you create your web page, these editors generate HTML and CSS code behind the scenes for you. They are an efficient and user-friendly method of making websites, since anybody, laypersons included, can create websites with these tools. No technical knowledge is needed. You can design your website quickly this way, and then devote your time and energy on what is really important to you: generating sales from your site, delivering your products or services, etc. That way, your website doesn't become your life. It remains as what it should be: a means to an end, a way for you to sell stuff (or whatever you want it for).

The WYSIWYG (What You See Is What You Get) editor is similar to a word processor like Microsoft Word. The editor is integrated into the Drupal CMS and has the same functionality and features seen in a standard editor. The functions available in the WYSIWYG are all available at the top of the main content editing area.

[[{"fid":"3308","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"90","width":"872","class":"media-element file-default"}}]]

 

Some things to know when using the WYSIWYG editor:

  • Some browsers do not allow the cut, copy, and paste buttons to work using the WYSIWYG editor. To use these features, use keyboard shortcuts (ctrl+c, v, or x) or the edit menu in your browser.

  • When copying and pasting from an MS Word document or another web page, it is best to remove all formatting prior to pasting.

  • At the bottom of every page is the "Save" button. Changes are seen only when you hit "Save". "Save" is not the same as "Publish".

Button Functions:

[[{"fid":"3312","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"33","width":"69","class":"media-element file-default"}}]] View Source. This button will expose the html. Use with caution.

[[{"fid":"3314","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"25","width":"40","class":"media-element file-default"}}]]Select All. This button will highlight all of this field. Ctrl+A

[[{"fid":"3316","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"25","width":"38","class":"media-element file-default"}}]]Cut. This button invokes a process in which text or other data is moved from one part of a document and inserted elsewhere via paste button/command.

[[{"fid":"3318","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"25","width":"43","class":"media-element file-default"}}]]Copy.This button invokes a process in which text or other data is copied from one part of a document and inserted elsewhere via paste button/command.

[[{"fid":"3320","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"25","width":"39","class":"media-element file-default"}}]]Paste. This button concludes a process in which text or other data is copied/moved from one part of a document and inserted elsewhere.

[[{"fid":"3322","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"26","width":"42","class":"media-element file-default"}}]]Paste as plain text. This button concludes a process in which plain text or other data is copied/moved from one part of a document and inserted elsewhere. This strips html markup from text.

[[{"fid":"3324","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"25","width":"39","class":"media-element file-default"}}]]Remove Format. This button strips html markup from text.

[[{"fid":"3326","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"25","width":"35","class":"media-element file-default"}}]]Undo. This button allows you to undo last action you did on this field.

[[{"fid":"3328","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"24","width":"33","class":"media-element file-default"}}]]Redo. This button allows you to redo your last action.

[[{"fid":"3330","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"25","width":"31","class":"media-element file-default"}}]]Search. Search this field.

[[{"fid":"3332","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"27","width":"89","class":"media-element file-default"}}]]Format. This dropdown gives you the abiltiy to apply formatting like headers to text. Headings should be used to designate a hierarchy of information, like an outline.  Main topics should use Heading 2.  Subtopics within each main topic should use Heading 3, and so on.  Do not use Heading 1 because the title of the page uses Heading 1.  For accessibility purposes, don't skip headings.  For example, don't skip directly to Heading 3.  When you use Headings in your pages, the Sonosite style sheets will make them look like the rest of the site.

[[{"fid":"3334","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"23","width":"27","class":"media-element file-default"}}]]Bold. This button bolds text.

[[{"fid":"3336","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"24","width":"27","class":"media-element file-default"}}]]Underline. This button underlines text.

[[{"fid":"3338","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"23","width":"34","class":"media-element file-default"}}]]Strikethrough. This button applies strikethrough to text.

[[{"fid":"3340","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"23","width":"27","class":"media-element file-default"}}]]Italic. This button italisizes text.

[[{"fid":"3342","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"24","width":"26","class":"media-element file-default"}}]]Subscript. This button subscripts text.

[[{"fid":"3344","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"23","width":"30","class":"media-element file-default"}}]]Superscript. This button superscripts text.

[[{"fid":"3346","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"23","width":"28","class":"media-element file-default"}}]]Order List. This button makes ordered lists.

[[{"fid":"3348","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"22","width":"29","class":"media-element file-default"}}]]Unordered List. This button makes unordered list.

[[{"fid":"3350","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"23","width":"31","class":"media-element file-default"}}]]Decrease Indent. This button decreases/removes indent from indented text.

[[{"fid":"3352","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"23","width":"27","class":"media-element file-default"}}]]Increase Indent. This button increases/adds indent to text.

[[{"fid":"5674","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"53","width":"36","class":"media-element file-default"}}]] Teaser/Break button. Adds a summary breakpoint for body field.

[[{"fid":"3354","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"23","width":"27","class":"media-element file-default"}}]]Link. This button adds hyperlink to other content/sites.

[[{"fid":"3356","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"23","width":"32","class":"media-element file-default"}}]]Unlink. This button removes hyperlink.

[[{"fid":"3358","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"22","width":"31","class":"media-element file-default"}}]]Add Media. This button opens interface to add media such as images or video content to field.

[[{"fid":"3360","view_mode":"default","type":"media","link_text":null,"attributes":{"height":"22","width":"24","class":"media-element file-default"}}]]Insert Special Character. This button opens interface to add special characters such as @ or ®.