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' });
            });
       }

    });

No comments:

Post a Comment

We are moving

We are moving this blog to our new blog site: https://ciysys.com/blog/nodejs.htm