angular的編輯器tinymce

發(fā)布時(shí)間：2020-05-30 13:55:33 來源：網(wǎng)絡(luò) 閱讀：415 作者：張濤澤欄目：網(wǎng)絡(luò)安全

效果圖

angular的編輯器tinymce
　　通過nodejs的 npm 的bower安裝依賴安裝, 命令行下執(zhí)行 bower install angular-ui-tinymce ; 注意(bower和git要是本地的全局變量)

　　等待bower自動(dòng)下載完畢以后，在DEMO的頁面引用幾個(gè)JS文件;

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

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

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

　　不用加載css文件, js已經(jīng)幫助我們加載了, 所以在本地要開啟chrome的允許本地cros;

　　只要一個(gè)控制器, 控制器里面是初始化配置, 不用配置就是默認(rèn)的配置（沒啥子配置要改的）;

　　HTML和JS的代碼改都不用改, 直接復(fù)制即可;

運(yùn)行下面代碼

angular的編輯器tinymce

<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 = {
　　　　　　　　　　　　//配置回調(diào)的事件
                    handle_event_callback : function(e) {
                        console.log(e);
                    }
                };
                $scope.tinymceModel = "niceMCE"//初始化綁定的值
            });        </script></body></html>

angular的編輯器tinymce

　　總結(jié)，很簡(jiǎn)單的插件啊；

新航道雅思

向AI問一下細(xì)節(jié)

angular的編輯器tinymce

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