如何将 html 文件加载到 ngQuill（Quill 编辑器）中？

Question

我正在使用 ngQuill，它是 AngularJS 的 Quill 版本，我需要知道是否有办法将 put/load 和 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>

Answer 1

我无法帮助 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);

Answer 2

可能这个 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>

如何将 html 文件加载到 ngQuill（Quill 编辑器）中？

How do I load an html file into ngQuill (Quill Editor)?

javascript

jquery

html

angularjs

quill