ng-quill wysiwyg编辑器没有显示完整的工具栏

时间:2017-01-26 09:53:40

标签: angularjs wysiwyg rich-text-editor

正在使用asp mvc和angularjs进行项目,需要一个所见即所得的编辑器,因此我选择了ng-quill因为它是免费的,它具有我特别需要的图像上传功能。但问题是当我把它放到我的网站时,完整的工具栏没有显示出来。我完全按照演示节目ng-quill demo

进行了跟踪

请帮助我!



var ICTOnlineDatabaseApp = angular.module('ICTOnlineDatabaseApp',
    ['ngQuill']);
ICTOnlineDatabaseApp.config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
    ngQuillConfigProvider.set();
}]);
ICTOnlineDatabaseApp.controller('NewNewsController', [
                '$scope',
                '$timeout',
                function ($scope, $timeout) {
                    $scope.title = 'Quill works';
                    $scope.readOnly = false;
                    $timeout(function () {
                        $scope.title += ' awsome!!!'
                    }, 2000);
                    $scope.editorCreated = function (editor) {
                        console.log(editor);
                    };
                    $scope.contentChanged = function (editor, html, text) {
                        console.log('editor: ', editor, 'html: ', html, 'text:', text);
                        console.log('Had had hadmeles');
                    };
                }
]);

[ng-quill-editor] { display: block; }

<link rel="stylesheet" href="//cdn.quilljs.com/1.1.5/quill.snow.css">
        <link rel="stylesheet" href="//cdn.quilljs.com/1.1.5/quill.bubble.css">
    <script type="text/javascript" src="//code.angularjs.org/1.5.8/angular.min.js"></script>
    <script type="text/javascript" src="//cdn.quilljs.com/1.1.5/quill.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-quill/2.2.1/ng-quill.min.js"></script>

<div ng-app="ICTOnlineDatabaseApp">
  <div ng-controller="NewNewsController">
    <ng-quill-editor ng-model="message" toolbar="true" link-tooltip="true" image-tooltip="true" toolbar-entries="font size bold list bullet italic underline strike align color background link image" editor-required="true" required="" error-class="input-error"></ng-quill-editor>
</div>
  </div>
&#13;
&#13;
&#13;

enter image description here

0 个答案:

没有答案