定制样式插入到ueditor

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 " ><span class="glyphicon  glyphicon-pencil"></span>首页</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"><span class="glyphicon glyphicon-picture"></span>图标</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 "><span class="glyphicon glyphicon-user">生活</span></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 "><span class="glyphicon glyphicon-briefcase"></span>留言板</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 "><span class="glyphicon glyphicon-thumbs-up"></span>推荐文章</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控制的手风琴效果,简单轻便,代码量少。效果如下:

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

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

插入之后的效果如下:

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

 搜索的功能制作

数据自然是从api里面获取,ng如何获取api里的数据呢?我们来看看,主要是利用http,获取数据,然后利用then方法进行回调,得到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.如何将数组变成字符串的写法

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

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

符串将替换文本使用。function回调函数返回的第一个参数表示匹配到的字符,第二个以及往后都是匹配到的分组数据。来看下代码。

3.关于[p.slice(0,index)][p.slice(index+1)]是什么鬼?调试一下就知道了。

再来看待合成代码就明白了什么意思。

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的原理,先来看看代码

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

setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

setTimeout 运用在延迟一段时间,再进行某项操作。即在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

setTimeout(代码,延迟时间);

该延迟时间并不是你期望的时间,不同的浏览器,延迟时间不一样。拿上面例子来看,也就是说延迟时间并不是上面的0。对比来看

也就是说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 完成)仅仅当程序执行期间有空闲的时候才会执行,不是你规定了什么时候就什么时候执行。

时间: 2024-11-10 11:06:45

定制样式插入到ueditor的相关文章

AngularJs定制样式插入到ueditor中的问题总结

总结一下自己给编辑器定制样式的过程中所遇到的问题,主要是编辑器的二次开发接口,以及用angular定制样式,问题不少,终于在**的帮助下,完成了,还剩下老版本和新版本的交互没有弄好,不过不难.下面分别讲解问题. ueditor的开发 你可以在官网上下载任意版本,进行使用即可:http://ueditor.baidu.com/website/download.html 下载后按照官网上的配置就可以使用.文档地址:http://fex.baidu.com/ueditor/ 关于ueditor二次开发

页面插入百度UEditor编辑器

工作中用到了百度的富文本.以下总结记录一下,UEditor嵌入网页的方法. 第一步 到百度UEditor官网下载所需版本:http://ueditor.baidu.com/website 本次下载的是 utf-8的jsp版:ueditor1_4_3_2-utf8-jsp.zip. 第二步 解压得到如图文件结构;之后打开jsp/lib/ 将lib下的jar包 导入项目,注意jar包版本问题,如果项目中有相同的包,删掉低版本保留高版本的. 第三步 浏览器打开index.html会发现这是UEdito

HTML--三种样式插入方法--链接---表格---列表

html三种样式表插入方法1.外部样式表---<link rel="styleheet" type="text/css" href="mystyle.css">2.内部样式表:--<style type="text/css> body{background-color:red} p{margin-left:20px}</style>3.内联样式表:<p style="color:red

博客定制样式和脚本代码

做个备份吧,有时候加个新样式和小功能怕加蹦了找不回来了. CSS: /*公用*/ body { font-size: 15px; padding: 0; margin: 0; font-family: "微软雅黑", "宋体", Arial; background: #205424 url('http://images.cnblogs.com/cnblogs_com/zhangmingzhao/1006791/o_timg.jpg') no-repeat top c

我的博客园定制样式

使用模板:darkgreentrip 1 #home { 2 margin: 0 auto; 3 width: 80%;/*原始65*/ 4 min-width: 980px;/*页面顶部的宽度*/ 5 background-color: rgba(245, 245, 245, 0.7); 6 padding: 30px; 7 margin-top: 50px; 8 margin-bottom: 50px; 9 box-shadow: 0 2px 6px rgba(100, 100, 100,

导出Excel并下载,但无法定制样式的方法!

拿来的,望原创见谅! public void EXCELDown(DataTable dt, string strFileName) { Response.ContentEncoding = System.Text.Encoding.GetEncoding("GB2312"); Response.AppendHeader("Content-Disposition", "attachment;filename=" + strFileName + &

NPOI使用ShiftRows向excel插入行,并复制原有样式

使用excel模板导出数据时,模板可填充的数据行有限,可通过ShiftRows插入行,如图,在第七行后插入新行,要求新行包含原有样式 插入后 首先添加npoi类库引用 /// <summary> /// NPOI使用ShiftRows向excel插入行,并复制原有样式 /// </summary> /// <param name="file">模板文件,包含物理路径</param> /// <param name="dir

Ueditor实现自定义conttoller请求或跨域请求

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.我们在做网站文字编辑的时候会经常用到它.但是ueditor默认支持保存图片在网站的根目录下面.但是,对于网站来说,我们大多数的时候都要把静态资源保存到另外的服务器上,与应用服务器分开,以增加网站的性能 下面介绍一下这个方法: 一, ueditor 1.4.2+ 推荐使用唯一的请求地址,通过GET参数action指定不同请求类型. 但很

百度编辑器UEditor PHP版下载

Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点.Ueditor基于BSD开源协议,除了具有代码精简.加载迅速的轻量级特质外,还采用了分层理念,使开发者可以根据实际应用和需求自由定制. Ueditor编辑器划分为了三层架构.其中,核心层为开发者提供了诸如range.selection.domUtils类的底层API接口,中间的命令插件层不仅提供了大量的基础command,还允许开发者基于核心层进行command命令的开发,而面向用户端的界面层则可