Ueditor/自定义配置

UEditor除 了具有轻量、可定制等优点外,还始终将优化编辑操作、提升用户体验摆在了很重要的位置。在这一点上,除了对编辑器功能、性能、实现细节等不断地改进和追求 创新之外,众多灵活而人性化的自定义配置也充分地体现了这个特点,通过修改配置项的值,用户几乎可以完全地改变编辑器的外观和行为。

从配置本身的优先级来看,UEditor的配置可以分为系统默认配置和用户自定义配置两种类型。系统默认配置是指editor_config.js中的所有配置,而用户自定义配置则是指用户在实例化编辑器的时候传入的JSON格式的配置。用户自定义配置的优先级高于系统默认配置,若两者同名,则覆盖系统默认配置。若未提供对应的用户自定义配置,则采用系统默认配置。一般情况下,推荐用户在实例化的时候使用自定义配置来代替修改系统默认配置。

从配置对编辑器的作用来看,UEditor的配置又可以分为界面配置和功能配置两种类型。界面配置主要集中在工具栏配置和初始化配置上;功能配置由于相对较多,下文将筛选一些同学们容易迷惑的配置项来进行讲解,而其他简单的则只要参考具体配置项对应的注释即可。

  • 界面配置

1、工具栏配置

默认配置项中包含了编辑器的所有按钮,需要改变时,只要在初始化的时候传入对应参数即可。示例代码如下:

    var editor = new baidu.editor.ui.Editor({
        toolbars:[[‘Paragraph‘,‘RowSpacing‘,‘FontFamily‘,‘FontSize‘]]
    });
    editor.render("myEditor");

这个时候的编辑就只有四个工具按钮了。关于工具栏的更多高级配置,比如改变布局结构,双栏和单栏混排等等

2、初始化内容 实例化的时候可以使用<textarea id="editor">初始内容</textarea>来为编辑器赋初始值。以PHP为例的话,可以将“初始内容”替换成<?=$content?>来动态从服务器去获取。当有些地方不适合使用textarea作为编辑器容器时,比如上文采用div作为容器时,那如何来初始化内容:

    var editor = new baidu.editor.ui.Editor({
    initialContent: ‘<span style="color:#ccc">欢迎使用ueditor</span>‘
    });
    editor.render("myEditor");

3、初始化样式 由于编辑器的编辑框位于一个单独的iframe中,因此希望通过在编辑器实例化页面设置编辑框中的元素样式是行不通的。UEditor为大家提供了两种方 式来改变编辑框中的元素样式:一种是通过修改initialStyle的内容来实现,另外一种是通过iframeCssUrl引用外部的CSS文件来实现。具体的代码例子如下:

    var editor = new baidu.editor.ui.Editor({
    initialStyle: ‘body{margin:8px;font-family:"宋体";font-size:16px;}‘,
    iframeCssUrl: ‘themes/default/iframe.css‘
    });
    editor.render("myEditor");

需要注意的是,如果同时配置了这两个参数,那么initialStyle中的配置将优先于iframeCssUrl指向的CSS文件中的配置。另外,由于编辑器中的有些功能效果实现需要依赖于initialStyle中的默认配置,比如框选表格的蓝色背景效果,因此,一般情况下不建议用户删除默认配置项中的默认样式类,除非已经确认不需要对应的功能。

4、ElementPath

编辑框下部的path部分。不需要的同学设置elementPathEnabled : false即可。

5、字数统计

编辑框下部的字数统计部分。不需要的同学设置wordCount:false 即可。当设置开启时,还可以通过maximumWords参数来控制允许的最大字符数、wordCountMsg参数来控制需要显示的提示文字、 wordOverFlowMsg参数来控制超出最大字数限制时候的提示文字。

6、编辑器最小高度和自动长高

编辑器的最小高度由配置项minFrameHeight来确定,而autoHeightEnabled:true则让编辑器的编辑框部分可以随着编辑内容的增加而自动长高。

7、工具栏浮动

工具栏浮动是指当编辑框的顶部超出了浏览器顶部的时候,工具栏会一直浮动在浏览器的顶部,方便大家的编辑操作。在编辑框高度固定的编辑器实例页面中,建议关闭此项功能以获得最好的性能和体验:autoFloatEnabled: false

  • 功能配置

UEditor由于功能点较多,同时又希望能够带给用户更加灵活个性的编辑需求,因此在功能配置上显得有点令人眼花缭乱。不过对于大部分用户来说,维持默认配置是最佳的选择,实在有特殊需求时才考虑修改配置。 尽管配置较多,但是大部分配置都一目了然,基本不需要特别的解释。这里总结出同学们问的较多的一些配置项进行简单的讲解,其余配置请同学们自行查看editor_config.js文件中的对应注释即可。

1、提交表单的域名

将编辑器的容器置于一个form表单之中,后台如何获取编辑器中的内容呢?UEditor内部做了自动处理,无需用户诸如再创建一个隐藏表 单来放置编辑内容等操作,只需要在配置项中设置textarea : ‘editorValue‘即可,后台则可以直接通过$_POST[‘editorValue‘]或者 request.getParameter("editorValue")等方式来获取编辑器中的内容。

2、黑白名单 UEditor提供了功能强大的黑白名单过滤机制,简单的几个配置就可以拦截任何不安全因素于编辑器之外。黑白名单可以同时使用,也可以单独分开使用。黑名单中的标签将会被编辑器完整地过滤掉,包括标签本身以及标签之内的任何内容。而不在白名单之中的那些标签则仅被过滤了标签本身,其内容会继续走过滤流程。

