在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条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档