首页 > 其他分享 >angular的编辑器tinymce

angular的编辑器tinymce

时间:2023-01-13 15:33:53浏览次数:57  
标签:app tinymce 编辑器 bower scope ui angular

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

效果图

angular的编辑器tinymce_html


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

  总结,很简单的插件啊;

天道酬勤



标签:app,tinymce,编辑器,bower,scope,ui,angular
From: https://blog.51cto.com/u_12304260/6006076

相关文章

  • angular实例教程(用来熟悉指令和过滤器的编写)
    angular的插件太少了, 所以很多指令和过滤器都要自己写, 所以对指令传进来的参数,以及angular编译的流程更加熟悉才行写出好的插件,有些简单的指令是参考​​angu......
  • angular的工具方法笔记(equals, HashKey)
    分别是angular脏值检测的工具方法equals和类HashKey的使用方法<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml......
  • angular的canvas画图例子
    angular的例子:<!DOCTYPEhtml><htmlng-app="APP"><head><metacharset="UTF-8"><scriptsrc="http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"></......
  • angular例子笔记
    学习angular的插件写法和制作; <!DOCTYPEhtml><htmlng-app="APP"><head><metacharset="UTF-8"><title>angular-refreshexample</title><scriptsrc="h......
  • angularJS中-$route路由-$http(ajax)的使用
    后台请求使用的是nodeJS驱动(后面帖代码),很简单的RESTFUL,页面使用的是bottstarp3.0(懒人神器); 第一个例子:在本地架设NODEJS,angular的所有请求都是请求本地的300......
  • angular_$inject
    <!DOCTYPEHTML><htmllang="zh-cn"ng-app="MainApp"><head><metacharset="UTF-8"><title>explicit-inject-service</title></head><body><divng-controller="My......
  • Angularjs——初识AngularJS
    AngularJS——初识AngularJSAngularJS是什么AngularJS是Google开源的一款前端JS结构化框架,它通过对前端开发进行分层,极好地规范了前端开发的风格——它将前端开发分为Con......
  • Angular集成bpmn.js的基础实现及扩展(一)
    一、bpmn的基本认识bpmn.js是一个BPMN2.0渲染工具包和web建模器,使得画流程图的功能在前端来完成。bpmn画图具有哪些内容?二、使用npm安装bpmn.jsnpminstall--sav......
  • 图片验证码,发送邮箱,富文本编辑器
    @目录图片验证码1、安装2、设置3、建立表单4、实现邮件发送1、settings.py配置2、发送邮件富文本编辑器1、安装2、settings.py设置3、实现图片验证码1、安装pipinstall......
  • macOS 设置vim编辑器语法高亮、显示行号
    1、切换到~/目录下cd~/2、新建.vimrc文件vi.vimrc3、编辑.vimrc文件内容syntaxonsetnusetautoindentsetcindent效果如下:......