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

Question

我正在使用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>

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，它似乎可以工作...

  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编辑器）中？

问题描述

2 个解决方案

解决方案1
0 2016-12-21 11:26:03

解决方案2
0 2016-12-21 13:10:22

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

问题描述

2 个解决方案

解决方案1 0 2016-12-21 11:26:03

解决方案2 0 2016-12-21 13:10:22

解决方案1
0 2016-12-21 11:26:03

解决方案2
0 2016-12-21 13:10:22