Saving changes made when editing with /wysihtml5 - html

I am looking for some guidance on how to save editing done using /wysihtml5.
I have googled using several different combinations of search terms but virtually all the hits I get are github. I have looked through the examples on that site but I can't find anything that explains how the changes can be saved once a user edits a page.
I do have some php and sql knowledge but would like some pointers to exactly what I need to do to get changes made using /wysihtml5 saved. The other instructions appear very comprehensive so I wonder why this aspect seems to be missing.
Can anyone help please?
Many thanks
Brenda

According to the editor's Getting Started page, it works by replacing a regular <textarea> with the rich editor:
wysihtml5 takes a textarea and transforms it into a rich text editor.
The textarea acts as a fallback for unsupported browsers (eg. IE < 8).
Make sure the textarea element has an id, so we can later access it
easily from javascript. The resulting rich text editor will much
behave and look like the textarea since behavior (placeholder,
autofocus, …) and css styles will be copied over.
Please note: The textarea will always hold the editor’s generated
markup. Therefore wysihtml5 integrates smoothly with forms.
So, the editor's content will always be available as the value of the textarea, and you can use it as you would with a regular form element (submit the form, or get the contents with JavaScript and send it to PHP using Ajax).
For example, consider you apply the editor to the following:
<form action="somescript.php" method="POST">
<textarea id="wysihtml5-textarea" name="wysihtml5-textarea"></textarea>
<input type="submit" value="Submit form">
</form>
If you submit the form by clicking the button, your php script will receive the contents on $_POST["wysihtml5-textarea"] (change the name of the textarea to set the desired key on $_POST).
If you want to get the value using JavaScript, select the <textarea> by ID, then access the element's value:
var textarea = document.getElementById("wysihtml5-textarea");
alert(textarea.value);
Then you can pass that value to PHP using Ajax if you want. The PHP/SQL implementation for actually saving the data is up to you, the editor's code just takes care of providing a rich text editor, and formatting features.
Note: I never used that editor, so my answer might be not be 100% accurate.

Related

How can I get our WYSIWYG editor to stop removing HTML comments, CSS classes and inline styles?

We currently use wysihtml5-rails to let our users edit emails before they are sent but this is not working out so well for a few reasons.
I need the comments to allow for Outlook specific comments like these . All comments are being removed, currently.
I also need the CSS classes to be untouched as the editor content will be a pre-generated email that includes CSS classes. Our editor will only keep classes that are whitelisted but this is annoying as we need to update that list with every change.
Same goes for inline styles. Some of the styles in the generated email are inline instead of in classes. Those need to be kept but they are being removed.
Is there any way I can get our editor to work this way?
I found a solution but it's hacky.
I realized that the raw HTML was being stored on the page in a hidden textarea tag. Interestingly, all the elements that I needed (CSS classes, comments) were still there. But when submitting the form, the value of this textarea was replaced with the parsed results from the editor which gets sent to the server. All the comments and classes are gone from this text.
The solution was then to create a second field that takes the unparsed value from the WYSIWYG editor and sends that along. Easy in rails but just making this new field part of a form. Then the controller can choose which value to take. In my case, I renamed the existing message field to parsed_message. Then added a new message field which will hold the unparsed message.
The WYSIWYG editor we are using allows this by having a method that can be called at any time: window.email_editor.getValue(). Here the email_editor is the editor instantiated by the javascript on the page.

Using various inputs of a form in mailto-body

I'm helping someone set up a website, and we're limited to only CSS and HTML. No JavaScript, PHP, or other tools.
We're setting up a simple mailto: form (knowing very well this is old and obsolete), and part of it is working fine. Setting the subject with name="subject" and the body with name="body" allows submitting the text-input and the textarea-input to Outlook from a submit-button.
Now, we're trying to add a dropdown list to the form, so the user can choose the type of request to be handled, adding this to the body of the mail; but have no clue as to how to do this without recurring to a third language.
tl;dr: How to append a string to a GET form without adding a new & in raw HTML?
Any help will be appreciated.
This link provides some guidance as to how the link should look, setting each form input to a new line of the body parameter: mailto link multiple body lines
That can't be done.
If you're going to process the data from the form you need a language other than css and html.
HTML & CSS are simple languages. They aren't able to process information, rather they are instructions which are processed by the browsers.
You will need some kind of traditional/scripting language if you're going to retrieve & work with the data from the web-form.

Why bootstrap form validation doesn't work on one webpage?

