如何将Tinymce与AngularJS集成

这就是我编码的方式。

请我需要有人帮忙。

下面是HTML和Javascript代码

<html>
[<head>][2]
<script type="text/javascript" src="//cdn.tinymce.com/4/tinymce.min.js"> 
</script>
<script type="text/javascript" 
src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui- 
tinymce/0.0.19/tinymce.js'></script>
<!-- AngularUI TinyMCE -->
</head>
<body ng-app="myApp" ng-controller="myController">
<form>
<textarea ui-tinymce="tinymceOptions" class = "text1" id="mytextarea" 
>Hello, World!</textarea>
</form>
</body>
</html>

Javascript文件：

var myAppModule = angular.module('myApp', ['ui.tinymce']);
myAppModule.controller('myController', function($scope) {
tinyMCE.init({
selector: "text1"
})
$scope.tinymceOptions = {
plugins: 'link image code',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | 
code'
};
})

这是我运行代码后得到的

请考虑以下代码，它应该有效：

var myAppModule = angular.module('myApp', ['ui.tinymce']);
myAppModule.controller('myController', function ($scope) {
    tinyMCE.init({
        selector: "text1"
    })
    $scope.tinymceOptions = {
        plugins: 'link image code',
        toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code '
    };
    $scope.model= "text";
})

<html>
<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.js"></script>  
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.9.5/tinymce.min.js"></script>
  <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tinymce/0.0.19/tinymce.js'></script>
  <!-- AngularUI TinyMCE -->
  <script type="text/javascript" src="index.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
  <form>
    <textarea ui-tinymce="tinymceOptions" class="text1" id="mytextarea" ng-model="model">Hello, World!</textarea>
  </form>
</body>
</html>

与

代码相比的更改：

在HTML中，我插入了ng-model，因为它是tinymce指令所要求的。我还通过$scope.model= "text";初始化了 JavaScript 代码中的值
在头脑中，我检查了链接并确保首先加载了 AngularJs(未缩小，因此可以看到错误，这是有道理的(，然后是基本的 tinymce，然后是 angular-ui-tinymce，最后是我的代码。我还检查过，所有链接都没有死。

附言片段无法正常工作。但是您可以从中复制代码并在本地尝试。

相关内容

最新更新

热门标签：