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. Linux Strip

    一.简介 strip经常用来去除目标文件中的一些符号表.调试符号表信息,以减小程序的大小. 二.语法 https://sourceware.org/binutils/docs/binutils/str ...

  2. windows server 2003下安装.net framework 3.5 一直安装不成功

    安装包是在微软下载中心下的197m的文件 重启了也是不行,最后 找到.net framework 3.5 sp1 一个237m的安装包 安装成功了! Congratulations ! ​

  3. Python中的库使用之一 PIL

    先上代码:本文主要工给自己参考,在需要的时候直接搜索查找就行了,不想看没有实际运行例子的文档,当参考完这部分还哦未能解决问题在参考PIL的相关文档! Skip to content This repo ...

  4. sigemptyset,sigfillset,sigaddset,sigdelset,sigismember,sigprocmask,sigpendmask作用

    SYNOPSIS #include <signal.h> int sigemptyset(sigset_t *set); int sigfillset(sigset_t *set); in ...

  5. Canvas修行之黑客帝国代码雨

    既然是修行,不卖弄关子,不吊胃口,修行成果必须先晒一晒. 下图是我用canvas画的黑客帝国代码雨,想起当年看黑客帝国时,那个代码雨场景让我心旷神怡,大开脑洞,满脑子是那种三维空间,无数0和1像雨一样 ...

  6. UESTC 900 方老师炸弹 --Tarjan求割点及删点后连通分量数

    Tarjan算法. 1.若u为根,且度大于1,则为割点 2.若u不为根,如果low[v]>=dfn[u],则u为割点(出现重边时可能导致等号,要判重边) 3.若low[v]>dfn[u], ...

  7. eclipse菜单解释及中英对照

    在使用Eclipse作为开发工具的时候,建议使用英文版本的(直接百度从官网下就行,这里不详细描述,如果有问题,咱们私聊).虽然中文版本的对于和我一样对英文是小白的看起来特别爽,但是公司大多是英文版本的 ...

  8. Spring 一二事（3） - 别名

    别名就是可以通过另外一个名字来访问如下,已有bean:helloWorld3,那么定义别名(alias )后,就能使用“abc”来访问 <bean id="helloWorld3&qu ...

  9. jstat使用

    jstat -gcutil pid 统计gc信息统计.其中最后五项,分别是young gc的次数,young gc的时间,full gc的次数,full gc的时间,gc的总时间.

  10. WebService wsdl没有types的问题

    刚学WebService就遇到一个问题,按视屏敲的代码,它生成的wsdl页面与自己的不一样,我的没有types,结构完全不同了 This XML file does not appear to hav ...