search

PatrickFrankAIU / GradeManagerProject

Grade Manager project for ITWEB 210 and ITWEB 220, 2402B Term
0 stars 0 forks source link

Implement TinyMCE for Grade Feedback #5

Closed PatrickFrankAIU closed 2 months ago

PatrickFrankAIU commented 2 months ago

image

TinyMCE is a freeware JavaScript module that can be added to any project. Like SASS, it uses an HTML script tag that connects to a library through a Content Delivery Network (CDN) with this call: (Your API key goes where it says "no-api-key".)

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

You create a text area like this: (This is just a normal textarea. TinyMCE changes the normal functionality of any textarea in your HTML.) 

<body>
    <textarea id="mytextarea">Hello, World!</textarea>
</body>

This is the JS call to initialize the module: 

tinymce.init({
    selector: '#mytextarea'
});

Customization is handled through this code: 

    tinymce.init({
        selector: '#mytextarea',
        plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak',
        toolbar_mode: 'floating',
        toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link image'
    });

Questions to investigate:

More info can be found here: https://www.tiny.cloud/

pmjohnston21 commented 2 months ago

@Aidan-Murphy-22 @srreed3 I wanted to make sure y'all are seeing the console errors in the dev tools; not sure if it helps you diagnose or fix the issues you're having. I hadn't looked at them at all until now and though y'all might not have, either. Going to try to add a screenshot here:

image

After you add a grade, you get an additional error, Rose:

image
PatrickFrankAIU commented 2 months ago

@Aidan-Murphy-22 @srreed3 I wanted to make sure y'all are seeing the console errors in the dev tools; not sure if it helps you diagnose or fix the issues you're having. I hadn't looked at them at all until now and though y'all might not have, either. Going to try to add a screenshot here: image

After you add a grade, you get an additional error, Rose: image

Good observation, Penny! Some of the errors I'm seeing at my end are caused by personal browser settings (restrictions) and plugins like ad-blocking software. But others suggest that we may have some minor issues still to resolve. We'll take a closer look at it tonight in class. :-)

-- Pat

PatrickFrankAIU commented 2 months ago

Here's a head start from a couple things I looked up via ChatGPT: "Print from URL" lets you add content from a URL into your message in the TinyMCE window. "HR from URL" refers to adding a horizontal rule (HTML's "hr" tag), meaning you can grab an HR tag from another website that's being dynamically created by some process on that site.

These might be used when you're supporting a scripted process that brings preformatted data from another site into a TinyMCE window. It sounds like these features may not be working at the moment, but I noticed the code they use requires Fetch, which you may be familiar with from the 300 class.

For our purposes on this project they're probably not something we'd implement, so I wouldn't worry about it. But if we can find a simple fix then that'll be useful experience to have, so it might be worth a short investigation. You're both entering a time when you're going to have to start "picking your battles" on the learning front, just because there is so much info out there that you can leverage in your work now. But remember: Working developers don't know everything either. The true skill of a coder is in their ability to learn and adapt on the fly. So in a sense this is "bait" -- it might be worth the time... or it might not be! So think about setting a time limit on your investigation.

We'll talk about it tonight in class. :-)