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. Android 内存分析

    1.使用adb命令查看app内存使用情况 adb shell dumpsys meminfo <package_name> adb shell top | grep <package ...

  2. 用SecureCRT在windows和CentOS间上传下载文件

    安装lrzsz: # yum -y install lrzsz 现在就可以正常使用rz.sz命令上传.下载数据了 配置SecureCRT的session选项的SFTP标签页和X/Y/Zmodem中的目 ...

  3. IPC之PIPE

    管道是一种只允许用在有亲属关系的进程间通信的方式,由函数pipe创建一个管道,read,write进行读写操作. #include <unistd.h> ]); 参数pipefd[2]数组 ...

  4. 谈MongoDB读取连接超时的异常

    今天在现场的哥们发来异常,让我解决,错误信息如下: HTTP Status 500 - Read operation to server 192.168.1.110:20001 failed on d ...

  5. 软件工程实训项目案例--Android移动应用开发

    实训过程 角色分工 1.项目经理:负责项目的组织实施,制定项目计划,并进行跟踪管理 2.开发人员:对项目经理及项目负责 3.需求分析员:负责系统的需求获取和分析,并协助设计人员进行系统设计 4.系统设 ...

  6. 关于CSS中的字体尺寸设置 em rem等

    常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...

  7. python刷题专用函数。。

    无它,非bin()莫属. bin(x) Convert an integer number to a binary string. The result is a valid Python expre ...

  8. 在springmvc中使用hibernate-validate

    在springmvc.xml中加入 <!-- 国际化配置 --> <bean id="localeResolver" class="org.spring ...

  9. Spring 一二事（2）

    静态工厂方法及实例工厂的使用: applicationContext.xml: <!-- factory-method 是指调用静态工厂方法 --> <bean id="h ...

  10. 数据结构Java实现04----循环链表、仿真链表

    单向循环链表 双向循环链表 仿真链表 一.单向循环链表: 1.概念: 单向循环链表是单链表的另一种形式,其结构特点是链表中最后一个结点的指针不再是结束标记,而是指向整个链表的第一个结点,从而使单链表形 ...