Question

我正在尝试使用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"修饰的textarea的部分时，我可以在Chrome的javaScript控制台中看到我的标题中列出的错误（angular.min.js）。

我搜索了网页并尝试了一些建议，例如更改脚本引用的列表，但我尝试过的任何内容都没有。我错过了一个关键组件，我是否有不正确的引用（或无序），或其他什么？我来到了一些小提琴，但大多数都被破坏了。我还没有看到一个可以使用的工作演示。

编辑：好的，现在我收到错误：“无法在angular-ui.min调用方法'添加'未定义'。我没有更改代码中的任何内容，因此原始错误消息可能来自之前的尝试？

Answer 1

您正在接收的错误是由于tiny-mce（4.0.6）和angular-ui（0.40）包之间的版本不匹配而发生的。

查看用于tinyMCE onSetContent()的4.x的api不存在，并且已替换为.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>

安装软件包后，您可以使用以下视图进行连接：

<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

使用angular-ui和tinymce

1 个答案: