tinymce-code-tutorial/src/main/html/Part1Ex1.html at db0c9a2bdcb050b72187903e7865f60d2394c178 · tiny-ben-tran/tinymce-code-tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!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/b6r7yu1n19ibkha4z0s4gdvt0l7z2mc3dzlnc780ep0uuzks/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>

<!--
This project has webpack configured. Run `yarn` to install the dependencies, `yarn webpack-dev-server` to run the server, and then navigate to
 http://localhost:8080/src/main/html/Part1Ex1.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 id="editor2" class="editorSet"></textarea>
<textarea id="editor3" class="editorSet"></textarea>
<script>
  tinymce.init({ selector: '.editorSet' });
</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.
-->
<h1>Custom Editor</h1>
<textarea id="customEditor"></textarea>
<script>tinymce.init({selector: "#customEditor", menubar: false, status: false, plugins: "fullscreen table code", toolbar: "bold table fullscreen code"})</script>

</body>

</html>