ueditor 定制工具栏图标

在使用Ueditor时,如要简化工具栏上的按钮,可以修改配置项的方法: 1. 方法一:修改 ueditor.config.js 里面的 toolbars 2. 方法二:实例化编辑器的时候传入 toolbars 参数

我一般用第二种方法,

<script src="~/Content/ueditor/ueditor.config.js"></script>
<script src="~/Content/ueditor/ueditor.all.min.js"></script>
 <script type="text/plain" id="bcontent" name="bcontent" style="width:100%;height:360px;">
            </script>
<script type="text/javascript">

    var ue = UE.getEditor(‘bcontent‘, {
        toolbars: [["fullscreen","source","undo","redo","bold","italic","underline","fontborder","strikethrough","superscript","subscript","insertunorderedlist","insertorderedlist","justifyleft","justifycenter","justifyright","justifyjustify","removeformat","simpleupload","snapscreen","emotion","attachment"]]
       ,
        autoHeightEnabled: true,
        autoFloatEnabled: true
    });
</script>

这样可以在一个项目中使用多种风格的工具栏,我的偷懒方法是,先上官方网站下载中有一项定制:http://ueditor.baidu.com/website/download.html#ubuilder,通过定制用鼠标选择想要的按钮,完成后下载资源包,下载包中有ueditor.config.js文件打开,拷贝其中的toolbars 参数,在网页实例化编辑器时传入 toolbars 参数

var ue = UE.getEditor(‘bcontent‘, {
        toolbars: [["fullscreen","source","undo","redo","bold","italic","underline","fontborder","strikethrough","superscript","subscript","insertunorderedlist","insertorderedlist","justifyleft","justifycenter","justifyright","justifyjustify","removeformat","simpleupload","snapscreen","emotion","attachment"]]
       ,
        autoHeightEnabled: true,
        autoFloatEnabled: true
    });
时间: 2024-10-03 17:50:54

ueditor 定制工具栏图标的相关文章

eclipse定制工具栏,修改工具栏

目前eclipse定制工具栏的入口就是window- customize perspective,在弹出的窗口中选择Tool Bar Visibility,选择要在工具栏中显示的快捷图标.注:在Tool Bar Visibility中有些无法选择,可以先在Command Groups Availability选项卡中先选中,再在Tool Bar Visibility中选择.最后点击OK即可. 原文地址:https://www.cnblogs.com/jphoebe/p/9154470.html

第三波假期干货——webstrom工具栏图标

在WS中使用工具栏上的快捷图标来配合工作可以有效提高效率,因为你不用去记住一些快捷键,只要点一下鼠标即可.不过在WS中有很多实用功能却是没有自带个性图标的,导致自定义工具栏后可能就是好几个一模一样的绿色图标并排在一起,区分不出哪个是哪个,用起来也麻烦. 这里会提供自定义WS工具栏的方法,以及提供一些常用功能图标供大家替换. 给工具栏添加快捷图标 WS允许用户个性化工具栏,你可以依照自己的喜好把一些常用的图标添加上去.我们可以通过这种方式,让WS像DW一样能直接使用“行缩进”.“格式化代码”.“注

Ueditor文本编辑工具栏自定义

1.找到 ueditor.config.js 文件 2.在 toolbars 数组内进行删减,添加 , toolbars: [[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset',

openlayers中的自定制工具栏,包含画点、线、面

先是在projectquantan-master这个项目中有一个EditingPanel这个工具条,也挺好的,功能挺全的,但是有一点就是只有画多边形的一个按钮,没有point和path俩个的,所以就想自己去加一个. 然后就发现统一的drawfeature的样式(olControlDrawFeatureItemInactive),没有分为point.path和polygon的,然后就去源代码中找控制这个样式点代码去修改他,但是始终没有找到,只能作罢. 又去网上搜索找到了openlayers自带的一

工具栏图标切换

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ background-repeat:no-repeat; background-size: 100% 100%; float:left; width:2rem; height:2rem; margin-

关于富文本编辑器UEditor

2017.1.18,星期三?     关于富文本编辑器:     富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器. 富文本编辑器不同于文本编辑器,程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里(当然付费的功能会更强大些),方便用户编辑文章或信息.比较好的文本编辑器有kindeditor,fckeditor等. 关于UEditor:官网                           UEditor文档,我们的说明书

SSH系列:(23)Ueditor

1.Ueditor下载 地址:http://ueditor.baidu.com/website/download.html#ueditor 由于我的SSH项目是UTF-8编码的,所以下载UTF-8版本的UEditor. 2.HelloWorld示例 解压下载的压缩包,内容如下: 第1个例子,来源于https://github.com/fex-team/ueditor 在当前目录下,添加一个demo.html文件,内容如下: <!doctype html> <html lang="

UEditor百度编辑器,工具栏添加一个普通按钮

添加一个名叫“hougelou”的普通按钮 附言:以下是以UEditor .Net版本举例说明. 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“hougelou”字符串,然后找到labelMap数组,对应着添加一个labelMap,用于鼠标移上按钮时的提示. //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义 , toolbars:[ ['fullscreen', 'source', '|', 'undo', 'redo

VS2008给图标工具栏-状态栏添加响应函数

1.在对话框的:OnInitDialog()函数中添加以下红色代码: BOOL CGSM_MessageDlg::OnInitDialog() { CDialog::OnInitDialog(); // 设置此对话框的图标.当应用程序主窗口不是对话框时,框架将自动 //  执行此操作 SetIcon(m_hIcon, TRUE);          // 设置大图标 SetIcon(m_hIcon, FALSE);         // 设置小图标 // TODO: 在此添加额外的初始化代码 /