INFO 2480-61: Website Database Implementation
  • Syllabus
  • Welcome Letter
  • Week 1: Software and Setup
    • Folder Structure
    • Git: Getting Started
      • Installing a Git Client
      • Creating a Local Repository
      • Making Changes and Merging them
      • Git Wrap Up
    • Git: Github
      • Creating a New Account
      • Creating a Repo on Github
      • Cloning and Forking
      • Cloning a Repo from Github
      • Pushing Changes to Github.com
      • Github: Adding a Collaborator
    • Command Box
      • Downloading the Software
      • Unzipping and Running the Software for the first time
      • Using CommandBox And Installing the UML-Info package.
      • Setting Up Your Local Server
      • Last Step
    • IDE ( Integrated Development Environment )
      • VS Code
      • IntelliJ
    • Journal
  • Week 2: Review of HTML and CSS
    • Making Point In Time and Working Branches
    • Opening our Project from Week 1 and Starting our BoxLang server
    • HTTP Calls and Requests
    • Making a Static Website Dynamic
    • Creating The Management Index.bxm
    • Creating An HTML Form with Bootstrap
    • Last Steps
  • Week 3: Working Forms and our First Table
    • Data Types
    • Case Types and Naming Conventions
    • Database Tools and Your First DB
      • Installing MySql WorkBench
      • Connecting to your MySQL database
      • Creating Your First Table
    • Working Forms
      • Separation of Concerns
      • Configuring Our Site To Use Our Database
      • Capturing Your Form Data
      • Creating Our Server Side Logic
  • Week 5: SQL and Modelling
    • Our Project And Its Users
    • Introduction to SQL
    • Completing our Articles page.
      • Adapting manageArticles.bxm to display existing articles in the database
      • Completing ManageArticles.bxm to Edit Existing Articles.
      • Making Active Articles Appear On The Public Page
  • Week 6: Managing Books
    • Introduction To Modelling
    • Our Data Models
    • Adapting Our Management Page To Be Multi-Tool
    • Creating The Manage Books Page
    • Adding Search To Our Front Index Page
  • Week 7: Working with Selects, Files, WYSIWYG and more.
    • Adding WYSIWYG Capabilities
    • Adding WYSIWYG to the Manage Books Tool
    • Adding Images To Our Store
    • Creating Our Publisher Select Control
  • Week 9: Joins and Better Searching
    • Displaying Our Publisher
    • Searching By Publisher
    • Creating a Browse by Genre
      • Adapting Our Database
      • Building our Queries: Part 1
      • Assigning Genres to a Book in our AddEdit.bxm page
      • Building our Queries: Part 2
      • Building the GenreNav.bxm
      • Adapting The Details.bxm Page to Search By Genre
  • End of Project Checkllist
Powered by GitBook
On this page
  • Background
  • Creating a Free Account at https://ckeditor.com/
  • Adapting our manageArticles.bxm page
  1. Week 7: Working with Selects, Files, WYSIWYG and more.

Adding WYSIWYG Capabilities

PreviousWeek 7: Working with Selects, Files, WYSIWYG and more.NextAdding WYSIWYG to the Manage Books Tool

Last updated 2 months ago

Background

WYSIWYG (pronounced Wiz-E-Wig) stands for What You See Is What You Get. It is a tool that a non-programmer can use to edit text, format it like you can in a word processer and the HTML is written behind the scenes automatically.

One of the most popular WYSIWYG tools is called CKEDITOR, an open source library written in JavaScript,that allows a form element to be turned into a WYSIWYG editor. We are going to use CKEDITOR in two places

  1. The Manage Articles page (manageArticles.bxm)

  2. The Manage Books (addEdit.bxm)

There are three initial steps to adding this feature to our Manage Articles tool.

  1. Creating a free account at

  2. Adapting our manageArticles.bxm page.

  3. Retrieving the free license key from

Creating a Free Account at

In the recent past, CKEditor has changed from being an open source first to a paid product which happens to have a free version. It is still a good product and we can use the development license for class without having to pay a license fee.

Visit https://ckeditor.com and click on either Register for a license key today or Start a free trial. You will need to fill out some info and choose a password. YOU SHOULD NOT HAVE TO PUT IN ANY PAYMENT INFORMATION.

Adapting our manageArticles.bxm page

  1. Open bookstore/manage/index.bxm

  3. Copy the link to the CSS file and paste it into the <head>...</head> tag.

  4. Copy the link to the JavaScript file and paste it into the head tag as well.

  5. Open bookstore/manage/manageArticles.bxm

  6. Copy the JavaScript command to actually change a textarea tag to our WYSIWYG tool. Make sure that the code you copy from the website looks like it does below. If there is a <![CDATA[..../> or similar tag surrounding the JS code, make sure you remove it.

  8. Find the id of the textarea element on your manageArticles.bxm page and replace where it says 'editor' in the script above with the id from your textarea.

  9. Make sure your server is running and open your bookstore/manage/ area. Choose an article to edit. Did it work?

  10. After editing an article and adding some bold elements or chaging the font color using the controls in the toolbar which should appear, save is and look at that article on the front page of the public area. Does it look differently?

Visit .

Visit (you'll need to sign in first). Go to License Keys and copy the developer license. Paste it in the script above where it says <YOUR_LICENSE_KEY>

https://ckeditor.com/
https://portal.ckeditor.com/
https://ckeditor.com/
https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/cloud/quick-start.html
https://portal.ckeditor.com/