2

我正在使用 ngQuill，它是 AngularJS 的 Quill 版本，我需要知道是否有办法将已经创建的 HTML 放入/加载到编辑器中。

我在文档中找不到任何关于它的信息。

像往常一样，对不起我糟糕的英语：c

$scope.message = 'Welcome to the Editor!';

    $scope.showToolbar = true;

    $scope.translations = angular.extend({}, ngQuillConfig.translations, {
        10: 'smallest'
    });

    $scope.toggle = function() {
        $scope.showToolbar = !$scope.showToolbar;
    };
    
    // Own callback after Editor-Creation
    $scope.editorCallback = function (editor, name) {
        console.log('createCallback', editor, name);
    };

    $scope.readOnly = false;

    $scope.isReadonly = function () {
        return $scope.readOnly;
    };

    $scope.clear = function () {
        return $scope.message = '';
    };

    // Event after an editor is created --> gets the editor instance on optional the editor name if set
    $scope.$on('editorCreated', function (event, editor, name) {
        console.log('createEvent', editor, name);
    });

    $timeout(function () {
        $scope.message = 'Async Test Content';
        console.log($scope.message);
    }, 3000);
<ng-quill-editor 

    	id="editor1"
	    name="editor1" 
	    callback="editorCallback(editor, name)" 
	    ng-model="message" 
	    translations="translations" 
	    toolbar="true" 
	    show-toolbar="showToolbar" 
	    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="" 
	    read-only="isReadonly()" 
	    error-class="input-error"    
	    fontsize-options="fontsizeOptions" 
	    fontfamily-options="fontfamilyOptions">


    </ng-quill-editor>

4

2 回答 2

1

可能这个plnkr可以帮助：

我只在我的主模块中包含了 ngSanitize，它似乎可以工作......

           var myAppModule = angular.module('plunker', ['ngQuill','ngSanitize']);
           
           
            myAppModule.config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
                ngQuillConfigProvider.set();
            }]);
            
            myAppModule.controller('AppCtrl', [
                '$scope',
                '$timeout',
                function($scope, $timeout) {
                  
                    $scope.name='moshe'
                    $scope.title = '<h1>Quill works</h1>';
                    $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);
                    };
                }
            ]);
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    
    <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 data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script data-require="angular-sanitize.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular-sanitize.js" data-semver="1.5.8"></script>
    <script type="text/javascript" src="//cdn.quilljs.com/1.1.5/quill.js"></script>
    <script type="text/javascript" src="http://killercodemonkey.github.io/ng-quill/src/ng-quill.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="AppCtrl">
    <p>generated: <i ng-bind-html="title"></i>!</p>
    <ng-quill-editor ng-model="title" read-only="readOnly" required="true" modules="{toolbar: true}"></ng-quill-editor>
  </body>

</html>

于 2016-12-21T13:10:22.020 回答
0

我对 Angular 无能为力，但这是我的 jQuery 解决方案（用于只读页面）

  • 创建编辑器
  • 找到您的目标（您希望显示文本的位置）
  • 解析你的字符串内容
  • 编辑器的setContents
var quill = new Quill('#editor-container', { modules: { toolbar: [] }, readOnly: true, theme: 'bubble'} );
    var $target = $('#editor-container');
    console.log(quill);
    console.log(quill.innerText);
    var $content = JSON.parse($target[0].innerText);
    quill.setContents($content);
于 2016-12-21T11:26:03.180 回答