将AngularJs自定义样式插入编辑器问题概述

总结为编辑器定制样式过程中遇到的问题，主要是编辑器的二次开发界面，用angular定制样式。很多问题最终都是在* *，的帮助下完成的，但是老版本和新版本之间的互动并没有做好，但是并不难。以下问题单独解释。

ueditor的开发

可以在官网下载任意版本使用：http://ueditor.baidu.com/website/download.html下载后可以根据官网配置使用。文件地址：这里列出了很多关于ueditor在http://fex.baidu.com/ueditor/,二次开发的问题。

1.ueditor自动将div标签过滤成p标签

在定制风格的过程中，我发现所有的div都被过滤掉了，没有P标签，网上也有很多素材，但是都没用。后来看到一个大神写的ueditor不同版本配置不同。这里，我的解决方案是：打开ueditor.config.js配置文件，添加如下代码：

，allowDivTransToP: false请注意，它是在窗口中手动添加的。UEDIROE_CONFIG！此外，也有人遇到过类似的解决方案。这里你可以参考：http://www.cnblogs.com/Olive116/p/3464495.html

2.如何将自定义样式插入编辑器？

编辑器中提供了一个界面。让我们来看看。

函数插入html () {var value=prompt('插入html代码'，' ')；Ue。geteditor ('editor ')。execcommand ('insert html '，value)}那么如何在我们自己的项目中使用这个接口呢？首先要把编辑器具体化，通常是直接使用UE.getEditor()来获取实例。

//使用工厂方法getEditor创建并引用编辑器实例。如果编辑器在某个闭包下被引用，那么直接调用UE.getEditor('editor ')就可以得到相关的实例。在使用它之前，我们需要在调用它的方法之前引入编辑器。

script src=' http : libs/ueditor/ueditor . config . js '/script script src=' http : libs/ueditor/ueditor . all . min . js '/script在我们的angular项目中创建了一个编辑器实例，如下所示，编辑器提供了实例化的就绪方法：

//创建编辑器$ scope的实列。ready=function (ueditor) {window。editor=ueditor};好了，我们现在可以使用编辑器实例了。接下来，我们来看看ng的定制风格。

Ng自定义样式

让我们手动看看手风琴菜单样式。下载地址：https://github.com/foreverjiangting/set-menu/tree/master/menu这里使用的交互使用data-toggle='collapse '，但是和ng冲突，所以需要ng来控制交互。让我们看看如何写：

！-添加工具栏-div class='设置-工具栏' H4 class='文本中心'工具栏/h4！-侧边栏内容- div类='侧边栏-菜单a ng-click=' toggle(' title STYLe ')' class=' nav-header菜单-第一个' span class=' glyphicon glyphicon-pencil '/span首页/aul ng-hide=' title STYLe ' id=' UserMeun ' class=' nav-list menu-second ' Li ng-repeat=' sources中的标题。titles ' ng-click='插入HTMl(' title '，title)' a { { title }。name } }/a/Li/ula ng-click=' toggle '(' title icon ')' class=' nav-header menu-first ' span class=' glyphicon-graphicon-picture '/span图标/aul ng-hide=' title icon ' id=' article menu ' class=' nav-list menu-second ' Li class=' set-image ' ng-repeat=' img in sources。imgs ' ng-click=' insert HTMl(' imgs '，img)' aimg ng-src=' http : { { img。URL } } '/a/Li/ula ng-click=' toggle(' title youxia ')' class=' nav-header menu-first ' span class=' glyphicon '生活/span/aul ng-hide=' title youxia ' id=' Gyphicnmenu ' class=' nav-list menu-second ' Li ng-repeat=' yx in sources。yxs ' ng-click='插入HTMl(' yxs '，yx)' a { { yx。name } }/a/Li/ula ng-click=' toggle '(' title Serve ')' class=' nav-header menu-first ' span class=' glyphicon glyphicon-公文包/span留言板/aul ng-hide=' title Serve ' id=' SERVEMENU ' class=' nav-list menu-second ' Li ng-repeat=' ser in sources。SERS ' ng-click=' insert html(' SERS '，ser)' a { { ser。name } }/a/Li/ula ng-click=' toggle '(' title article ')' class=' nav-header menu-first ' span class=' glyphicon glyphicon-竖起大拇指/span推荐文章/aul ng-hide=' title article ' id=' article menu ' class=' nav-list menu-second ' Li ng-repeat=' arc in sources。arcs ' ng-click=' insert HTMl(' arcs '，arc)' a { { arc。文章} }/a/Li/ul/div！-内容主题结束- /div js里面的代码如下：

//工具栏交互样式$ scope。title style=$ scope。title icon=$ scope。title youxia=$ scope。title serve=$ title article=false；$ scope。toggle=function(style){ $ scope[style]=！$ scope[style]；}ng控制的手风琴效果，简单轻便，代码量少。

