Topic: wysiwyg div content to text area in form

goodfellastech priority asked 1 year ago


Expected behavior I would like to know how to get the content from inside the div of the wysiwyg editor provided into a text area on a form.

Actual behavior I can edit the wysiwyg perfectly, but my brain for some reason is stalling on how to use Javascript to get it to copy over. I am guessing I need to write a function that is called on submit, but ideally I would like it to be triggered on a keyup situation.

Resources (screenshots, code snippets etc.) The existing form I have. All fields are colling and working properly.

                <form action="/blog" method="POST" enctype="multipart/form-data">
                <div class="form-outline mb-4">
                  <input type="text" id="title" class="form-control" name="title" required>
                  <label for="title" class="form-label">Title</label>
                </div>
                <div class="row">
                    <div class="col-6">
                        <div class="form-outline mb-4">
                          <input type="text" id="tag" class="form-control" name="tag" required>
                          <label for="tags" class="form-label">Tag</label>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-outline mb-4">
                          <input type="text" id="icon" class="form-control" name="icon" required>
                          <label for="icon" class="form-label">Font Awesome Icon (including tags)</label>
                        </div>
                    </div>
                </div>
                <div class="row m-3">
                    <div class="col-6">
                        <div class="text-center">
                            <label class="form-label">Color</label>
                            <select class="select" name="color" id="color" required>
                              <option value="gradient-blue">Blue Gradient</option>
                              <option value="gradient-green">Green Gradient</option>
                              <option value="gradient-red">Red Gradient</option>
                              <option value="gradient-orange">Orange Gradient</option>
                              <option value="gradient-black">Black Gradient</option>
                              <option value="bg-primary">Blue</option>
                              <option value="bg-secondary">Purple</option>
                              <option value="bg-success">Green</option>
                              <option value="bg-danger">Red</option>
                              <option value="bg-warning">Orange</option>
                              <option value="bg-info">Light Blue</option>
                              <option value="bg-light link-dark">White (Black Text)</option>
                              <option value="bg-dark">Black (White Text)</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-center">
                            <label class="form-label">Featured?</label>
                            <select class="select" name="featured" id="featured" required>
                              <option value="no">No</option>
                              <option value="featured">Featured</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="wrapper mb-4">
                    <div class="wysiwyg" data-mdb-wysiwyg="wysiwyg" id="wysiwyg">
                    </div>
                  </div>
                <!--TEXT AREA-->
                <div class="wrapper mb-4">
                    <div class="form-outline">
                        <textarea id="blog-body" class="md-textarea form-control" rows="2" name="postdata"></textarea>
                        <label class="form-label" for="postdata">Blog Content</label>
                    </div>
                </div>
                <div class="form-outline mb-4">
                  <textarea id="excerpt" class="md-textarea form-control" rows="2" name="excerpt" required></textarea>
                  <label for="excerpt" class="form-label">Excerpt</label>
                </div>
                <div class="form-outline mb-4">
                  <textarea id="keywords" class="md-textarea form-control" rows="2" name="keywords" required></textarea>
                  <label for="keywords" class="form-label">Keywords</label>
                </div>
                <div class="form-outline mb-4">
                  <textarea id="description" class="md-textarea form-control" rows="2" name= "description" required></textarea>
                  <label for="description" class="form-label">Meta Description</label>
                </div>
                <div id="dnd-accept-formats" class="file-upload-wrapper">
                  <input
                    type="file"
                    class="file-upload-input"
                    data-mdb-accepted-extensions="image/*"
                    data-mdb-file-upload="file-upload"
                    name= "uploadedImage"
                    id= "uploadedImage"
                    required
                  />
                </div>
                <!-- SUBMIT BUTTON -->
                <div class="text-center my-4">
                    <button type="submit" class=" btn btn-rounded btn-success white-text text-uppercase">create post</button>
                </div>
            </form>

Kamila Pieńkowska staff answered 1 year ago


I've prepared a code snippet to show you how to get code from wysiwig: https://mdbootstrap.com/snippets/standard/kpienkowska/5152552


peterallerleisure priority commented 1 year ago

Hi. I have the same issue, and the code snipped is not working anymore. Can you provide me with a new snippet?


Kamila Pieńkowska staff commented 1 year ago

For easier query, I suggest setting NAME to wysiwyg textarea: https://mdbootstrap.com/snippets/standard/kpienkowska/5739344#js-tab-view



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.2.0
  • Device: mac OSX
  • Browser: chrome
  • OS: Monterey
  • Provided sample code: No
  • Provided link: No