AngularJs定制样式插入到ueditor中的难点总计

 
 总结一下融洽给编辑器定制样式的经过中所遇到的标题,首如果编辑器的三回开发接口,以及用angular定制样式,难点多多,终于在**的赞助下,实现了,还剩下老版本和新本子的竞相未有弄好,不过简单。上面分别授课难题。

   ueditor的开发

 
 你能够在官网上下载任意版本,举行应用即可:http://ueditor.baidu.com/website/download.html 下载后遵照官网上的布局就足以运用。文书档案地址:http://fex.baidu.com/ueditor/ 关于ueditor三次开发难点还真不少,那里列出来。

   一.ueditor自动将div标签过滤变为p标签

   
 在定制样式经过中,发现div全部被过滤未p标签,网上找了更仆难数资料,但都不行,后来看到有大神写到,分歧版本的ueditor配置差异,那里写下自个儿的消除办法是:打开ueditor.config.js配置文件,添加上面包车型大巴代码:

  , allowDivTransToP: false

   
 注意是在window.UEDIROE_CONFIG里面手动添加!别的也有人遭受类似的景况化解办法,那里能够参见:http://www.cnblogs.com/Olive116/p/3464495.html

   2.什么把定制的体裁插入到编辑器里面呢?

   在编辑器里面提供了接口,大家来看望。

function insertHtml() {
        var value = prompt('插入html代码', '');
        UE.getEditor('editor').execCommand('insertHtml', value)
    }

那么如何在我们温馨的项目中央银行使该接口呢?首先要实列化编辑器,平常是直接使用UE.get艾德itor()来取得实例。

//使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例

利用从前我们必要先把该编辑器引进进来,才能调用其格局。

<script src=”libs/ueditor/ueditor.config.js”></script>
<script src=”libs/ueditor/ueditor.all.min.js”></script>

在我们的angular的项目中开创编辑器实例如下,编辑器提供ready的点子来实例化:

// 创建编辑器的实列
  $scope.ready = function (ueditor) {
    window.editor = ueditor;
  };

OK,咱们未来就可以利用editor那么些编辑器实例了。接下来看看ng定制的样式。

   ng定制的体裁

 
 先来看下,大家用手写的手风琴菜单样式。下载地址:https://github.com/foreverjiangting/set-menu/tree/master/menu 那里运用的相互使用了data-toggle=”collapse”,但和ng有争持,所以须要用ng来控制交互。大家来探视怎么写:
 

 <!-- 添加工具栏 -->
            <div class="set-toolbar">
              <h4 class="text-center">工具栏</h4>
              <!-- sidebar content -->
              <div class="sidebar-menu">
                <a ng-click="toggle('titleStyle')" class="nav-header menu-first " >首页</a>
                <ul ng-hide="titleStyle" id="userMeun" class="nav  nav-list  menu-second">
                    <li ng-repeat="title in sources.titles" ng-click="insertHtml('titles', title)"><a>{{title.name}}</a></li>
                </ul>

                <a ng-click="toggle('titleIcon')" class="nav-header menu-first">图标</a>
                <ul ng-hide="titleIcon" id="articleMenu" class="nav nav-list  menu-second">
                  <li class="set-image" ng-repeat="img in sources.imgs" ng-click="insertHtml('imgs', img)"><a><img ng-src="{{img.url}}"></a></li>

                </ul>

                <a ng-click="toggle('titleYouxia')" class="nav-header menu-first ">生活</a>
                <ul ng-hide="titleYouxia" id="glyphicnMenu" class="nav nav-list  menu-second">
                  <li ng-repeat="yx in sources.yxs" ng-click="insertHtml('yxs', yx)"><a>{{yx.name}}</a></li>
                </ul>

                <a ng-click="toggle('titleServe')" class="nav-header menu-first ">留言板</a>
                <ul ng-hide="titleServe" id="serveMenu" class="nav nav-list  menu-second">
                  <li ng-repeat="ser in sources.sers" ng-click="insertHtml('sers', ser)"><a>{{ser.name}}</a></li>
                </ul>

                 <a ng-click="toggle('titleArticle')" class="nav-header menu-first ">推荐文章</a>
                <ul ng-hide="titleArticle" id="ArticleMenu" class="nav nav-list  menu-second">
                  <li ng-repeat="arc in sources.arcs" ng-click="insertHtml('arcs', arc)"><a>{{arc.article}}</a></li>
                </ul>
              </div>
              <!-- 内容主题结束 -->
            </div>

js里面包车型地铁代码如下:

 // 工具栏交互样式
  $scope.titleStyle = $scope.titleIcon = $scope.titleYouxia = $scope.titleServe = $titleArticle=false;
  $scope.toggle = function(style){
        $scope[style] =! $scope[style];
    }

ng控制的手风琴效果,简单便捷,代码量少。效果如下:

图片 1

体制写好将来正是插入到编辑器中,那么如何插入呢?那里有三种,间接插,和依照查找之后的作品展开插队。直接插入的话比较不难。