具体的黑白名单配置示例如下所示,其中$表示元素的属性:

  serialize : function(){
     return {
        //黑名单,表示不允许任何style、script、link、object、applet和input标签
        blackList: {style:1,script:1,link:1,object:1,applet:1,input:1},
        //白名单
        whiteList: {
            //表示允许div标签,且其可包含p、span和br标签,style、class属性
            div: {p:1,span:1,br:1,$:{style:1,class:1}},
            //表示允许img标签,且只能包含href、title和alt属性
            img: {$:{href:1,title:1,alt:1}}
        }
     }
  }()

3、表情本地化

鉴于有些内网用户不能访问外网而导致的编辑器表情功能不可用,从1.1.7正式版开始,UEditor提供了表情本地化功能。更改配置 emotionLocalization:true 即可开启本地表情功能。当然,本地表情功能必须要确保dialogs/emotion/目录下存在官方提供的images文件夹及所有表情文件。

时间: 2024-10-15 12:46:20

Ueditor/自定义配置的相关文章

UEditor自定义toolbar工具条

使用ueditor的同学都知道,ueditor里有很多功能,很全面,但有时候我们的编辑器不需要太多的功能,比如前台评论或者留言,就不需要这么多功能了,那我们怎么去定制自己想要的工具呢?官方给出了两个方法,ueditor工具栏上的按钮列表可以自定义配置,只需要通过修改配置项就可以实现需求: 1. 方法一:修改ueditorconfig.js里面的toolbars2. 方法二:实例化编辑器的时候传入toolbars参数第一种貌似不适合,需要改ueditor.config.js文件,有点麻烦,第二种就

spring-boot 速成(4) 自定义配置

spring-boot 提供了很多默认的配置项,但是开发过程中,总会有一些业务自己的配置项,下面示例了,如何添加一个自定义的配置: 一.写一个自定义配置的类 package com.example.config; import lombok.Data; import org.springframework.boot.context.properties.ConfigurationProperties; import org.springframework.stereotype.Component

App.config和Web.config配置文件的自定义配置节点

前言 昨天修改代码发现了一个问题,由于自己要在WCF服务接口中添加了一个方法,那么在相应调用的地方进行更新服务就可以了,不料意外发生了,竟然无法更新.左查右查终于发现了问题.App.config配置文件中的配置貌似出现了问题.查找节点发现是如下节点: <configSections> <section name="Test1" type="Demo.Section1,Demo"/> .............. </configSect

富文本编辑器-ueditor基本配置

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码..相对于其他流行的富文本编辑器如ckeditor等具有配置简单.更具有中国特色!以下主要是涉及的内容是关于百度富文本编辑器的上传配置以及如何与struts2等结合问题. 1 版本问题 一般而言建议使用UMEditor版本,同时百度web前端开发部也提供了定制版本.如果使用定制版本要注意的一点就是将工具栏的图标添加上分割线!分割线添加的方法如下就

C# 快捷使用自定义配置节点

C#除了appSettings和connectionStrings默认配置外还允许用户自定义使用配置.C# 提供3中简单的自定义配置,配置文件如下 <?xml version="1.0" encoding="utf-8" ?> <configuration> <configSections> <section name="Config1" type="System.Configuration.S

MVC自定义配置

ASP.NET 5 入门 (2) – 自定义配置 ASP.NET 5 理解和入门 建立和开发ASP.NET 5 项目 初步理解ASP.NET5的配置 正如我的第一篇文章ASP.NET 5 (vNext) 理解和概述 所说,ASP.NET 5的具有全新的配置机制,我们可以通过以下几点来进行理解: 支持多种跨平台的配置文件格式(如XML, Json, Ini和环境变量) 标准的配置文件如project.json不再包括任何自定义的配置信息. 自定义的配置完全由开发者另行建立和加载 自定义的配置信息可

ASP.NET 5 入门 (2) – 自定义配置

ASP.NET 5 入门 (2) – 自定义配置 ASP.NET 5 理解和入门 建立和开发ASP.NET 5 项目 初步理解ASP.NET5的配置 正如我的第一篇文章ASP.NET 5 (vNext) 理解和概述 所说,ASP.NET 5的具有全新的配置机制,我们可以通过以下几点来进行理解: 支持多种跨平台的配置文件格式(如XML, Json, Ini和环境变量) 标准的配置文件如project.json不再包括任何自定义的配置信息. 自定义的配置完全由开发者另行建立和加载 自定义的配置信息可

基于Spring的可扩展Schema进行开发自定义配置标签支持

一.背景 最近和朋友一起想开发一个类似alibaba dubbo的功能的工具,其中就用到了基于Spring的可扩展Schema进行开发自定义配置标签支持,通过上网查资料自己写了一个demo.今天在这里进行和大家分享,也记录下方便以后复习备忘. 二.demo测试环境 1.JDK1.7 2.spring 4.2.5.RELEASE 3.基于Maven 4.开发工具Eclipse 三.项目介绍 1.实现步骤分析 [1].设计配置属性并开发JavaBean. [2].编写xsd文件. [3].编写Nam

ueditor编辑器配置及使用介绍

<1>:ueditor编辑器配置 1:首先去官网下载安装包http://ueditor.baidu.com/website/download.html 2:解压后,只需要保留utf8-php这个文件夹里面的内容就可以了 3:根据自己项目的需要配置到根目录的相应文件夹下,我是配置到根目录的public目录下,如下图 4:在html页面配置加载UEditor编辑器,加入三个js文件以及在页面初始化UEditor编辑器 这里的id="editor"就是初始化需要获取的id上下需要