VANHIEP.NET - Làm web giá rẻ - Thiết Kế Website - Thiết Kế Ứng Dụng Mobile
Thêm ckeditor vào dự án sử dụng angulajs 1.x

Thêm ckeditor vào dự án sử dụng angulajs 1.x

Thêm ckeditor vào dự án sử dụng angulajs 1.x

Bước 1 : Viết directive 

 

var app = angular.module('canansAdmin', []);

app.directive('attachmentFile', function ($parse) {

    return {

        restrict: 'A',

        link: function (scope, element, attributes) {

            var model = $parse(attributes.attachmentFile);

            var assign = model.assign;

            element.bind('change', function () {

                var files = [];

                angular.forEach(element[0].files, function (file) {

                    files.push(file);

                });

                scope.$apply(function () {

                    assign(scope, files);

                });

 

            });

        }

    }

});

Bước 2 : Gọi hàm ckeditor 

angular.element(document).ready(function () {

        let url= base +'/ckfinder/';

        CKEDITOR.replace('description', {})

        CKEDITOR.replace('ckeditor_content', {

            height: 200,

            title: '',

            // Configure your file manager integration. This example uses CKFinder 3 for PHP.

            filebrowserBrowseUrl: url + 'ckfinder.html',

            filebrowserImageBrowseUrl: url + 'ckfinder.html?type=Images',

            filebrowserUploadUrl: url + 'core/connector/php/connector.php?command=QuickUpload&type=Files',

            filebrowserImageUploadUrl: url + 'core/connector/php/connector.php?command=QuickUpload&type=Images'

        });

   

        $scope.$watch('ckeditor_content', function () {

            CKEDITOR.instances.ckeditor_content.setData($scope.ckeditor_content);

        });

   

        $scope.$watch('description', function () {

            CKEDITOR.instances.description.setData($scope.description);

        });

    });

Lưu ý gọi sau khi tải trang xong.

Bước 3 : Khai báo html