jQWidgets Forums

jQuery UI Widgets › Forums › Editors › Editor › Integrating jqxeditor with angularjs

Tagged: , ,

This topic contains 3 replies, has 2 voices, and was last updated by  ivailo 9 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Integrating jqxeditor with angularjs Posts
  • April 18, 2016 at 5:23 am Integrating jqxeditor with angularjs #83569

    deepakPandey
    Participant

    Hi,

    Can you give an example of integrating jqxeditor with angularjs.

    April 18, 2016 at 5:46 am Integrating jqxeditor with angularjs #83570

    ivailo
    Participant

    deepakPandey,

    Here is the demo with angular and jqxEditor.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    April 18, 2016 at 5:55 am Integrating jqxeditor with angularjs #83572

    deepakPandey
    Participant

    I mean the code.

    April 18, 2016 at 6:10 am Integrating jqxeditor with angularjs #83574

    ivailo
    Participant

    Hi deepakPandey,

    You can see the source code in your browser or to select View Source tab in http://www.jqwidgets.com/jquery-widgets-demo/demos/angularjs-demos/index.htm#demos/angularjs-demos/editor.htm.

    If you have any problem with this, here is the code of this demo:

    <!DOCTYPE html>
<html lang="en" ng-app="demoApp">
<head>
    <title id="Description">jqxEditor directive for AngularJS</title>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.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="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxeditor.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            $scope.content = "<div>Text is synchronized on blur.</div>";
            $scope.editorSettings = { width: 800, height: 300 };
            $scope.html = "";
            $scope.$watch("content", function () {
                $scope.html = $("<div></div>").html($scope.content).text();
            });
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-editor jqx-settings="editorSettings" ng-model="content"></jqx-editor>
        <div style="width: 800px; height: 200px;" ng-bind="html"></div>
    </div>
</body>
</html>

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.