在AngularJS控制器中获取TinyMCE textcontent

斯坦尼斯·皮埃尔·亚历山大

我开始使用angularJS,我想要的是提交一个带有tinymce-ui文本区域的表单,并同时提交HTML内容和文本内容。

现在,我可以使用tinyMce文本区域。

   <div>
    <form method="post">
    <textarea ui-tinymce="tinymceOptions" ng-model="user.commentaireValue" id="tinymce1"></textarea>
            <textarea>{{user.commentaireValue}}</textarea>
            <textarea id="IwouldLikeNonHtmlContent">{{HELPME}}</textarea>
        </form>
    </div>

如果我在控制台中输入

   tinyMCE.get('tinymce1').getBody().textContent

我得到我想要的。我只是不知道如何在我的控制器中检索它

   app.controller('UserCreationCtrl', ['$scope', 'UsersFactory', '$location',
     function ($scope, UsersFactory, $location) {
    // callback for ng-click 'createNewUser':
    $scope.createNewUser = function () {
        UsersFactory.create($scope.user);
        $location.path('/user-list');
    };
    $scope.options=[
        {name:'black', shade:'dark'},
        {name:'white', shade:'light'},
        {name:'red', shade:'dark'},
        {name:'blue', shade:'dark'},
        {name:'yellow', shade:'light'}
    ];
    $scope.correctlySelected = $scope.options[1];
    $scope.tinymceOptions = {
        resize: false,
        width: 400,  // I *think* its a number and not '400' string
        height: 300,
        plugins: 'textcolor link',
        toolbar: "undo redo styleselect bold italic forecolor backcolor",
        menu : { // this is the complete default configuration
            edit   : {title : 'Edit'  , items : 'undo redo | cut copy paste pastetext | selectall'},
            insert : {title : 'Insert', items : 'link media | template hr'},
            format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
        }
    };
    //tinyMCE.get('tinymce1').getBody().textContent;
}]);

不使用清理功能怎么办?谢谢你

黑麦

您可以使用init_instance_callback来为附加事件监听器KeyUpExecCommandSetContent在活动的tinymce中使用此事件监听器触发这些事件时editor绑定$scope变量。如果检查ui-tinymce指令源代码,您将看到这些事件用于更新模型。

JAVASCRIPT

$scope.tinymceOptions = {
        resize: false,
        width: 400,  // I *think* its a number and not '400' string
        height: 300,
        plugins: 'textcolor link',
        toolbar: "undo redo styleselect bold italic forecolor backcolor",
        menu : { // this is the complete default configuration
            edit   : {title : 'Edit'  , items : 'undo redo | cut copy paste pastetext | selectall'},
            insert : {title : 'Insert', items : 'link media | template hr'},
            format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
        },

        init_instance_callback: function(editor) {
          var textContentTrigger = function() {
            $scope.textContent = editor.getBody().textContent;
            $scope.$apply();
          };

          editor.on('KeyUp', textContentTrigger);
          editor.on('ExecCommand', textContentTrigger);
          editor.on('SetContent', function(e) {
            if(!e.initial)
              textContentTrigger();
          });
        }
    };

的HTML

<textarea>{{textContent}}</textarea>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

获取选定元素内的textContent

来自分类Dev

evenlistener中的textContent返回NaN

来自分类Dev

获取#document-fragment的innerHTML而不是textContent

来自分类Dev

JavaScript获取不包括子代的textContent

来自分类Dev

使用点表示法获取innerHTML或textContent

来自分类Dev

问题-ExtJS中textcontent div中的img

来自分类Dev

设置或替换Facebook聊天中的textContent

来自分类Dev

输入元素中textContent的目的是什么?

来自分类Dev

按类属性获取同级,然后获取textContent

来自分类Dev

从textNode获取固定的(用省略号表示)textContent

来自分类Dev

使用queryselector从不带类名的td标签获取textContent

来自分类Dev

textContent与 innerText跨浏览器解决方案

来自分类Dev

textContent与 innerText跨浏览器解决方案

来自分类Dev

如何在$ mdDialog中的textContent中添加换行符

来自分类Dev

Javascript:textContent和getElementByTagName arent在我的代码中工作

来自分类Dev

无法读取JavaScript中未定义的属性“ textContent”

来自分类Dev

Javascript 中不区分大小写的 textContent

来自分类Dev

Javascript通过他的id控制台获取div的textContent无法读取null的属性

来自分类Dev

使用cURL获取RSS-DomDocument对象中的textContent为空

来自分类Dev

AngularJS:在控制器中获取工厂返回的数据

来自分类Dev

AngularJS并获取控制器中的窗口滚动位置

来自分类Dev

从AngularJS中的子指令获取对控制器的访问

来自分类Dev

AngularJS指令从控制器中的Ajax调用获取数据

来自分类Dev

在AngularJS的基本控制器中获取ControllerAs别名

来自分类Dev

AngularJS在获取HTML元素的控制器中引用表单

来自分类Dev

如何在 angularjs 控制器中获取 json 数据

来自分类Dev

在输入中输入信息,并同时显示div的textContent上的信息

来自分类Dev

Javascript textContent在IE8或IE7中不起作用

来自分类Dev

JS(document.getElementById(“ example”)。textContent)在var中不显示内容

Related 相关文章

  1. 1

    获取选定元素内的textContent

  2. 2

    evenlistener中的textContent返回NaN

  3. 3

    获取#document-fragment的innerHTML而不是textContent

  4. 4

    JavaScript获取不包括子代的textContent

  5. 5

    使用点表示法获取innerHTML或textContent

  6. 6

    问题-ExtJS中textcontent div中的img

  7. 7

    设置或替换Facebook聊天中的textContent

  8. 8

    输入元素中textContent的目的是什么?

  9. 9

    按类属性获取同级,然后获取textContent

  10. 10

    从textNode获取固定的(用省略号表示)textContent

  11. 11

    使用queryselector从不带类名的td标签获取textContent

  12. 12

    textContent与 innerText跨浏览器解决方案

  13. 13

    textContent与 innerText跨浏览器解决方案

  14. 14

    如何在$ mdDialog中的textContent中添加换行符

  15. 15

    Javascript:textContent和getElementByTagName arent在我的代码中工作

  16. 16

    无法读取JavaScript中未定义的属性“ textContent”

  17. 17

    Javascript 中不区分大小写的 textContent

  18. 18

    Javascript通过他的id控制台获取div的textContent无法读取null的属性

  19. 19

    使用cURL获取RSS-DomDocument对象中的textContent为空

  20. 20

    AngularJS:在控制器中获取工厂返回的数据

  21. 21

    AngularJS并获取控制器中的窗口滚动位置

  22. 22

    从AngularJS中的子指令获取对控制器的访问

  23. 23

    AngularJS指令从控制器中的Ajax调用获取数据

  24. 24

    在AngularJS的基本控制器中获取ControllerAs别名

  25. 25

    AngularJS在获取HTML元素的控制器中引用表单

  26. 26

    如何在 angularjs 控制器中获取 json 数据

  27. 27

    在输入中输入信息,并同时显示div的textContent上的信息

  28. 28

    Javascript textContent在IE8或IE7中不起作用

  29. 29

    JS(document.getElementById(“ example”)。textContent)在var中不显示内容

热门标签

归档