angularjs - 如何将 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 指令需要它。我还通过以下方式初始化了 JavaScript 代码中的值
$scope.model= "text";
- 在头中,我检查了链接并确保加载了第一个 AngularJs(未缩小,因此可能会看到错误,这是有道理的),然后是基本的 tinymce,然后是 angular-ui-tinymce,最后是我的代码。我还检查了所有链接都没有死。
ps 片段无法正常工作。但是您可以从中复制代码并在本地尝试。
推荐阅读
- python - Call parent class from child class PyQT5
- android - Provide current activity in constructor Dagger
- sql - SQL Select up to a certain sum
- mongodb - 根据子数组元素的值计算行数
- java - 互联网许可在奥利奥和派中不起作用
- android - 设备管理接收器在少数版本中不起作用
- xml - JaxB 类的 DTD 验证
- c# - C#.net:意外双击一个按钮显示2种不同的形式
- ios - iOS沙箱独立文件路径
- c# - How to create model without using Entity Framework in C#?