AngularJS Wiris 集成

Question

我是 AngularJS 的初学者。作为第一个项目，我正在尝试建立一个简单的 Angular 项目，它集成了 Wiris.

实际看到插件并与之交互是我进步的程度。当我尝试获取文本区域中的数据时，我的问题就开始了。

我尝试使用以下方法：

<div ng-model="questionData" id="editorContainer"
     style='width:100%; height:500px;'>
  Responsible!
</div>
<input type="button" value="Submit" ng-click="postQuestion()" />

headlessQS.controller('wirisController', ['$scope', '$route', '$routeParams', function($scope, $route, $routeParams){

    $scope.postQuestion = function(){
//        console.log($scope.questionData.wrs_previewImage);
//        console.log( angular.element('#editorContainer').val() );
//        console.log( $('#editorContainer').val() );
//        console.log(angular.element('[id="username"]').val());
//        console.log(angular.element('#editorContainer').html);

        console.log( angular.element('#editorContainer').val() );
        console.log( angular.element('#editorContainer')[0].value );
    }
}]);

我尝试了每一个 console.log 语句都没有成功，但有些东西告诉我我的一般方法是错误的。

我希望将 Wiris 与 AngularJS2 集成，以便我可以检索创建的公式。我该怎么做？

Answer 1

访问 MathML 标记的方法是通过 getMathML() Wiris api 函数调用，如下所示：

$scope.postQuestion = function(){
    console.log( editor.getMathML() );
}

Answer 2

使用AngularJS，我们建议您使用WIRIS作为TinyMCE的外部插件。您可以在 http://www.wiris.com/plugins/docs/resources/external-plugin

找到更多详细信息

Answer 3

ng-model 指令不适用于 <div> 个元素。

ERRONEOUS

<div ng-model="questionData" id="editorContainer"
     style='width:100%; height:500px;'>
  Responsible!
</div>

更好

<textarea ng-model="questionData" id="editorContainer"
     style='width:100%; height:500px;'>
  Responsible!
</textarea>

将 `ng-model` 与 `<div>` 元素集成

要将 ng-model 与 <div> 元素集成，请定义一个与 ng-model 控制器一起使用的自定义指令：

<div ng-model="questionData" my-editor>
    Responsible!
</div>

app.directive("myEditor", function() {
    return {
        require: "ngModel",
        link: postLink
    };
    function postLink(scope, elem, attrs, ctrl) {
        elem.on("keyup", function(ev) {
            var keycode = ev.keyCode;
            //...
            ctrl.$setViewValue(data);
        });
        ctrl.$render = function() {
            var something = $ctrl.$viewValue;
            //...
            elem.html(something);
        };
        ctrl.$parsers.push(function(data) {
            //...
            return data;
        });
        ctrl.$formatters.push(function(data) {
            //...
            return data;
        });            
    }
})

有关详细信息，请参阅

AngularJS Wiris 集成

AngularJS Wiris integration

angularjs

integration

mathml

将 `ng-model` 与 `<div>` 元素集成

AngularJS Wiris 集成

AngularJS Wiris integration

angularjs

integration

mathml

将 ng-model 与 <div> 元素集成

将 `ng-model` 与 `<div>` 元素集成