TEXT_WIDGET/index.html at main · SmartOrgDevelopment/TEXT_WIDGET · 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Enhanced TEXT Widget</title>
    <link
      href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css"
      rel="stylesheet"
    />
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-top: 50px;
        margin: 0;
        height: 100vh;
        background-color: #f9f9f9;
        font-family: "Helvetica Neue";
      }
      #workspace {
        width: 60%;
        height: 50%;
      }

      .editor_format {
        margin-top: 0px;
        padding-top: 0px;
        margin-bottom: 30px;
        /* padding: 30px; */
        height: 150px;
      }
      h4 {
        font-size: 18px;
        font-family: "Helvetica Neue";
        font-weight: 500;
        margin-bottom: 10px;
      }
      p {
        font-size: 14px;
        /* font-style: italic; */
        font-weight: 450;
        margin-top: 5px;
        margin-bottom: 5px;
      }
      h3 {
        text-align: center;
        font-size: 24px;
        font-weight: 500;
        margin-top: 10px;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <!-- Create the editor container -->
    <div id="workspace">
      <h3>Strategic and Project Description for Breath Strips</h3>
      <h4>Strategic Description</h4>
      <p>
        Describe the strategy that is being pursued for this project Lorem ipsum
        dolor sit amet consectetur adipisicing elit. Voluptas similique iusto
        corrupti quod cum minima ab cumque sunt, harum deleniti veniam nulla in.
        Officia, possimus. Quo excepturi labore velit non!
      </p>
      <div id="editor1" class="editor_format">
        <!-- <p>Hello World!</p>
        <p>Some initial <strong>bold</strong> text</p>
        <p><br /></p> -->
      </div>
      <h4>Project Description</h4>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi sequi
        debitis voluptatum ratione sint praesentium, nihil vero, officia
        recusandae officiis veritatis consequuntur rem voluptatibus
        perspiciatis, assumenda reiciendis placeat culpa nesciunt.
      </p>
      <div id="editor2" class="editor_format"></div>
    </div>

    <!-- Include the Quill library -->
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>

    <!-- Initialize Quill editor -->
    <script>
      const toolbarOptions = [
        [{ header: [false, 1, 2, 3, 4, 5, 6] }],
        ["bold", "italic", "underline", "strike"], // toggled buttons

        [{ list: "ordered" }, { list: "bullet" }], // lists
        [{ indent: "-1" }, { indent: "+1" }],
        [{ align: [] }], // text alignment
        [{ color: [] }, { background: [] }],
        [{ script: "sub" }, { script: "super" }],
        ["clean"],
        [("blockquote", "code-block")],
        ["link", "image", "video"], // link and image
      ];

      const quill = new Quill("#editor1", {
        theme: "snow",
        placeholder: "Enter the strategy description here...",
        modules: {
          toolbar: toolbarOptions,
        },
      });

      const quill2 = new Quill("#editor2", {
        theme: "snow",
        placeholder: "Enter the project description here...",
        modules: {
          toolbar: toolbarOptions,
        },
      });
    </script>
  </body>
</html>