Instantiating TinyMCE

Dylan Just · Dylan Just · commit f700a90a4f96 · 2020-09-04T15:11:06.000+10:00
diff --git a/notes.txt b/notes.txt
@@ -0,0 +1,10 @@
+Ideas for more exercises:
+
+Millie suggested:
+Basic “how to set up custom UI” exercises. We do it occasionally for actual development, but we do it a lot for
+support cases, creating demos, etc. And I think it would be a good introduction to the wider concepts of Alloy and such.
+E.g. custom toolbar buttons are in https://www.tiny.cloud/docs/ui-components/toolbarbuttons/ and
+https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/. And menu items are at
+https://www.tiny.cloud/docs/ui-components/menuitems/
+
+
diff --git a/package.json b/package.json
@@ -3,7 +3,6 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
-  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc -b"
@@ -26,7 +25,11 @@
   "devDependencies": {
     "@ephox/bedrock-client": "^9.6.1",
     "@ephox/bedrock-server": "^9.6.3",
+    "awesome-typescript-loader": "^5.2.1",
     "fast-check": "^2.2.1",
-    "typescript": "^4.0.2"
+    "typescript": "^4.0.2",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
   }
 }
diff --git a/src/main/html/Part1Exercise1.html b/src/main/html/Part1Exercise1.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <title>Exercise 1 - instantiating TinyMCE</title>
+
+  <!--
+  Instantiating TinyMCE is one of the first things TinyMCE users need to do, so it makes sense for this to be
+  our first exercise.
+
+  TODO Head over to https://www.tiny.cloud/ and sign up for an API key. Replace the 'no-api-key' with your api key in the below script tag.
+  -->
+  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
+</head>
+<body>
+
+<!--
+This project has webpack configured. Run `yarn webpack-dev-server` and navigate to
+ http://localhost:8080/src/main/html/Part1Exercise1.html to view this page.
+
+tinymce.init is the most important API function of TinyMCE. In its most basic form, you specify a CSS selector for an
+element, and a TinyMCE editor appears where the element was:
+-->
+<textarea id="editor1"></textarea>
+<script>tinymce.init({ selector: '#editor1' });</script>
+
+<!--
+If you inspect the DOM in your browser, you'll notice that the textarea has been hidden, and editor dom elements created
+beside the textarea.
+
+Since a selector can match multiple elements, you can use tinymce.init to create multiple editors.
+TODO In the below script tag, instantiate TinyMCE editors in the below
+-->
+<textarea class="editorSet"></textarea>
+<textarea class="editorSet"></textarea>
+<script></script>
+
+
+<!--
+TinyMCE is very customizable. Let's customize it. I'll throw you in the deep end a bit, with just some requirements and
+documentation, as this is what our customers start with.
+
+Docs can be found here:
+https://www.tiny.cloud/docs
+
+List of toolbars items can be found here:
+https://www.tiny.cloud/docs/advanced/editor-control-identifiers/#toolbarcontrols
+
+
+TODO Instantiate a TinyMCE editor with no menu bar, no status bar, and toolbar buttons to do the following:
+- make text bold
+- insert a table
+- make the editor full screen
+- view/edit source code
+
+Note: you'll need to add some plugins for these to work.
+-->
+
+
+</body>
+
+</html>
diff --git a/src/main/ts/Webpack.ts b/src/main/ts/Webpack.ts
@@ -0,0 +1 @@
+// Dummy entry point for webpack. See webpack.config.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+// Dummy entry point for webpack. See webpack.config.js`