javascript - 在 Angular-Fullstack 中设置 TinyMCE

Question

因此，我尝试按照通常的方式在 Angular-Fullstack 项目中设置 TinyMCE。

像这样:

<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
    tinymce.init({
        selector: "textarea"
    });
</script>

<div>
    <h1>
        New chapter
    </h1>

    <form class="form" name="form" ng-submit="save(form)" novalidate>
        <div class="form-group">
            <label class="sr-only" for="title">Title</label>
            <input class="form-control" name="title" type="text" placeholder="enter title here" required ng-model="entry.title" />
        </div>

        <div class="form-group">
            <select required ng-model="entry.language">
                <option disabled>Choose language</option>
                <option ng-repeat="e in languages" value="{{e._id}}">{{e.name}}</option>
            </select>
        </div>

        <div class="form-group">
            <label class="sr-only" for="content">Content</label>
            <textarea ng-model="entry.content" id="textarea" name="content" ></textarea>
        </div>

        <button type="submit" class="btn btn-success" id="save-btn"><span class="glyphicon glyphicon-ok"></span> Save</button>
    </form>
</div>

<hr>

<div>
    <h1>{{entry.title}}</h1>
    <br/>
    <span ng-bind-html-unsafe="entry.content"></span>
</div>

这根本不会改变我的文本区域。 Angular-fullstack 中是否有某些东西阻止您使用像这样的普通附加组件？

Answer 1

您似乎正在使用ui-tinymce。您不需要tinymce.init:

JS:

var app = angular.module('app', ['ui.tinymce']);

app.controller('myController', function($scope) {
    $scope.tinymceOptions = {};
    $scope.entry = {};
});

HTML:

<textarea ui-tinymce="tinymceOptions" ng-model="entry.content"></textarea>

http://plnkr.co/edit/4AzSZp3xD3lzJwzrOVk0?p=preview