$scope.insertHtml = function (type, item) {
    if (type === 'titles' || type === 'imgs') {
      editor.execCommand('insertHtml', item.html);
    } 

安插之后的成效如下:

图片 2

自然大家这么做有何用吧?首若是应用编辑器里面包车型地铁内容,利用ng数据绑定,反映到app上,从而制作app的篇章编辑界面。

     搜索的机能制作

   
 数据自然是从api里面获得,ng怎么样收获api里的数额吧?咱们来探望,重如果运用$http,获取数据,然后利用then方法开始展览回调,获得$scope.data的数据。

angular.module('service')
.service('ArticleService', function ($http) {
  return {searchArticle: function(title){ return $http.get('api/article/search',{ data: { title:title } }); } }; });

   
 那里我们注明了Article瑟维斯,并给它回到了api数据,那么大家将该信赖注入要调用的页面即可调用其格局。依旧看下代码:通平常服装务调用

API重返的数额放在三个文书夹里面而控制数据的控制器单独放在1个文本夹里面,那么我们来看下控制器里是何等回调api的数据。

angular.module('article.controllers')
.controller('serviceCtrl', function ($scope, $rootScope, $filter, $timeout, $state, $stateParams, ContentService,, ArticleService, type) {

只顾,你必要把ArticleService注入到控制器里面,然后才能回调数据。怎么回调数据吧?看上面的代码:

var arcfullSearch={
      text: '',
      result: [],
      selected: [], //选择后的数据先存入数组
      beginSearch: function () {
          var self = this;
          var text = self.text.trim();
          if(!text) return;
          ArticleService.searchArticle(text).then(
            function (data){    
            //获取得到数据   第二个data表示获取数组里的内容,第一个是传进来的参数 
               self.result = data.data;//获取数据
            }, function (err) {
               console.log(err);
            });          
      },
  };

OK,大家中标的回调到了函数数据。关于寻找部分,上边总括下不知情的知识点。

 
总计知识点

一.什么样将数组变成字符串的写法

图片 3

二.关于replace替换为函数的用法

 
 ECMAScript规定,replace()方法的参数replacement能够是函数也得以是字符串。在那种情状下,每种相配都调用该函数,它回到的字

符串将替换文本使用。function回调函数再次来到的率先个参数表示极度到的字符,第一个以及之后都是合营到的分组数据。来看下代码。

图片 4

 

3.关于[p.slice(0,index)][p.slice(index+1)]是怎么鬼?调节和测试一下就理解了。

图片 5

 再来看待合成代码就知道了怎么看头。

var arr = serve.map(function (xx) {
      return item.html.replace(/{{([\w\.]+?)}}/gi, function (match, p) {
             var index = p.indexOf('.'); 
             if (index > 0) {
                return formatField(xx[p.slice(0, index)][p.slice(index+1)]);
              } else {
                return formatField(xx[p]);
              }
      }); 
});

四.有关定时器setTimeout的规律,先来探望代码

图片 6

  为何输出的是-一呢?大家先来看下原理setTimeout() 

  set提姆eout() 只进行 code 2遍。若是要频仍调用,请使用
setInterval() 只怕让 code 自个儿再度调用 set提姆eout()。

  setTimeout
运用在延迟壹段时间,再展开某项操作。即在载入后推移钦赐时间后,去履行1遍表明式,仅执行三遍。

setTimeout(代码,延迟时间);

该延迟时间并不是你期望的时刻,不相同的浏览器,延迟时间不壹致。拿地点例子来看,也等于说延迟时间并不是地方的0。相比较来看

图片 7

也正是说setTimeout只举行一回,但时间并不是0,具体为多少秒延迟,不显明。那么就正常,为何出现的为-一了。大家来分析下该程序,

当i=叁时,while(叁)后,i减为贰,执行多个setTimeout 

当i=二时,while(二)后,i减为一,执行二个set提姆eout

当i=1时,while(0)后,i减为二,执行3个setTimeout

当i=0时,while(0)后,i减为-1,此时程序结束,但设置setTimeout的时辰间隔
为0 不会精通 执行的,会插入到线程的实施队列中,等到i

成为-一时候,才会履行前边的四个setTimeout,而此时i已经济体改成-1了,所以,输出为-一.那儿打字与印刷的console是前边那几个console打字与印刷出来的

    setTimeout是异步代码,也便是说那样写setTimeout(fn,
十0)并不表示fn肯定在100纳秒之后马上就执行,延迟很可能会越来越长。因为全部的

异步事件(包含计时器、只怕1个 XMLHttpRequest
完毕)仅仅当程序执行时期有空闲的时候才会举行,不是您分明了哪些时候就像什么日期候实施。


 作者:婷风

 出处:http://www.cnblogs.com/jtjds/p/5722802.html 

 假诺你认为阅读本文对你有扶持,请点一下“推荐”按钮,您的“推荐”将是自身最大的写作引力!欢迎各位转发,但是未经作者自家同意 **

**转发小说之后**必须在
作品页面明显地点给出作者和原著连接**不然保留追究法律权利的职务。**