angular的编辑器tinymce


　　angular的插件的确挺少的, 编辑器更是少, ui-tinymce是angular-ui推荐的一款编辑器(GIT: https://github.com/angular-ui/ui-tinymce );

　　效果图


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

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

?
1
2
3
<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已经帮助我们加载了, 所以在本地要开启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>
复制代码

　　总结，很简单的插件啊；

本文作者：方方和圆圆

本文链接：https://www.cnblogs.com/diligenceday/p/4181982.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   方方和圆圆  阅读(3830)  评论(1)  编辑  收藏  举报
历史上的今天：
2013-12-24 读JS高级——第五章-引用类型 _记录

再过一百年， 我会在哪里？

💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
➖
收起
点击右上角即可分享
微信分享提示
AI IDE Trae