I have 3 web pages each page contains 1 bootstrap form. The forms are structured the same, but each has a different number of input fields and order in which they appear in the form.
The HTML page files, local JS files are all in the same folder(no sub-folders). The <head> on each page has the same assests.
The non-functional form has a text area and button that the other forms do not. I have tried commenting these out, but that didn't resolve the problem. I have tried removing the link to local CSS, that too made no difference in the issue.
When I check the html files with W3 validator I get one Error and 2 Warnings.
Error: Element legend not allowed as child of element form in this context.
Warning: The date input type is not supported in all browsers. Please be sure to test, and consider using a polyfill. Commenting out the legend makes no difference.
I do have a date field in both the working and non-working forms.
When I look at dev tools in Chrome I don't see any errors.
I have tested on both Chrome and FireFox, so I don't think it is a browser specific issue.
Note this is all done on local machine and all coded using notepadd++.
I know this would be a tremendous amount of code to post for review, but if required I will do so. I was hoping someone would have troubleshooting suggestion.
have created 2 jsbin. first link is page with non working form. Second link is page with working form. first link is https://jsbin.com/xuwuziy/edit?html,css,js,output . Second link is https://jsbin.com/luqatel/edit?html,css,js,output
In the first JSBin: $('#cruise1').bootstrapValidator(.... There's no element with id "cruise1" in the page. Instead your form's ID is "quoteForm". Therefore the validator does not bind to it because it can't find an element with the "cruise1" ID.
Since you're including the same validation JS on both pages, in order to get the same code to validate both forms, you have to use a selector that can match to both forms.
There are two possible, simple solutions.
1) Give both forms an id of "cruise1". However, this may not be very descriptive of your quote form.
2) Give both forms the same class, and use that as the selector to initialise the validator. e.g.:
The form tags:
<form class="form-horizontal validatableForm" id="quoteform">
and
<form class="form-horizontal validatableForm" id="cruise1">
And the validator intialisation:
$('.validatableForm').bootstrapValidator( //...etc
This will initialise the same validation on all forms which match the given selector (i.e. all forms with that class). In any one page, in your situation, you might only have one form loaded with that class, but it means it will work when the code is included in both pages, and if for any reason you had two forms with that class loaded in one page it would bind those as well.
One last note, since you mentioned you were new to this: I hope you are implementing the same validation rules in your server side code (the code which deals with the submitted form data). Client-side validation such as you've used is very nice for user experience, but it's not secure - any user, especially a malicious one, or an automated spam-bot, can easily manipulate or bypass the JavaScript validation (most simply, by just turning off JavaScript) and try to send invalid or problematic data to the server. You cannot trust anything which comes from the client-side and must re-validate everything in order to protect your application and database.

Post article with ckeditor

I am new in using ckeditor. I have installed ckeditor. In the editor, showed in my HTML page, i can write article there. But i don't know how to save it and show the article in my HTML page. here is my html code:
<form method="post">
<p>Editor:
<textarea class='ckeditor' id="ckeditor" name="ckeditor" row="10" cols="80">
</textarea>
<script type="/text/javascript">
CKEDITOR.replace('ckeditor');
</script>
</p>
<p>
<input type="submit">
</p>
</form>
You need to have a back-end of some sort. CKEditor works in the browser, so what you need to do is take that data, post it to your server and save it there. Your next step is to find out how what server side languages can you use - such as PHP. You need to learn how to build a system on your server that receives the data. There are various ways of doing this and they depend a lot on what kind of server you have.
Learn how to build a system with your server side language that receives POST and GET requests and saves them into a Database or a File. I recommend a Database, but that takes a little more learning I'm afraid.
You can get the data from CKEditor using JavaScript. Inside your form you need to add a small bit of JavaScript to update your textarea with the value of the editor. This is because CKEditor works by replacing the textarea with an iframe element - and thus the changes made in the iframe are not automatically applied to the textarea. You will need to learn how to attach a click event handler to your submit button and before submitting you need to run the following code that I copied from this other StackOverflow question.
for(var instanceName in CKEDITOR.instances) {
CKEDITOR.instances[instanceName].updateElement();
}
Good luck, have fun!

How to create readonly textbox-like structure using html (div/span) and css?

I have a web page with a read-only text box which shows some HTML code:
<input type="text" readonly="true" value="<table>...</table>"/>
There is also submit button, which causes page post back and XSS validation to trigger. I don't want to turn off XSS.
I also tried disabled="disabled", but then the user is not able to copy the text in the text box.
So I thought that using div and span which can give same look and feel would suffice and negate the need for turning off the validation. While trying this, I am struggling to restrict the string in one line. As in text box, it is a single row with column size and text is shown nicely, we can also copy text.
Is there a better solution for what I'm trying to do?
If I understand you correctly you're trying to show some example code in a web interface that is formatted for easy consumption by the end user.
As a general rule, you should wrap code snippets in <pre></pre> tags, I would then suggest having a go at using: http://alexgorbatchev.com/wiki/SyntaxHighlighter to format the code as if you were viewing in an IDE.
This will prevent you from having to turn of the XSS checker.
you could use <pre> tags
check this link