Example of using textarea with Keditor #35

2braincells2go · 2016-12-16T20:56:38Z

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!

The text was updated successfully, but these errors were encountered:

anhnt · 2016-12-17T03:16:16Z

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

2braincells2go · 2016-12-17T11:29:17Z

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 · 2016-12-17T16:05:19Z

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:

`

<title>KEditor - Kademi Content Editor</title> <script src="plugins/jquery-1.11.3/jquery-1.11.3.min.js"></script> <script src="plugins/bootstrap-3.3.6/js/bootstrap.min.js"></script> <script type="text/javascript"> var bsTooltip = $.fn.tooltip; var bsButton = $.fn.button; </script> <script src="plugins/jquery-ui-1.11.4/jquery-ui.min.js"></script> <script src="plugins/jquery-ui.touch-punch-0.2.3/jquery.ui.touch-punch.min.js"></script> <script type="text/javascript"> $.widget.bridge('uibutton', $.ui.button); $.widget.bridge('uitooltip', $.ui.tooltip); $.fn.tooltip = bsTooltip; $.fn.button = bsButton; </script> <script src="plugins/jquery.nicescroll-3.6.6/jquery.nicescroll.min.js"></script> <script src="plugins/ckeditor-4.5.6/ckeditor.js"></script> <script src="plugins/ckeditor-4.5.6/adapters/jquery.js"></script> <script src="dist/js/keditor-1.1.3.min.js"></script> <script src="dist/js/keditor-components-1.1.3.min.js"></script>

<body>

<?php

$filename = 'Data/test.inc';

if(file_exists($filename)){

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

		$data = $_POST['keditor-content-area'];
		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!";
}
?>

	<textarea style="width:100%;" name="keditor-content-area" id="content-area"><?php include 'Data/test.inc'; ?></textarea>

    
	<!--<div id="content-area"></div>-->
	
		<div class="row">
			<div class="col-sm-8">
				<input class="btn btn-primary btn-lg raised" id="load" type="submit" name="write" id="write" value="(1) SAVE NOW" />
			</div>
		</div>

    <script type="text/javascript">
        $(function() {
            $('#content-area').keditor({
                tabTooltipEnabled: true,
                snippetsTooltipEnabled: true,
                onReady: function () {
                    $('.keditor-content-area').css('min-height', $(window).height());
                }
            });
        });
    </script>

</form>
</body>

`

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 · 2016-12-17T18:20:19Z

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 · 2016-12-17T18:21:35Z

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 · 2016-12-17T19:03:52Z

@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 · 2016-12-17T19:09:41Z

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 · 2016-12-18T21:36:53Z

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 · 2016-12-19T00:26:47Z

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

2braincells2go · 2016-12-19T12:12:02Z

@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 · 2016-12-19T18:48:10Z

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 · 2016-12-19T20:46:02Z

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 · 2016-12-19T21:37:37Z

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 · 2016-12-19T21:44:24Z

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 · 2016-12-19T21:47:51Z

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 · 2017-01-13T21:15:21Z

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

bradmac · 2017-01-14T06:54:05Z

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 · 2017-01-14T13:50:57Z

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

Cheers!

2braincells2go closed this as completed Dec 18, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Example of using textarea with Keditor #35

Example of using textarea with Keditor #35

2braincells2go commented Dec 16, 2016 •

edited

Loading

anhnt commented Dec 17, 2016

2braincells2go commented Dec 17, 2016

2braincells2go commented Dec 17, 2016 •

edited

Loading

bradmac commented Dec 17, 2016

bradmac commented Dec 17, 2016

2braincells2go commented Dec 17, 2016 •

edited

Loading

bradmac commented Dec 17, 2016

2braincells2go commented Dec 18, 2016

bradmac commented Dec 19, 2016

2braincells2go commented Dec 19, 2016

bradmac commented Dec 19, 2016

2braincells2go commented Dec 19, 2016

bradmac commented Dec 19, 2016

2braincells2go commented Dec 19, 2016

bradmac commented Dec 19, 2016

2braincells2go commented Jan 13, 2017

bradmac commented Jan 14, 2017

2braincells2go commented Jan 14, 2017

Example of using textarea with Keditor #35

Example of using textarea with Keditor #35

Comments

2braincells2go commented Dec 16, 2016 • edited Loading

anhnt commented Dec 17, 2016

2braincells2go commented Dec 17, 2016

2braincells2go commented Dec 17, 2016 • edited Loading

bradmac commented Dec 17, 2016

bradmac commented Dec 17, 2016

2braincells2go commented Dec 17, 2016 • edited Loading

bradmac commented Dec 17, 2016

2braincells2go commented Dec 18, 2016

bradmac commented Dec 19, 2016

2braincells2go commented Dec 19, 2016

bradmac commented Dec 19, 2016

2braincells2go commented Dec 19, 2016

bradmac commented Dec 19, 2016

2braincells2go commented Dec 19, 2016

bradmac commented Dec 19, 2016

2braincells2go commented Jan 13, 2017

bradmac commented Jan 14, 2017

2braincells2go commented Jan 14, 2017

2braincells2go commented Dec 16, 2016 •

edited

Loading

2braincells2go commented Dec 17, 2016 •

edited

Loading

2braincells2go commented Dec 17, 2016 •

edited

Loading