Question

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

我在文档中找不到任何相关内容。

像往常一样，抱歉我的英语很差：c

＆＃13;

write

＆＃13;

angular
.module('dimecuba.services', [])
.factory('Contacts', function($cordovaContacts, $ionicPlatform) {

    var contactsFound = [];

    var contacts = {
        all:function(){
            var options = {};
            options.multiple = true;
            options.filter = "";
            //options.fields = ['displayName'];
            options.hasPhoneNumber = true;
            $ionicPlatform.ready(function(){
                $cordovaContacts.find(options).then(
                    function(allContacts){
                        angular.forEach(allContacts, function(contact, key) {
                            contactsFound.push(contact);
                        });
                        console.log("Contacts Found:" + JSON.stringify(contactsFound));
                        return contactsFound;
                    }, 
                    function(contactError){
                        console.log('Error');
                    }
                );
            });
        }
    }; //end contacts
    console.log("Contacts:"+JSON.stringify(contacts));
    return contacts;
});

＆＃13;

Answer 1

我无法帮助Angular，但这是我的jQuery解决方案（适用于readOnly页面）

创建编辑器
找到目标（您希望显示文本的位置）
解析您的字符串内容
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，它似乎有用......

＆＃13;

           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);
                    };
                }
            ]);

＆＃13;

<!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>

＆＃13;

如何将html文件加载到ngQuill（Quill Editor）？

2 个答案: