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. uva 12655 Trucks [LCA]（树链剖分+MST）

    The Subtle Balloons Company (SBC) is the main balloon provider for programming contests; it hashuge ...

  2. js追加元素，以及元素位置

    function setShow(val_param,text){ var ul = document.getElementById("copyhere"); //<li&g ...

  3. Hive variable demo

    create table ori_trans (account string, maker string, tdate string) partitioned by (country string); ...

  4. 关于extern和static关键字引出的一些关于作用域和链接属性和存储类型的问题

    在进入正题前我们必须了解一些概念: 标识符:标识符不仅仅代表着变量的名字,main()函数的main也是一个标识符,这点很重要. 存储类型:即变量的存储位置及其生存周期:静态区:分为两块 .date ...

  5. selenium循环点击文本框

    1.可以用xpath循环点击checkbox List<WebElement> list = dr.findElements(By.className("datagrid-row ...

  6. 【实践】获取CKEditor的html文本、纯文本、被选中的内容及赋值

      <%=Html.TextAreaFor(Model => Model.WORK_INTRODUCTION)%> <script type="text/javasc ...

  7. C#委托与C语言函数指针及函数指针数组

    C#委托与C语言函数指针及函数指针数组 在使用C#时总会为委托而感到疑惑,但现在总新温习了一遍C语言后,才真正理解的委托. 其实委托就类似于C/C++里的函数指针,在函数传参时传递的是函数指针,在调用 ...

  8. SPOJ AMR12A The Black Riders --二分+二分图最大匹配

    题意:有n个人,m个洞.每个洞能容纳一个人,每个人到每个洞需要花费一些时间.每个人到达一个洞后可以花C的时间来挖一个洞,并且最多挖一个洞,这样又能多容纳一人.求能使至少K个人进洞的最短时间. 解法:看 ...

  9. 前端MVC学习总结（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...

  10. brainfuck

    /阅读这样的代码就像在强奸你的大脑 #include<stdio.h> #include<ctype.h> #include<stdlib.h>  #include ...