首页 > 代码库 > angular的编辑器tinymce

angular的编辑器tinymce

效果图

技术分享
  通过nodejs的 npm 的bower安装依赖安装, 命令行下执行 bower install angular-ui-tinymce ; 注意(bower和git要是本地的全局变量)

  等待bower自动下载完毕以后,在DEMO的页面引用几个JS文件;

1
2
3
<script type="text/javascript" src=http://www.mamicode.com/"app/bower_components/tinymce/tinymce.js"></script>
<script type="text/javascript" src=http://www.mamicode.com/"app/bower_components/angular/angular.js"></script>
<script type="text/javascript" src=http://www.mamicode.com/"app/bower_components/angular-ui-tinymce/tinymce.js"></script>


  不用加载css文件, js已经帮助我们加载了, 所以在本地要开启chrome的允许本地cros;

  只要一个控制器, 控制器里面是初始化配置, 不用配置就是默认的配置(没啥子配置要改的);

  HTML和JS的代码改都不用改, 直接复制即可;

  

运行下面代码

技术分享

<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="bower_components/tinymce/tinymce.min.js"></script>
        <script src="bower_components/angular/angular.min.js"></script>
        <script src="bower_components/angular-ui-tinymce/src/tinymce.js"></script>

    </head>
        
    <body ng-controller="editorController">
        <form method="post">
            <textarea ui-tinymce="tinymceOptions"  ng-model="tinymceModel"></textarea>
        </form>
        
        <script>
            var app = angular.module(app, [ui.tinymce])
            app.controller("editorController", function( $scope ) {
                $scope.tinymceOptions = {
            //配置回调的事件                    handle_event_callback :
function(e) {                        console.log(e);                    }                };                $scope.tinymceModel = "niceMCE"//初始化绑定的值            });        </script> </body></html>

技术分享

  总结,很简单的插件啊;


angular的编辑器tinymce