0

I'm currently using CKEditor and I'm having some trouble removing my toolbar when I click away. Currently I want to create CKEditor instances dynamically as users click on it.

However the trouble comes up when I try to click away without clicking on the toolbar. When I try to click away on the toolbar stays there and it does not run any of my onBlur code. It's only when I click on a button the toolbar or click away and then click back to the text area will it remove the toolbar and run my onBlur code.

Right here is a small snippet of code that I wrote to create the instance when clicked. Am I doing something wrong here or am I missing a piece of focus code?

    <html>
        <head>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script src="ckeditor\ckeditor.js"></script>
            <script>
            $(document).ready(function(){
                CKEDITOR.disableAutoInline = true;

                $("#abc").on('click', function(){
                    var ck = CKEDITOR.inline(CKEDITOR.document.getById('abc'));
                });
            });

            </script>
        </head>

        <body>

            <div id="abc" contenteditable="true" >
                Edit this
            </div>
        </body>
    </html>
4

2 回答 2

0

Try removing the jquery on click and simply allow ckeditor to handle it

$(document).ready(function () {
    CKEDITOR.disableAutoInline = true;
    CKEDITOR.inline('abc');
 });

OR

var abcEditor = CKEDITOR.inline('abc');
于 2013-11-13T20:23:20.553 回答
0

So instead of making it on click I did it so that on page load it will find all content editable areas and create ckeditor instances.

Originally I wanted to use on click to create an instance dynamically as I will be populating things dynamically. However, I found it easier to just create a ckeditor instance as I create the dynamic content.

Using this function I am able to create new ckeditor instance as the dynamic content is created and also use the onblur function to write everything to my database.

If any one has any solutions to getting the raw html from ckediter, please let me know. This method has to get the parent and then find the element and then save it, which to me doesnt sound right. So if you have any suggestions on how to do this I'm all open ears! thanks!

        if(CKEDITOR.instances[this.id] == undefined){
            console.log("creating new instance");
            var ck = CKEDITOR.inline(CKEDITOR.document.getById(  this.id ));

            ck.on('blur', function(e){
                var id = e.editor.name;
                var html = $("#"+id).parent()[0].outerHTML;
                console.log(html);
                $.ajax({
                    type: 'POST',
                    url: "saveHtml",
                    data: { content : html}
                }).done(function(data) {
                    console.log(data);
                    console.log("finished sending data");
                });
            });
        }else{
            console.log("no instance created");
        }
于 2013-11-13T21:03:16.153 回答