有没有NG-模型或工厂绑定在设计模式的iframe的方式 [英] Is there a way to bind ng-model or a factory to an iframe in design mode

查看:122
本文介绍了有没有NG-模型或工厂绑定在设计模式的iframe的方式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想创建一个非常非常基本的编辑器,允许你大胆的文字,添加链接,添加无序列表和图像,这就是它。设置我的控制器,但我想知道你会如何工厂或变量绑定到的iframe这样,当我在其中键入所存储的HTML变量更新?

下面是基本应用HTML

 <!DOCTYPE HTML>
< HTML LANG =ENNG-应用=HTML编辑>
< HEAD>
    <间的charset =UTF-8>
    <标题>文件< /标题>
    &所述; SCRIPT SRC =LIB /角度/ angular.min.js>&下; /脚本>
    &所述; SCRIPT SRC =LIB /角的sanitize /角sanitize.min.js>&下; /脚本>
    <链接rel =stylesheet属性HREF =LIB /引导/距离/ CSS / bootstrap.min.css>
    <脚本SRC =JS / app.js>< / SCRIPT>
    <链接rel =stylesheet属性HREF =CSS / style.css文件>
< /头>
<机身NG控制器=AppCtrl为app>
    < D​​IV CLASS =头>
        电子邮件造物主
    < / DIV>
    < D​​IV CLASS =排液>
        < D​​IV CLASS =COL-MD-5>
            <形式的行动=设置URL =控制器>
                < D​​IV CLASS =表单组>
                    <标签=>受试对象; /标签>
                    <输入类型=文本名称=主题类=表格控NG模型=app.settings.subject>
                < / DIV>
                < D​​IV CLASS =表单组>
                    <标签=>标题< /标签>
                    <输入类型=文本名称=标题级=表格控NG模型=app.settings.title>
                < / DIV>
                < D​​IV CLASS =表单组>
                    <标签=>签署及LT; /标签>
                    <输入类型=文本名称=签名级=表格控NG模型=app.settings.signature>
                < / DIV>
                < D​​IV CLASS =编辑器>
                    < D​​IV HTML编辑器=富文本>< / DIV>
                < / DIV>
            < /表及GT;
        < / DIV>
        < D​​IV CLASS =COL-MD-7>
            < D​​IV preVIEW>            < / DIV>
        < / DIV>
    < / DIV>
< /身体GT;
< / HTML>

这里是app.js文件的组成部分,是有关剩下的只是脚手架其他指令和控制器支持功能的问题。

  VAR应用= angular.module(HTML编辑,['ngSanitize']).factory(设置,函数(){
    VAR设置= {    }    settings.setUrl =功能(URL){        settings.url = URL +CFC。    }    返回设置;
}).controller(AppCtrl功能(设置){
    VAR appCtrl =这一点;    appCtrl.settings =设置;    appCtrl.filter =功能(){    }}).directive(HTML编辑功能(设置){    返回{
        限制:A,
        范围:{
            HTML编辑:@
        },
        控制器:AppCtrl
        更换:真实,
        模板:'< IFRAME NAME ={{:: HTML编辑}}ID ={{:: HTML编辑}}>< / IFRAME>,
        链接:功能(范围,元素,属性appCtrl){
            的console.log(element.contents())
            element.contents()[0] = .designMode开;
            / *变种iframeDocument =元素[0] .contentDocument ||元素[0] .contentWindow.document;
            iframeDocument.designMode =开; * /
            appCtrl.settings.editor = element.contents()[0];            的console.log(appCtrl.settings.editor);
        }
    }})


解决方案

这是我得到了它的工作,它基本上模拟了ngModel功能。我刚刚张贴以防其他人试图做类似的事情,不能弄明白答案。

  {回报
        限制:A,
        范围:{
            HTML编辑:@
        },
        要求:ngModel
        更换:真实,
        模板:'< IFRAME NAME ={{:: HTML编辑}}ID ={{:: HTML编辑}}>< / IFRAME>,
        链接:功能(范围,元素,属性ngModel){
            的console.log(element.contents())
            变种编辑= element.contents()[0];
            editor.designMode =开;
            Settings.editor =编辑;            的console.log(ngModel);
            。Settings.body = element.contents()儿童()找到('身体');            element.contents()
            .bind(模糊KEYUP变,函数(){                范围。$应用(函数(){                    Settings.isEmpty = Settings.body.html()长度GT!。 0;
                    的console.log(Settings.isEmpty);
                    Settings.html = Settings.body.html();                });            });
    }}

I am trying to create a very very basic editor that allows you to bold text, add links, add unordered lists, and images and that's it. I set up my Controller but I was wondering how you would bind a factory or variable to the iframe so that when I type in it that the variable that is storing the html is updated?

here is the basic app 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>

here is the part of the app.js file that is relevant to the question the rest is just scaffolding for other directives and controllers to support functionality

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

})

解决方案

this is how I got it to work the it basically emulates the ngModel functionality. I just posted the answer just in case anyone else was trying to do something similar and couldn't figure it out.

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();

                });

            });
    }

}

这篇关于有没有NG-模型或工厂绑定在设计模式的iframe的方式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