angularjs+ueditor配置工具栏及使用,解决了第一次加载之后第二次加载失败的问题

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();

猜你喜欢

转载自blog.csdn.net/qq_33653393/article/details/80927139