Example of using textarea with Keditor

2braincells2go commented 7 years ago

Just stumbled across Keditor again and really like the way it is coming along, great job.

Currently using CKEditor in classroom project and have setup using textarea and some PHP to save the textarea content. I will note this is for learning in classroom only and we are not worried about security.

I had seen in closed issue that Keditor now support textareas. We have been struggling for hours attempting to get Keditor working with textarea and hoping for some input.

Our PHP looks like this:

` <?php

$filename = 'Data/test.inc';

if(file_exists($filename)){

    if(isset($_POST['write'])){

        $data = $_POST['content'];
        if($data != ''){
            $handle = fopen($filename, 'w') or die('Cannot open file:  '.$filename); 
            fwrite($handle, $data);
        } else  {
            echo "This field must contain content...";
        }
    }
}
else{
    echo "ERROR!";
}
?>`

With save button like this:

<input class="btn btn-primary btn-lg raised" id="load" type="submit" name="write" id="write" value="SAVE" />

And textarea is:

<textarea style="width:100%;" class="input-block-level" name="content" id="editor1"><?php include Data/test.inc'; ?></textarea>

Any input will be greatly appreciated. Really like to start using Keditor simply because off the drag and drop.

Cheers!

anhnt commented 7 years ago

Nice example. Glad to see it's helpful for your project

2braincells2go commented 7 years ago

Thanks @anhnt . Now if we could only get the textarea to work with Keditor. We are stuck and cannot get it save the content...

2braincells2go commented 7 years ago

Using the above setup works perfectly with CKeditor alone BUT, will not when adapted to Keditor. The text.inc is accessed but not written to.

If anyone interested in helping us out, this is what we have setup for Keditor:

`<!DOCTYPE html>

KEditor - Kademi Content Editor ` I am hesitate to ask this at Stackoverflow since did not find single reference to it there. Cannot seems to find any info on using Keditor with textareas anywhere. If asking here is wrong route, let me know and we will try to find info outside of issue area. Thanks in advance.

bradmac commented 7 years ago

Hi @2braincells2go. KEditor is pretty new so there's not much in the way of content on stackoverflow.

You get the value of the content from KEditor like this:

        var fileContent = $('#content-area').keditor('getContent');

Here's the js code we use in Kademi to save, this is from a button click event:

    btnSaveFile.on('click', function (e) {
        e.preventDefault();

        showLoadingIcon();
        $('[contenteditable]').blur();
        var fileContent = $('#content-area').keditor('getContent');
        var saveUrl = postMessageData && postMessageData.pageName ? postMessageData.pageName : fileName;

        $.ajax({
            url: saveUrl,
            type: 'POST',
            data: {
                body: fileContent
            },            
            dataType: 'json',
            success: function () {
                if (isEmbeddedIframe) {
                    doPostMessage({
                        isSaved: true,
                        resp: postMessageData.resp,
                        willClose: postMessageData.willClose
                    }, postMessageData.url);
                } else {
                    Msg.success('File is saved!');
                }

                hideLoadingIcon();
                body.removeClass('content-changed');
            },
            error: function (e) {
                Msg.error(e.status + ': ' + e.statusText);
                hideLoadingIcon();
            }
        })
    });

bradmac commented 7 years ago

If it helps, here is that code in context: https://github.com/Kademi/kademi-dev/blob/master/src/main/webapp/templates/apps/admin/contentEditor.js

2braincells2go commented 7 years ago

@bradmac thanks much for input. I will explore your suggestions and see what we can come up with.

If I may make a suggestion: why not setup example using a textarea? Asking around to more advanced people they too seemed confused on how to use.

Really like Keditor and sure it will soon become very popular:)

bradmac commented 7 years ago

Thanks! BTW, if you want to see it in action here's a vid of using keditor with dynamic components - http://www.kademi.co/blogs/kb/building-customized-analytics-dashboards/

2braincells2go commented 7 years ago

Well, unfortunately we have gotten no where with our attempts to incorporate Keditor into our classroom project. Using our PHP save method works flawless with CKEditor but after hours of trying to get working Keditor no luck.

Guess we will try again after the Holidays. Will close this.

Thanks

bradmac commented 7 years ago

Sorry to hear that. Did you try my JS above? Should only take a few mins to integrate.

2braincells2go commented 7 years ago

@bradmac Yes sir, we tried the example JS you suggested. Never it got it working with our PHP save method. Kept getting undefined errors and such. Sure it is something we were missing.

Thanks!

bradmac commented 7 years ago

Just a note that KEditor is not intended as a drop-in replacement for ckeditor, ie you do need to use js to integrate it into your form.

You get the value of the content like this

var fileContent = $('#content-area').keditor('getContent');

And then you need to do something with that. If you are posting a form you need to set that into a form input using js. Eg

$("textarea").val( fileContent );

2braincells2go commented 7 years ago

Thanks again for your input Brad, it is much appreciated.

Totally understand Keditor is not a drop-in replacement for ckeditor. Just trying to get Keditor working with what we have already thrown together. When I say "we", referring to a group of teenagers with oldest being 16 years and then me (old fellow), and I am not strong on javascript.

Another issue we face is working on a school network with tight rules/security. That is another reason we are trying to use the PHP already in place as it is approved (does not set off firewall alarms).

We placed var fileContent = $('#content-area').keditor('getContent'); in many different locations and ended up with error logs in console about not being defined. Positive it is issue with our implementation but have not given up. Just got to keep experimenting and get it right:)

Thanks much!

bradmac commented 7 years ago

Cool, sounds like a lot of fun!

One thing you might want to try is doing the post with AJAX instead of an old fashioned page form post. Thats what we do in Kademi which is probably why our code looks very different from yours. But ajax gives a much better experience to the user, and makes it easier for you as developers to implement different requirements.

That can still use the same php service you have now.

2braincells2go commented 7 years ago

Yes, need to move forward with AJAX as some point. Since I only use this whole setup to teach a little about building with Bootstrap, have not ventured into AJAX yet.

By any chance, do you have a working example of using the save function (like you speak of on Kademi)? Looking at your suggestion:

` btnSaveFile.on('click', function (e) { e.preventDefault();

    showLoadingIcon();
    $('[contenteditable]').blur();
    var fileContent = $('#content-area').keditor('getContent');
    var saveUrl = postMessageData && postMessageData.pageName ? postMessageData.pageName : fileName;

    $.ajax({
        url: saveUrl,
        type: 'POST',
        data: {
            body: fileContent
        },            
        dataType: 'json',
        success: function () {
            if (isEmbeddedIframe) {
                doPostMessage({
                    isSaved: true,
                    resp: postMessageData.resp,
                    willClose: postMessageData.willClose
                }, postMessageData.url);
            } else {
                Msg.success('File is saved!');
            }

            hideLoadingIcon();
            body.removeClass('content-changed');
        },
        error: function (e) {
            Msg.error(e.status + ': ' + e.statusText);
            hideLoadingIcon();
        }
    })
});`

bradmac commented 7 years ago

Thats our production code, but we dont have that in an example at the moment, sorry. I'll try to knock one up over the holidays. Although all our examples are client side only so we probably wont have an actual server to use it with.

2braincells2go commented 7 years ago

You perhaps did not get a chance to "knock one up" (example based on our try above) did you?

bradmac commented 7 years ago

Sorry, no. But keditor is really just a client side tool, its up to you to provide whatever it is that you'll be POSTing to

2braincells2go commented 7 years ago

No problem. Did not mean to bother you guys. Students did not really like the flow of KEditor anyway.

Cheers!

Kademi / keditor

Example of using textarea with Keditor #35