I am building a page builder that is used like the WordPress page builder - it needs to not change any of the html that I program into the page (I am a programer and am using this - so that I can easily revision the page and it's changes while not having to deal with GIT's tools).
My reasoning in making this a wysiwyg editor is that I want to allow some of the non tech-savvy people I work with to edit some of the content (i.e. change images, fix spelling, add to the content...etc.).
I am using bootstrap-wysihtml5 (link).
Edit:
After looking through the source code it turns out I want to turn off part of the HTML Sanitizer. Obviously I would like some help in making sure my code is good, but I don't want it to remove classes/tags/...etc.
Another question with the same jist: link
Orrignal Question:
I have looked into how to do this, and have found that I can use the ParserRules. But after writing a good 25+ lines it seems to still be messing up my html.
Now I can continue and keep turning off these parserRules but I think this may not be the correct way to proceed as I will keep running into quirks of this genius system.
Is there a way to remove this so that it doesn't strip the html?
Orrignal HTML
<form action="/contact-us/send" name="contact-form" id="contact-form" method="post">
<table class="form-table"><tbody>
<tr class="field">
<td class="form-label"><label for="fullname"><span class="req"></span> Full Name</label></td>
<td class="form-input"><input type="text" name="fullname" id="fullname"></td>
</tr>
<tr class="field">
<td class="form-label"><label for="email"><span class="req"></span> Email</label></td>
<td class="form-input"><input type="text" name="email" id="email"></td>
</tr>
<tr class="field">
<td class="form-label"><label for="phone"><span class="req"></span> Phone</label></td>
<td class="form-input"><input type="text" name="phone" id="phone"></td>
</tr>
<tr class="field">
<td class="form-label"><label for="feedback"><span class="req"></span> Questions/Feedback</label></td>
<td class="form-input"><textarea name="feedback" id="feedback"></textarea></td>
</tr>
</tbody></table>
</form>
Current output HTML
<form>
<span>
<span>
<label> Full Name</label>
<input>
</span>
<span>
<label> Email</label>
<input>
</span>
<span>
<label> Phone</label>
<input>
</span>
<span>
<label> Questions/Feedback</label>
<textarea></textarea>
</span>
</span>
</form>
Current ParserRules
parserRules: {
classes: {
// (path_to_project/lib/css/wysiwyg-color.css)
"wysiwyg-color-silver": 1,
"wysiwyg-color-gray": 1,
"wysiwyg-color-white": 1,
"wysiwyg-color-maroon": 1,
"wysiwyg-color-red": 1,
"wysiwyg-color-purple": 1,
"wysiwyg-color-fuchsia": 1,
"wysiwyg-color-green": 1,
"wysiwyg-color-lime": 1,
"wysiwyg-color-olive": 1,
"wysiwyg-color-yellow": 1,
"wysiwyg-color-navy": 1,
"wysiwyg-color-blue": 1,
"wysiwyg-color-teal": 1,
"wysiwyg-color-aqua": 1,
"wysiwyg-color-orange": 1
},
tags: {
"b": {},
"i": {},
"br": {},
"ol": {},
"ul": {},
"li": {},
"h1": {},
"h2": {},
"h3": {},
"blockquote": {},
"u": 1,
"img": {
"check_attributes": {
"width": "numbers",
"alt": "alt",
"src": "url",
"height": "numbers"
}
},
"a": {
set_attributes: {
target: "_blank",
rel: "nofollow"
},
check_attributes: {
href: "url" // important to avoid XSS
}
},
"span": 1,
"div": 1,
// to allow save and edit files with code tag hacks
"code": 1,
"pre": 1,
"label": {},
"legend": {},
"textarea": {},
"html": {},
"button": {},
"select": {},
"option": {},
"iframe": {},
"form": {},
"head": {},
"object": {},
"noscript": {},
"svg": {},
"input": {},
"meta": {},
"video": {},
"canvas": {},
"source": {},
"frame": {},
"style": {},
"xml": {},
"param": {},
"audio": {},
"link": {},
"script": {},
"colgroup": {},
"comment": {},
"header": {}
}
},
I am also trying to toggle how it is removing classes (as this question asks - no idea what he's doing... but the title fits) - this seems to be controlled by ParserRules:classes; again, I think I need to turn off the whole ParserRules.
