个人中心
gpt4 book ai didi

javascript - 如何将 html 文件加载到 ngQuill(Quill 编辑器)中？

转载 作者：行者123 更新时间：2023-11-28 02:51:47 24 4
gpt4 key购买 nike

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

最佳答案

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

关于javascript - 如何将 html 文件加载到 ngQuill(Quill 编辑器)中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39148055/

24 4 0
文章推荐： javascript - Jquery Cycle Slider - 快速点击打破 slider
文章推荐： javascript - 如何知道 JavaScript 的下载何时开始？
文章推荐： javascript - Ajaxify + 确认对话框？
文章推荐： css - webpack bootstrap-loader 会发出 bootstrap.js 而不是 bootstrap.css 文件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com