有没有一种方法可以在设计模式下将ng模型或工厂绑定到iframe

Is there a way to bind ng-model or a factory to an iframe in design mode

本文关键字：模型 ng 工厂 iframe 绑定 设计模式 一种 方法 有没有      更新时间：2023-09-26

我正在尝试创建一个非常非常基本的编辑器，它允许您加粗文本、添加链接、添加无序列表和图像，仅此而已。我设置了我的控制器，但我想知道如何将工厂或变量绑定到iframe，以便在输入时更新存储html的变量？

这是基本的应用程序html

<!DOCTYPE html>
<html lang="en" ng-app="HtmlEditor">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="lib/angular/angular.min.js"></script>
    <script src="lib/angular-sanitize/angular-sanitize.min.js"></script>
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
    <script src="js/app.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body ng-controller="AppCtrl as app">
    <div class="header">
        Email Creator
    </div>
    <div class="row-fluid">
        <div class="col-md-5">
            <form action="" set-url="controller">
                <div class="form-group">
                    <label for="">Subject</label>
                    <input type="text" name="subject" class="form-control" ng-model="app.settings.subject">
                </div>
                <div class="form-group">
                    <label for="">Title</label>     
                    <input type="text" name="title" class="form-control" ng-model="app.settings.title">
                </div>
                <div class="form-group">
                    <label for="">Signature</label>     
                    <input type="text" name="signature" class="form-control" ng-model="app.settings.signature">
                </div>
                <div class="editor">
                    <div html-editor="richText"></div>
                </div>
            </form>
        </div>
        <div class="col-md-7">
            <div preview>
            </div>
        </div>
    </div>
</body>
</html>

这是app.js文件中与问题相关的部分，其余部分只是其他指令和控制器的脚手架，以支持功能

var app = angular.module("HtmlEditor", ['ngSanitize'])
.factory("Settings", function(){
    var settings  = {
    }
    settings.setUrl = function(url){
        settings.url = url+".cfc";
    }
    return settings;
})
.controller("AppCtrl", function(Settings){
    var appCtrl = this;
    appCtrl.settings = Settings;
    appCtrl.filter = function(){
    }
})
.directive("htmlEditor", function(Settings){
    return {
        restrict:"A",
        scope:{
            htmlEditor:"@"
        },
        controller:"AppCtrl",
        replace:true,
        template:'<iframe name="{{::htmlEditor}}" id="{{::htmlEditor}}"></iframe>',
        link:function(scope, element, attr, appCtrl){
            console.log(element.contents())
            element.contents()[0].designMode = "On";
            /*var iframeDocument = element[0].contentDocument || element[0].contentWindow.document;
            iframeDocument.designMode = "On";*/
            appCtrl.settings.editor = element.contents()[0];
            console.log(appCtrl.settings.editor);
        }
    }
})

这就是我让它工作的方式，它基本上模拟了ngModel功能。我只是发布了答案，以防其他人试图做类似的事情，但无法解决。

return {
        restrict:"A",
        scope:{
            htmlEditor:"@"
        },
        require:"ngModel",
        replace:true,
        template:'<iframe name="{{::htmlEditor}}" id="{{::htmlEditor}}"></iframe>',
        link:function(scope, element, attr, ngModel){
            console.log(element.contents())
            var editor = element.contents()[0];
            editor.designMode = "On";
            Settings.editor = editor;
            console.log(ngModel);
            Settings.body = element.contents().children().find('body');
            element.contents()
            .bind("blur keyup change", function() {
                scope.$apply(function(){
                    Settings.isEmpty = !Settings.body.html().length > 0;
                    console.log(Settings.isEmpty);
                    Settings.html = Settings.body.html();
                });
            });
    }
}

指令中有iframe是有原因的吗？

我过去所做的是在一个范围变量中设置url。

<iframe name="pdfIframe" ng-src="{{currentLeadSheetUrl}}" id="pdfIframe" width="80%" height="500px" ></iframe>
相关文章：