1.安装ueditor
去angular库中下载:
npm install ueditor --save
去ueditor下载相关依赖点击打开链接
我下载的是jsp1.4.3 utf-8版本。
拷贝至项目的目录下
2.在html中加入js
<script src="ueditor/ueditor.config.js"></script>
<script src="ueditor/ueditor.all.js"></script>
<script src="../../lib/js/angular-ueditor/dist/angular-ueditor.min.js"></script>
<script src="ueditor/lang/zh-cn/zh-cn.js"></script>
如果不加zh-cn.js会包缺少语言包的错
嵌入ng.ueditor
var adminHome = angular.module('adminHome', [
'ng.ueditor'
]);
插入ueditor插件
<div class="form-group">
<label class="control-label col-sm-2">内容<span class="red">*</span></label>
<div class="col-sm-10">
<textarea id="container" name="content" type="text/plain">
</textarea>
</div>
</div>
使用ng-model双向绑定不生效,在controller的写法会具体阐述。
3.controller
首先配置一个自定义的工具栏的ueditor
//解决加载一次之后,第二次不能初始化的问题
UE.delEditor('container');
var ue = UE.getEditor('container',{
initialFrameWidth :'100%',//设置编辑器宽度
initialFrameHeight:'40%',//设置编辑器高度
scaleEnabled:true,
//配置工具栏
toolbars:[
['fullscreen', 'source', 'undo', 'redo', 'bold']
],
autoHeightEnabled: true
})
init();
function init(){
//编辑器创建成功后,才可以使用setContent()给编辑器设置内容
ue.addListener("ready",function () {
ue.setContent("<p>hellop</p>");
})
}
测试时可以换成中文试下是否成功
获取编辑器的内容(是带格式的html)
var temp = ue.getContent();