tinymce - 使用 Angular-UI 和 TinyMCE

标签 tinymce angular-ui

我正在尝试使用 angular-ui tinymce 指令。我使用 Nuget 获取 angular-ui (v 0.4.0)、tinymce.jquery (v 4.0.6) 和 tinymce (v 4.0.6) 软件包。我将 ui 指令添加到我的 Angular 模块中,并在我的页面上引用了以下脚本(按顺序):

  <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/tinymce/tinymce.min.js"></script>
    <script src="Scripts/tinymce/jquery.tinymce.min.js"></script>
    <script src="lib/angular/angular.min.js"></script>
    <script src="Scripts/angular-ui.min.js"></script>

当我导航到包含我用 ui-tinymce ng-model="tinymce" 装饰的文本区域的部分时,我可以看到我的列表中列出的错误 (angular.min.js) Chrome 的 JavaScript 控制台中的标题。

我已经在网络上进行了搜索并尝试了一些建议,例如更改脚本引用的列表,但我尝试过的任何方法都不起作用。我是否缺少一个关键组件,是否有错误的引用(或无序),或者其他什么?我遇到过一些 fiddle ,但大多数都坏了或坏了。我还没有看到一个可以提供我可以使用的工作演示的产品。

编辑:好的,现在我收到错误:“无法在 angular-ui.min 调用未定义的方法‘Add’”。我没有更改代码中的任何内容,因此原始错误消息可能来自之前的尝试?

最佳答案

您收到的错误是由于 tiny-mce (4.0.6) 和 angular-ui (0.40) 包之间的版本不匹配而发生的。

查看tinyMCE 4.x 的api onSetContent() 不存在,已被替换为 .on()

看起来像ed.onSetContent() exists in TinyMCE 3.x .

话虽这么说,如果您用 3.x 版本替换tinymce 软件包,那么现在一切都应该可以很好地协同工作。

已安装的软件包

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="Angular.UI" version="0.4" targetFramework="net45" />
  <package id="angularjs" version="1.0.7" targetFramework="net45" />
  <package id="jQuery" version="1.9.1" targetFramework="net45" />
  <package id="Select2.js" version="3.2.1" targetFramework="net45" />
  <package id="TinyMCE" version="3.5.8" targetFramework="net45" />
  <package id="TinyMCE.JQuery" version="3.5.8" targetFramework="net45" />
</packages>

安装软件包后,您可以使用以下 View 将其全部连接起来:

<body ng-app="MyApp">

    <textarea ui-tinymce="" ng-model="tinymce"></textarea>
    {{tinymce}}
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-ui.js"></script>
    <script src="Scripts/tinymce/tiny_mce.js"></script>
    <script src="Scripts/tinymce/jquery.tinymce.js"></script>

    <script>
        var myApp = angular.module("MyApp", ["ui"])
    </script>
</body>

Working application on github

关于tinymce - 使用 Angular-UI 和 TinyMCE,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18878146/

相关文章:

angularjs - 使用 angularjs 显示加载图标或加载进度条

tinymce - 按tab键时如何选择tinyMCE文本区域?

function - 如何在tinymce中插入自定义函数,

javascript - 如何以编程方式打开链接工具栏按钮的模式对话框?

javascript - 触发TinyMce文件上传

javascript - Angular UI-Router 在一种状态下有更多可选参数

Python Mechanize 写入 TinyMCE 文本编辑器

angularjs - 如何从 AngularUI 预输入输入中清除文本

javascript - AngularJS:如何验证美国格式的日期?

javascript - 在 angular-ui 模式中显示谷歌地图?