ngQuill (Quill Editor)에 html 파일을 어떻게로드합니까?

저는 AngularJS 용 Quil 버전 인 ngQuill을 사용하고 있습니다. 이미 작성된 HTML을 편집기에 넣거나로드하는 방법이 있는지 알아야합니다.ngQuill (Quill Editor)에 html 파일을 어떻게로드합니까?

설명서에서 문제가 발견되지 않습니다. 언제나처럼

, 불쌍한 내 영어에 대한 유감 : 제가 각도에 도움이되지 수

$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 
 

 
    \t id="editor1" 
 
\t  name="editor1" 
 
\t  callback="editorCallback(editor, name)" 
 
\t  ng-model="message" 
 
\t  translations="translations" 
 
\t  toolbar="true" 
 
\t  show-toolbar="showToolbar" 
 
\t  link-tooltip="true" 
 
\t  image-tooltip="true" 
 
\t  toolbar-entries="font size bold list bullet italic underline strike align color background link image" 
 
\t  editor-required="true" 
 
\t  required="" 
 
\t  read-only="isReadonly()" 
 
\t  error-class="input-error"  
 
\t  fontsize-options="fontsizeOptions" 
 
\t  fontfamily-options="fontfamilyOptions"> 
 

 

 
    </ng-quill-editor>

출처

2016-08-25 Andiie

c를, 그러나 이것은 (읽기 전용 페이지) 내 jQuery를 솔루션이었다

편집기 만들기
대상 찾기 (원하는 위치

난 단지 내 주에 ngSanitize을 포함 : 그는

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-21 11:26:03 Remy

이 plnkr가 도움이 될 수 있습니다

은 문자열의 콘텐츠 편집기의

setContents 구문 분석) 표시 할 텍스트 모듈이 작동하는 것 같습니다 ...

  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="[email protected]" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script> 
 
    <script data-require="[email protected]" 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-21 13:10:22 happyZZR1400

ngQuill (Quill Editor)에 html 파일을 어떻게로드합니까?

답변

관련 문제