Topic: wysiwyg div content to text area in form
goodfellastech pro premium priority asked 2 years 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>
kpienkowska staff answered 2 years ago
I've prepared a code snippet to show you how to get code from wysiwig: https://mdbootstrap.com/snippets/standard/kpienkowska/5152552
peterallerleisure pro premium priority commented a 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 a year ago
For easier query, I suggest setting NAME
to wysiwyg textarea:
https://mdbootstrap.com/snippets/standard/kpienkowska/5739344#js-tab-view
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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