angular的编辑器tinymce

发布时间：2020-12-17 09:25:01 所属栏目：安全来源：网络整理

导读：效果图 650) this.width=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="" style="border:none;margin:20px auto;" src="http://images.cnitblog.com/blog/497865/201412/241130040628900.png"> 通过nodejs的 npm 的bower安装依赖安装,命令

效果图

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

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

<script type= "text/javascript" src= "app/bower_components/tinymce/tinymce.js" ></script>

"app/bower_components/angular/angular.js" ></script>

"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"></scriptsrc="bower_components/angular/angular.min.js"="bower_components/angular-ui-tinymce/src/tinymce.js">

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

　　总结，很简单的插件啊；

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!