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!
Related
Hopefully someone will be able to assist.
I am creating an online submission form in HTML, with the ability to add upload an attachment. The resulting data ends up in a Notes / Domino database.
I have managed to get the HTML form working, with the upload button. However, when viewing the received data, instead of having an attachment in the rich text field of the Notes form, I end up with the contents of the attachment. This is fine where it is a text document. However, when it is a Word / Excel doc, it ends up as a load of gibberish.
Can anyone suggest what is wrong ?
Here is my code :
<form method="post" enctype="multipart/form-data" action="/webquote.nsf/gendoc?createdocument" >
Attachment: <Input Type="file" NAME="Attachments" MAXLENGTH=50 ALLOW="text/*" >
Thanks,
Simon
Here are two lines of code from a production database I built a while ago:
<form name="SubmissionForm" id="SubmissionForm" action="/<Computed Value>/AgencySubmission?CreateDocument" method="post" enctype="multipart/form-data">
<input type="file" name="%%File.1">
It works for me. It may not be exactly what you look for, the file is not attached into a Rich Text field, but you can always detach are re-attach it on the server after submission.
I have also built file uploads using jQuery and Ajax, so the page does not have to be reloaded.
The prefered way for this kind of stuff nowadays would be to directly design an xPage. Does that seem doable, or do you have some constraints, like the HTML being designed somewhere else and the integration with Domino later, almost at last resort ?
From the look of your <input> it would look like we are in the later situation.
What's with the "allow" attribute ? I can't find any reference. Did you mean "accept" ? And what about the value of "text/*" ? This could be the source of the giberish, as the browser and/or Domino would interpret the input as text rather than a blob. A value of "multipart/form-data" would perhaps be more appropriate, but no "allow" or "accept" attribute at all works fine too.
For some reasons, Domino being Domino, the "name" attribute of your <input> element must be "%%File.1", in short simply
<input type="file" name="%%File.1">
Your <form> element is spot on.
The last thing to worry about is that your Domino server will see the file comming out of seemingly nowhere and balk with an error 500 "HTTP Web Server: File Upload Not Allowed Exception". You'll need to talk to your Domino admin and have him set the following parameter in the server's notes.ini :
DominoDisableFileUploadChecks=1
Then you're all set.
Hope this helps.
Create a Notes Form (a Form design element), add a File Upload control.
Add a Web Query Save agent (see Form design ouline).
In that agent, get the NotesDocument notessession.documentContext
This will contain the content of your uploaded file, and any other field son your Form, split into Notes items.
You can get the attached file with notesdocument.embeddedobjects to locate all attachments, and/or notesdocument.getAttachment (if you know the filename).
That's perhaps the oldskool way of doing it, but it's tried & tested, and what Domino is expecting you to do.
I have a file with a textarea (named "Resolution support") in which you can explain how to solve a problem. My problem is that a user would be able to add a picture for a better explaining. If he copy/paste or he has to click and drag or anything i don't care, he HAS TO be able to put a picture into the textarea.
I wondered if another textbox that can do this would exist and what Type does the textbox has to be in PhpMyAdmin.
My textarea :
<textarea name="Escalade" class="longInput" cols="80%" rows="19" wrap="hard">
</textarea>
Without some kind of JavaScript WYSIWYG library this is not possible as vanilla textarea only takes text (clue is in the name).
I assume that you are viewing the submissions in phpMyAdmin which is an interface onto a MySQL database. It is good for developing stuff but not so great as an admin user interface long term. What you are asking about are called transformations.
Here are some tutorials on storing images in a database:
http://www.hockinson.com/programmer-web-designer-denver-co-usa.php?s=47
http://w3schools.invisionzone.com/index.php?showtopic=48068
How to store file name in database, with other info while uploading image to server using PHP?
Here are some lists of WYSIWYG editors:
http://www.sitepoint.com/html5-wysiwyg/
https://github.com/cheeaun/mooeditable/wiki/Javascript-WYSIWYG-editors
Those phpMyAdmin transformations:
http://docs.phpmyadmin.net/en/latest/transformations.html
That is about as much help as can be offered to you without seeing the PHP code behind the form at the very least. Hope this helps.
If someone is looking for an answer, I had asked my profesor and he answered that what I was looking for is a "Rich Text Editor". I'm using ckeditor with the plugin prgfilemanager. It allows me to insert pictures but I cannot copy/paste them which is pretty annoying...
You can try it here http://ckeditor.com/demo I hope it will help you if you have the same problem that I had :)
While it is true that you cannot use a textarea, the answer is very simple. You can use a content editable div, grab the contents as html and write it to a databae using AJAX and PHP.
Just name a div like this:
<div class="my_article" contenteditable></div>
and pass the contents on the click of a button into a JS variable and then pass that into PHP using AJAX.
var content1 = $('.my_article').html();
If anyone needs further help please comment and I'll be happy to obligue.
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.
I initially set out to learn how to handle "ajax-ready file uploads"; I found, and comprehend, one of the main concepts: it's not possible as ajax, but you can submit a form with the target set to a hidden iFrame's id [1]. That seems to be generally accepted by the community and compatible with all browsers. Is that an accurate assessment?
My question is: what are the pitfalls to this approach? Because if there are none, it seems to me that every "ajax-ready post" could be done in this same fashion. Remove the file upload component and this approach versus, say, a jQuery.post() approach appear to have identical outcomes.
In all the questions and resources I've researched, I've only been able to find "solutions" for handling my initial issue. I've been unable to find any sort of "pro v. con list" or "pitfalls to this approach" anywhere regarding a form targeting an iFrame; if you know of one, please feel free to share it!
[1] HTML Example:
<form method="post" target="take_the_reload">
...
</form>
<iframe class="hide_me" id="take_the_reload" name="take_the_reload"></iframe>
Much obliged,
Beez
References: Just a couple of the resources I've used:
http://www.joshclarkson.net/blog/file-uploads-in-a-hidden-iframe-using-jquery/
Firefox form targetting an iframe is opening new tab
http://terminalapp.net/submitting-a-form-with-target-set-to-a-script-generated-iframe-on-ie/
javascript: submit form in an iframe...help
http://www.openjs.com/articles/ajax/ajax_file_upload/
When I first started AJAX (before jQuery and Prototype came along) I used to do exactly that with all my forms....just post them to a hidden Iframe. It was easy and painless.
The drawbacks of form-post:
It's not really "pure" AJAX (file uploads aside). I'm sure all the DOM manipulation in the iframe for the result is slower than just getting back a response via XHR.
The error handling is more difficult - you have to look at what the server puts in the Iframe as a result
Things are moving towards JSON-based data handling which forms alone don't do
Sometimes you want to do something "in the middle" between the form and the server such as some field mapping or including other client-side data
If we type something in the text area and press submit button, the values should be displayed on the same page under that. How to do that?
And make stay permanently on the page
You need javascript.
<form onsubmit="document.getElementById('output').innerHTML = document.getElementById('tarea1').value;return false">
<textarea id="tarea1"></textarea>
<input type="submit" />
</form>
<div id="output"></div>
You need some server side code, asp.net or PHP
Test for Post/Get parameters
Echo text in response
If you need to learn about forms and server side basics w3schools.com is the best place to start
In order to store something permanently, you need to have a server running your webpage. You can't just create an HTML file that can get changed on the fly and have those changes become permanent. You'll need to learn a server language (PHP for example) and have a server (like Apache) that can display your page.
Is this what you're intending? to make an actual site, not just a webpage?
Add a piece of JavaScript and attach it to onClick of the submit button. In the JavaScript, copy the value of the text area into the new place (assign the text to innerHTML) and also call submit() on the form.