AngularJs定制样式插入到ueditor中之题目总

 
 总结一下和谐叫编辑器定制样式的过程中所遇到的问题,主要是编辑器的二次开发接口,以及用angular定制样式,问题多,终于于**的帮扶下,完成了,还剩余老版与新本子的相互没有来好,不过好。下面分别教问题。

   ueditor的开发

 
 你得以公共网上下载任意版本,进行应用即可:http://ueditor.baidu.com/website/download.html 下充斥后随官网上的布置就得下。文档地址:http://fex.baidu.com/ueditor/ 关于ueditor二次开发问题还确确实实不丢掉,这里列下。

   1.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.getEditor()来博实例。

//使用工厂方法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 } }); } }; });

   
 这里我们声明了ArticleService,并被它回到了api数据,那么我们用拖欠依赖注入要调用的页面即可调用其方式。还是看下代码:通常服务调用

API返回的数据在一个文书夹里面如控制数据的控制器单独在一个文件夹里面,那么我们来拘禁下控制器里是什么样回调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,我们成之回调到了函数数据。关于寻找部分,下面总结下非知情的知识点。

 
总结知识点

1.安用数组变成字符串的写法

图片 3

2.关于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]);
              }
      }); 
});

4.关于定时器setTimeout的法则,先来探代码

图片 6

  为什么输出的凡-1也?我们先行来拘禁下原理setTimeout() 

  setTimeout() 只实行 code 一不成。如果一旦勤调用,请动
setInterval() 或者给 code 自身还调用 setTimeout()。

  setTimeout
运用在缓一段时间,再拓展某项操作。即以载入后延迟指定时间后,去执行同一破表达式,仅执行同样糟。

setTimeout(代码,延迟时间);

拖欠延迟时间并无是你希望之工夫,不同之浏览器,延迟时间不一样。拿地方例子来拘禁,也就是说延迟时间并无是方的0。对比来拘禁

图片 7

也就是说setTimeout只实行同样蹩脚,但日并无是0,具体也多少秒延迟,不确定。那么尽管不飞,为什么起的呢-1了。我们来分析下该次,

当i=3时,while(3)后,i减为2,执行一个setTimeout 

当i=2时,while(2)后,i减为1,执行一个setTimeout

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

当i=0时,while(0)后,i减为-1,此时先后结束,但设置setTimeout的年月距离
为0 不会见清楚 执行的,会插入到线程的履队列中,等到i

改为-1时刻,才会实行前的老三单setTimeout,而此时i已经成为-1了,所以,输出为-1.这打印的console是前很console打印出来的

    setTimeout是异步代码,也就是说这样描绘setTimeout(fn,
100)并无意味着fn肯定在100毫秒之后立即便执行,延迟很可能会见重丰富。因为拥有的

异步事件(包括计时器、或者一个 XMLHttpRequest
完成)仅仅当程序执行期间产生暇之早晚才见面执行,不是若规定了呀时便什么时实施。


 作者:婷风

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

 如果你看阅读本文对而有协助,请点一下“推荐”按钮,您的“推荐”将是本人顶酷之编写动力!欢迎各位转载,但是未经作者本身同意 **

**转载文章以后**得于
文章页面明显位置被起作者及原文连接**要不然保留追究法律责任的权。**