Implementing a rich text editor. Local CSS and JS files cannot be found

Hi,

I’m now practicing with Xojo for a few months (mostly web projects). Currently I’m studying and learning from the javascript SDK material.
By doing so I try to implement just another jquery rich text editor:
Downloaded from: (https://www.jqueryscript.net/download/Rich-Text-Editor-jQuery-RichText.zip)

A simple example of how to implement this is as shown below (html example).

My question is related to css and the javascript files that are copied into the resources folder and how to refer to them:
Q: I have tried it on many ways, but until now I have trouble finding where the css and js files are located when the application is compiled.
Could you explain me where the find more info in the documentation or juist how it works or where to see it using a tool?

Note: although I have specified in the build settings, Destination: Resource folder. It seems only to work if I specify the framework’ folder.
Files from the internet never give problems, but local files does give my a headache.
In my WebCntrlWrapper method ‘HTMLHeader’ ‘/framework’ I have specified:

if not IsLibraryRegistered(CurrentSession,JavascriptNamespace,"jquery") then RegisterLibrary(CurrentSession,JavascriptNamespace,"jquery") dim sa() as string sa.Append "<link href=""https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css"">" sa.Append "<link href=""framework/site.css"">" sa.Append "<link href=""framework/richtext.min.css"">" sa.Append "<script src=""https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js""></script>" sa.Append "<script src=""framework/jquery.richtext.js""></script>" Return Join(sa,EndOfLine.UNIX) End If

A simple example how to implement this RTE in html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>RichText example</title>

        <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css">
        <link rel="stylesheet" href="css/site.css">
        <link rel="stylesheet" href="../src/richtext.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="../src/jquery.richtext.js"></script>
        
    </head>
    <body>

        <div class="page-wrapper box-content">
            <textarea class="content" name="example"></textarea>
        </div>

        <script>
        $(document).ready(function() {
            $('.content').richText();
        });
        </script>

    </body>
</html>

Using the new framework a file copied in the application resource folder can be located using:
Xojo.IO.SpecialFolder.GetResource

Use two webfile referring to these files and use the webfile.url property as the value to send to the browser.

Another way is to store the CSS and HTML in two string constant and create a webfile using these constants.

Forum for Xojo Programming Language and IDE. Copyright © 2021 Xojo, Inc.