Giter Site home page Giter Site logo

Comments (18)

bradmac avatar bradmac commented on August 28, 2024 1

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/

from keditor.

bradmac avatar bradmac commented on August 28, 2024 1

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.

from keditor.

anhnt avatar anhnt commented on August 28, 2024

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

from keditor.

2braincells2go avatar 2braincells2go commented on August 28, 2024

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

from keditor.

2braincells2go avatar 2braincells2go commented on August 28, 2024

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.

from keditor.

bradmac avatar bradmac commented on August 28, 2024

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

from keditor.

bradmac avatar bradmac commented on August 28, 2024

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

from keditor.

2braincells2go avatar 2braincells2go commented on August 28, 2024

@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:)

from keditor.

2braincells2go avatar 2braincells2go commented on August 28, 2024

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

from keditor.

bradmac avatar bradmac commented on August 28, 2024

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

from keditor.

2braincells2go avatar 2braincells2go commented on August 28, 2024

@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!

from keditor.

bradmac avatar bradmac commented on August 28, 2024

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

from keditor.

2braincells2go avatar 2braincells2go commented on August 28, 2024

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!

from keditor.

bradmac avatar bradmac commented on August 28, 2024

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.

from keditor.

2braincells2go avatar 2braincells2go commented on August 28, 2024

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();
        }
    })
});`

from keditor.

2braincells2go avatar 2braincells2go commented on August 28, 2024

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

from keditor.

bradmac avatar bradmac commented on August 28, 2024

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

from keditor.

2braincells2go avatar 2braincells2go commented on August 28, 2024

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

Cheers!

from keditor.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.