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文件;

<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>

　　总结，很简单的插件啊；

angular的编辑器tinymce的更多相关文章

  1. 富文本编辑器TinyMCE的使用(React Vue)

    富文本编辑器TinyMCE的使用(React Vue) 一,需求与介绍 1.1,需求 编辑新闻等富有个性化的文本 1.2,介绍 TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器. Tin ...

  2. 富文本编辑器 tinymce 的安装与使用

    百度的富文本编辑器大家都熟悉,那么下面给大家介绍一款富文本编辑器tinymce ,个人感觉比百度的界面好看,调用方便,就不知道各位大神怎么看咯! tinymce中文文档 以下是vue中使用示例,献上最 ...

  3. django后台集成富文本编辑器Tinymce的使用

    富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...

  4. angular 引入编辑器以及控制器的学习和理解。。。

    在angular中引入编辑器的时候花了很长时间,然后发现自己以前根本就没好好用过angular,因为项目是接手的学姐的,学姐又是接手的学姐的,到我这里就只是写写页面的事了. 引入编辑器差了好多好多资料 ...

  5. 富文本编辑器TInyMCE,本地图片上传（Image Upload）

    TinyMCE 官网 (类似:百度的富文本web编辑器UEditor) 第一步 下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js. 第二步 下载tinyMCE ...

  6. TinyMCE logo 可视化HTML编辑器 TinyMCE

    TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,支持目前流行的各种浏览器,由JavaScript写成.功能配置灵活简单(两行代码就可以 将编辑器嵌入网页中),支持AJAX.另一特点是加载速度 ...

  7. Java开发之富文本编辑器TinyMCE

    一.题外话 最近负责了一个cms网站的运维,里面存在很多和编辑器有关的问题,比如编辑一些新闻博客,论文模块.系统采用的是FCKEditor,自我感觉不是很好,如下图 特别是在用户想插入一个图片的话,就 ...

  8. 富文本编辑器TinyMCE

    最近项目中用到了javascript富文本编辑器,从网上找开源控件,发现很多可选,参考下面文章,列出了很多可用的插件http://www.cnblogs.com/ywqu/archive/2009/1 ...

  9. Django 之 富文本编辑器-tinymce

    这里的富文本编辑器以 tinymce 为例. 环境:ubuntu 16.04 + django 1.10 + python 2.7 ubuntu安装tinymce: python 2.7 $ sudo ...

随机推荐

  1. Hadoop中WritableComparable 和 comparator

    1.WritableComparable 查看HadoopAPI,如图所示: WritableComparable继承自Writable和java.lang.Comparable接口,是一个Writa ...

  2. IIS关于“ 配置错误 不能在此路径中使用此配置节”的解决办法

    IIS关于“ 配置错误 不能在此路径中使用此配置节”的解决办法 原文链接:http://www.cnblogs.com/200325074/p/3679316.html 今天刚安装好IIS8.5, 我 ...

  3. hdu-5497 Inversion(滑动窗口+树状数组)

    题目链接: Inversion Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  4. Java虚拟机详解04----GC算法和种类【重要】

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  5. 使用Android Studio搭建Android集成开发环境（图文教程）

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  6. Hibernate Java、Hibernate、SQL 之间数据类型转换

    Hibernate映射类型 Java类型 标准SQL类型  integer  java.lang.Integer  integer  long  java.lang.Long  bigint  sho ...

  7. SVN--分支、合并

    首先说下为什么我们需要用到分支-合并.比如项目demo下有两个小组,svn下有一个trunk版.由于客户需求突然变化,导致项目需要做较大改动,此时项目组决定由小组1继续完成原来正进行到一半的工作[某个 ...

  8. Oracle中sequence的使用方法

    在Oracle数据库中,sequence等同于序列号,每次取的时候sequence会自动增加,一般会作用于需要按序列号排序的地方. 1.Create Sequence (注释:你需要有CREATE S ...

  9. java10-3 equals方法

    public boolean equals(Object obj):指示其他某个对象是否与此对象“相等”.   该方法,默认情况下比较的是地址值.但是,如果只是比较地址值的话,一般来说意义不大,所以要 ...

  10. EasyUI概述

    EasyUI是基于jQuery的一套UI框架,主要应用场景是后台管理系统的UI开发. 其提供了以下几个模块的插件 1.布局 2.菜单与按钮 3.表单 4.窗口 可以让开发人员,特别是后端开发人员,在不 ...