Showing posts with label TinyMCE. Show all posts
Showing posts with label TinyMCE. Show all posts
Wednesday, 14 December 2016
TinyMCE
If you allow user from uploading file, you need the following code to initialize the uploading process where '#sel_file' is "<input type='file'>":
var my_file_callback = null;
var uf = $('#sel_file');
uf.change(function (e) {
var c0 = $(this);
var f2 = c0[0].files[0];
// use XMLHttpRequest to upload the image file to the server.
//<<------//<<------//<<------//<<------
// then, show the image file on the browser.
// we need to specify the full url of the file.
my_file_callback('http://localhost/test/' + f2.name, { alt: 'you have selected a image file' });
//<<------//<<------//<<------//<<------
});
To initialize the TinyMCE:
tinymce.init({
//selector: 'textarea',
selector: '.template_div .msg_body',
plugins: [
'advlist autolink lists link image charmap anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime table contextmenu paste code'
],
toolbar: 'undo redo | bold italic underline fontsizeselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
height: '200',
removed_menuitems: 'newdocument',
relative_urls: false,
remove_script_host: false,
convert_urls: true,
file_browser_callback_types: 'image',
file_picker_callback: function (callback, value, meta) {
// get the callback reference
my_file_callback = callback;
// show the file selection browser.
$('#sel_file').trigger('click');
},
setup: function (editor) {
editor.on('init', function () {
// this will be call for the initial setup.
// call your function OR below code to set the the contents.
tinymce.get('your textarea control-id').setContent('this is my contents....', { format: 'raw' });
});
}
});
Subscribe to:
Posts (Atom)
We are moving
We are moving this blog to our new blog site: https://ciysys.com/blog/nodejs.htm
-
Overview Usually, we start developing a new system with designing database and then writing codes. If you are not a fan of ORM, you will h...
-
I'm working on an attendance audit screen which allows the user to single click to confirm the selection and double click to create a re...
-
You cannot achieve the fixed row and column with HTML + CSS. You need the Javascript as well. Below is the HTML, CSS and Javasript th...