2013-09-18 3 views
2

Я пытаюсь использовать директиву углового ui tinymce. Я использовал Nuget для получения пакетов угловых ui (v 0.4.0), tinymce.jquery (v 4.0.6) и tinymce (v 4.0.6). Я добавил пользовательский интерфейс директиву на мой угловой модуль и ссылки на следующие сценарии (в порядке убывания) на моей странице:Использование угловых-ui и tinymce

<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), указанный в моем заголовке в консоли javaScript от Chrome.

Я искал в Интернете и пробовал такие предложения, как изменение списка ссылок на скрипт, но ничего, что я пробовал, работает. Не хватает ли ключевого компонента, есть ли у меня неправильные ссылки (или не по порядку) или что-то еще? Я приступил к некоторым скриптам, но большинство из них сломано или вниз. Я еще не видел того, что дает рабочую демонстрацию, которую я могу использовать.

EDIT: Хорошо, теперь я получаю сообщение об ошибке: «Невозможно вызвать метод« Добавить »из неопределенного» на угловом-ui.min. Я ничего не изменил в коде, так что возможно, что исходное сообщение об ошибке было из предыдущей попытки?

ответ

2

Ошибка, которую вы получаете, происходит из-за несоответствия версии между крошечным mce (4.0.6) и пакетом углового ui (0,40).

Глядя на апи для 4.x для TinyMCE onSetContent() не существует, и был заменен .on()

Это выглядит как ed.onSetContent() exists in TinyMCE 3.x.

С учетом сказанного, если вы замените пакет tinymce на версию 3.x, все должно теперь прекрасно сочетаться.

Установленные пакеты

<?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