如何给ueditor中编辑区域添加背景图片_教程

一种是放之间定义的标签内部如 #div{ width：100px； height：100pxl； } 还一种是元素中使用（不推荐）如另外一种是css存在外部，用内用标签链接进来的还有导入等几种方法。

用网页编辑工具打开百度编辑器这个文件：ueditor/dialogs/image/image.html找到以下代码：maxNum:32,//最大上传多少个文件backgroundUrl:'',//背景图片,留空默认listBackgroundUrl:'',//预览图背景，留空默认buttonUrl:'',//按钮背景，留空默认compressSide:editor.options.compressSide,//等比压缩的基准，0为按照最长边，1为按照宽度，2为按照高度compressLength:editor.options.maxImageSideLength,//能接受的最大边长，超过该值Flash会自动等比压缩//url:'../server/upload/php/up.php',//上传处理页面的url地址，用于PHP语言url:'../../server/upload/asp/up.asp',//上传处理页面的url地址，用于ASP语言//url:../server/upload/asp/up.asp',//上传处理页面的url地址，用于ASP语言解决方法之二：修改上传路径打开up.asp这个文件。uploadPath="../../../uploadfiles/"'上传保存路径，修改上传路径'uploadPath="E:\UEditor对编辑器\"'上传保存路径picSize=500'允许的文件大小，单位KBpicType=".jpg,.gif,.png,.bmp"'允许的图片格式

一、使用方法：

1、在页面<head>中引入ckeditor核心文件ckeditor.js

2、在使用编辑器的地方插入HTML控件<textarea>

如果是ASP.NET环境，也可用服务器端控件<TextBox>

<asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox>

注意在控件中加上 class="ckeditor" 。

3、将相应的控件替换成编辑器代码

CKEDITOR.replace('TextArea1')

//如果是在ASP.NET环境下用的服务器端控件<TextBox>

CKEDITOR.replace('tbContent')

//如果<TextBox>控件在母版页中，要这样写

CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$") %>')

</script>

4、配置编辑器

ckeditor的配置都集中在 ckeditor/config.js 文件中，下面是一些常用的配置参数：

// 界面语言，默认为 'en'

config.language = 'zh-cn'

// 设置宽高

config.width = 400

config.height = 400

// 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'

config.skin = 'v2'

// 背景颜色

config.uiColor = '#FFF'

// 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js

config.toolbar = 'Basic'

config.toolbar = 'Full'

这将配合：

config.toolbar_Full = [

['Source','-','Save','NewPage','Preview','-','Templates'],

['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],

'/',

['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

['Link','Unlink','Anchor'],

['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],

'/',

['Styles','Format','Font','FontSize'],

['TextColor','BGColor']

]

//工具栏是否可以被收缩

config.toolbarCanCollapse = true

//工具栏的位置

config.toolbarLocation = 'top'//可选：bottom

//工具栏默认是否展开

config.toolbarStartupExpanded = true

// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js

config.resize_enabled = false

//改变大小的最大高度

config.resize_maxHeight = 3000

//改变大小的最大宽度

config.resize_maxWidth = 3000

//改变大小的最小高度

config.resize_minHeight = 250

//改变大小的最小宽度

config.resize_minWidth = 750

// 当提交包含有此编辑器的表单时，是否自动更新元素内的数据

config.autoUpdateElement = true

// 设置是使用绝对目录还是相对目录，为空为相对目录

config.baseHref = ''

// 编辑器的z-index值

config.baseFloatZIndex = 10000

//设置快捷键

config.keystrokes = [

[ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], //获取焦点

[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //元素焦点

[ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //文本菜单

[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], //撤销

[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //重做

[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], //

[ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //链接

[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], //粗体

[ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], //斜体

[ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], //下划线

[ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/tougao/11228081.html

如何给ueditor中编辑区域添加背景图片

发表评论

评论列表（0条）