jQWidgets Forums

This topic contains 6 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 3 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

jqx-editor in jqx-window Posts

January 21, 2015 at 7:52 pm jqx-editor in jqx-window #65794

badera

Participant

Dear jqWidgets Team

I like to use jqx-editor in a jqx-window. Hovever, I did not get it work right now; the editor is displayed but we cannot enter text. What is wrong?
I merged the two angular examples:
– http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/editor.htm and
– http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/dialog.htm

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id='Description'>jqxWindow Directive for AngularJS.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"/>
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {

            $scope.editorSettings = {width: "'100%'", height: 300};

            $scope.jqxWindowSettings = {
                maxHeight: 600, maxWidth: 1000, minHeight: 30, minWidth: 250, height: 500, width: 850,
                resizable: false, isModal: true, autoOpen: false, modalOpacity: 0.3
            };

            // show button click handler.
            $scope.showWindow = function () {
                $scope.jqxWindowSettings.apply('open');
            }

            // Ok button click handler.
            $scope.Ok = function () {
                $scope.jqxWindowSettings.apply('close');
            }

            // cancel button click handler.
            $scope.Cancel = function () {
                $scope.jqxWindowSettings.apply('close');
            }
        });
    </script>
</head>
<body class='default'>
<div ng-controller="demoController">
    <jqx-window jqx-settings="jqxWindowSettings">
        <div>
            Modal Window
        </div>
        <div>
            <div>
                <jqx-editor jqx-settings="editorSettings" ng-model="content"></jqx-editor>
            </div>
            <div>
                <div style="float: right; margin-top: 15px;">
                    <jqx-button jqx-on-click="Ok()" style="margin-right: 10px">Ok</jqx-button>
                    <jqx-button jqx-on-click="Cancel()">Cancel</jqx-button>
                </div>
            </div>
        </div>
    </jqx-window>
    <jqx-button jqx-on-click="showWindow()">Show Window</jqx-button>
</div>
</body>
</html>

I also saw the example http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxeditor/javascript-editor-in-dialog.htm. But thisone is not for angular and I do not see, how I could use ‘initContent’ in this context. So please provide an example of how I can use jqx-editor in jqx-window in angularjs context.

Thanks in advance!
– badera

January 22, 2015 at 6:40 am jqx-editor in jqx-window #65819

Peter Stoev

Keymaster

Hi badera,

Solution below:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id='Description'>jqxWindow Directive for AngularJS.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxeditor.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            $scope.jqxWindowSettings = {
                height: 345, width: 500,
                resizable: false, isModal: true, autoOpen: false, modalOpacity: 0.3
                , initContent: function () {
                    $scope.editorSettings = {
                        width: '100%',
                        height: 300
                    }
                }
            };

            // show button click handler.
            $scope.showWindow = function () {
                $scope.jqxWindowSettings.apply('open');
            }
        });
    </script>
</head>
<body class='default'>
    <div ng-controller="demoController">
        <jqx-window jqx-settings="jqxWindowSettings">
            <div>
                Modal Window
            </div>
            <div>
              <jqx-editor jqx-create="editorSettings" jqx-settings="editorSettings"></jqx-editor>                  
            </div>
        </jqx-window>
        <jqx-button jqx-on-click="showWindow()">Show Window</jqx-button>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 22, 2015 at 7:14 am jqx-editor in jqx-window #65823

badera

Participant

Dear Peter

Perfect! Thank you very much!
– badera

February 5, 2015 at 7:40 pm jqx-editor in jqx-window #66645

badera

Participant

Dear Peter

There seems to be a problem, if the window is resizeable and we set the height of the editor to 100%: The resized height is not adapted correctly (in opposite to the width: in width, the editor is scaled correctly):

Code:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id='Description'>jqxWindow Directive for AngularJS.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"/>
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxeditor.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            $scope.jqxWindowSettings = {
                height: 345, width: 500,
                resizable: true, isModal: true, autoOpen: false, modalOpacity: 0.3,
                initContent: function () {
                    $scope.editorSettings = {
                        tools: 'bold italic underline | format | ul ol',
                        width: '100%',
                        height: '100%'
                    }
                }
            };

            // show button click handler.
            $scope.showWindow = function () {
                $scope.jqxWindowSettings.apply('open');
            }
        });
    </script>
</head>
<body class='default'>
<div ng-controller="demoController">
    <jqx-window jqx-settings="jqxWindowSettings">
        <div>
            Modal Window
        </div>
        <div>
            <jqx-editor jqx-create="editorSettings" jqx-settings="editorSettings"></jqx-editor>
        </div>
    </jqx-window>
    <jqx-button jqx-on-click="showWindow()">Show Window</jqx-button>
</div>
</body>
</html>

=Removed Image Link=

What can I do? Thanks in advance for your help!
– badera

February 6, 2015 at 1:12 am jqx-editor in jqx-window #66654

Peter Stoev

Keymaster

Hi badera,

In case we reproduce such behavior, we will create a work item and will work about it for a future release. Thank you for the feedback! However, please avoid posting Images that point to 3rd party sites because we will have to remove them.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

February 6, 2015 at 7:14 am jqx-editor in jqx-window #66674

badera

Participant

Dear Peter

Thanks for the feedback. But I do not understand, what was wrong with the Image. It is my server and how should we post an image – if not from a 3rd party server? – if I look at this forum editor, I have only the possibility to post images with an url… how could we post an image, if not stored on a server?

– badera

February 6, 2015 at 9:32 am jqx-editor in jqx-window #66684

Peter Stoev

Keymaster

Hi badera,

You can post an image stored to a Public server where everybody uploads images.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.