angularjs整合ueditor简介

最新推荐文章于 2022-09-22 07:12:42 发布

原创最新推荐文章于 2022-09-22 07:12:42 发布 · 779 阅读

CC 4.0 BY-SA版权

本文介绍了如何将轻量级、高度可定制且注重用户体验的富文本编辑器 UEditor 与 AngularJS 框架进行整合。通过下载 UEditor 的 Angular 组件并设置相关依赖，实现 UEditor 在 AngularJS 应用中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

UEditor是一个富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码,本文介绍的是Ueditor与angular JS整合的方法。

第一步：在网上下载ueditor的angular组件，直接复制粘贴你要的文件夹下面，建立依赖。

目录结构类似于这种。

建立依赖，这一步就是引入需要的文件。

    <script src="angular/angular.min.js"></script>
    <script src="angular/angular-animate.js"></script>
    <script src="angular/angular-touch.js"></script>
    <script src="angular/angular-ui-router.js"></script>
    <script src="angular/ui-grid.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script  charset="utf-8" src="./angular-ueditor/angular-ueditor.js"></script>
    <script src="angular-ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="./angular-ueditor/ueditor.all.js"></script>

第二步:构建ueditor结构

<div class="ueditor" id="container" ng-model="contentVO.content" config="config" name="content"
        style="margin-bottom: 20px;margin-top:30px;width:600px;height:400px;display:none;z-index: 1!important;"
        ></div>

第三步：配置ueditor，最简单的配置就是初始化富文本内容即可。

完整的配置示例：

  $scope.config={
            //初始化编辑器内容
             content : '<p>test1</p>',
             //是否聚焦 focus默认为false
             focus : true,
             //首行缩进距离,默认是2em
             indentValue:'2em',
             //初始化编辑器宽度,默认1000
             initialFrameWidth:1000,
             //初始化编辑器高度,默认320
             initialFrameHeight:320,
             //编辑器初始化结束后,编辑区域是否是只读的，默认是false
             readonly : false ,
             //启用自动保存
             enableAutoSave: false,
             //自动保存间隔时间， 单位ms
             saveInterval: 500,
             //是否开启初始化时即全屏，默认关闭
             fullscreen : false,
             //图片操作的浮层开关，默认打开
             imagePopup:true,
             //提交到后台的数据是否包含整个html字符串
             allHtmlEnabled:false,
             functions :['map','insertimage','insertvideo','attachment','insertcode','template', 'background', 'wordimage']
        };

配置完成后视图：