效果如下：

样式写好以后就是插入到编辑器中，那么如何插入呢？这里有两种，直接插，和根据搜索之后的文章进行插入。直接插入的话比较简单。

$ scope。insertHTMl=函数(类型，项目){ if(类型==' titles ' | |类型==' imgs '){ editor。exec命令(' insertHTMl '，项。html)；}插入之后的效果如下：

当然我们这样做有什么用呢？主要是利用编辑器里面的内容，利用尼日利亚数据绑定，反映到应用上，从而制作应用的文章编辑界面。

搜索的功能制作

数据自然是从美国石油学会(美国石油协会)里面获取，ng如何获取美国石油学会(美国石油协会)里的数据呢？我们来看看，主要是利用http，获取数据，然后利用然后方法进行回调，得到http，获取数据，然后利用然后方法进行回调，得到scope.data的数据。

angular.module("服务")。service('ArticleService '，function($ http){ return { searcher ticle : function(title){ return $ http。get(' API/article/search '，{ data : { title : title } })；} };});这里我们声明了文章服务，并给它返回了美国石油学会(美国石油协会)数据，那么我们将该依赖注入要调用的页面即可调用其方法。还是看下代码：通常服务调用

应用程序接口返回的数据放在一个文件夹里面而控制数据的控制器单独放在一个文件夹里面，那么我们来看下控制器里是如何回调美国石油学会(美国石油协会)的数据。

棱角分明。模块('文章。控制器' .控制器(“服务中心”，函数($scope，$rootScope，$filter，$timeout，$stateParams，ContentService，ArticleService，类型){ 0注意，你需要把文章服务注入到控制器里面，然后才能回调数据。怎么回调数据呢？看下面的代码：

Var弧全搜索={text: ' '，result: []，selected: []，//所选数据存储在数组begin search 3360 function(){ var self=this；var text=self . text . trim()；if(！文本)返回；文章服务。searcharticle(文本)。然后(函数(数据){//获取数据。第二个数据意味着获取数组的内容。第一个是传入的参数self . result=data . data；//获取数据}，函数(err){ console . log(err)；});},};好了，我们成功回调了函数数据。关于搜索部分，下面总结一下不清楚的知识点。

总结知识点

1.如何将数组写入字符串

2.关于替换功能的使用

ECMAScript规定replace()方法的参数替换可以是函数，也可以是字符串。在这种情况下，每个匹配都调用函数，该函数返回单词

将使用字符串代替文本。函数回调函数返回的第一个参数代表匹配的字符，第二个及后续参数是匹配的分组数据。看看代码。

3.什么是[p. slice (0，index)] [p. slice (index 1)]？调试一下就行了。

如果你再看一遍合成代码，你就会明白它的意思了。

var arr=serve . map(function(xx){ return item . html . replace(/{([\ w \)。] ?)}}/gi，函数(match，p) {var index=p.indexOf(' . ');if(索引0){ return format field(xx[p . slice(0，索引)][p.slice(索引1)]；} else { return format field(xx[p])；}});});4.关于定时器设置超时的原理，我们先来看看代码

为什么输出是-1？我们先来看看setTimeout()的原理

SetTimeout()只执行一次代码。如果要多次调用setInterval()，请使用setInterval()或让代码本身再次调用setTimeout()。

SetTimeout用于在执行操作之前延迟一段时间。也就是说，表达式只执行一次，并且在加载后延迟指定的时间后才执行一次。

SetTimeout(代码，延迟时间)；

延迟时间不是你所期望的。不同的浏览器延迟时间不同。就拿上面的例子来说，也就是说延迟时间不是0以上。相比之下，

也就是说setTimeout只执行一次，但时间不是0，具体延迟不确定。那么为什么它看起来是-1就不足为奇了。我们来分析一下程序。

当i=3，而(3)时，I减少到2，执行setTimeout

当i=2时，当(2)为1时，执行setTimeout

当i=1，而(0)时，I减少到2，执行setTimeout

当i=0，while(0)时，I减少到-1，此时程序结束，但将setTimeout间隔设置为0将无法理解执行，并将被插入线程的执行队列，直到I

当它变为-1时，将执行前三个setTimeout。这时，我已经变成了-1，所以输出是-1。打印的控制台是从前一个控制台打印的。

SetTimeout是异步代码，这意味着以这种方式写入setTimeout(fn，100)并不意味着fn必须在100ms后立即执行，延迟可能会更长。因为所有的

异步事件(包括计时器，或者XMLHttpRequest的完成)将只在程序在执行期间空闲时执行，而不是在您指定它时执行。

以上是边肖介绍的定制AngularJs风格插入ueditor的问题总结，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！