Ueditor自定义设置求教

Posted 2023-03-24

我想让Ueditor有固定的行高，当内容超过行高时不会自动向下延伸，而是在右边出现一个滚动条，如何实现？我找了好多方法都不奏效，求大神教

scaleEnabled Boolean [默认值：false] //是否可以拉伸长高，默认true(当开启时，自动长高失效)

参考代码：
var ue = UE.getEditor('container',
initialFrameWidth :800,//设置编辑器宽度
initialFrameHeight:250,//设置编辑器高度
scaleEnabled:true
); 参考技术A 在 ueditor.config.js 中找到
,initialFrameWidth:998 //初始化编辑器宽度,默认1000
,initialFrameHeight:420 //初始化编辑器高度,默认320
我这里设置的是宽度998 高度420

然后在页面写 CSS样式

#container

width:998px;
height:auto;
max-height:900px;
overflow:auto;

这样 只要高度超过了900px 就会自动出现滚动条 参考技术B 建议设置自动长高（autoHeightEnabled:false）的这个属性，使用（scaleEnabled:true）后编辑器的高度和宽度会随着拖动而变化 参考技术C var editor = new UE.ui.Editor(scaleEnabled:true);

参考技术D 简单提示下,把高度固定,比如height:500px; overflow:scroll;
这样,超出500px的话,右侧就会出现滚动条了.追问

是修改编辑器的配置文件吗？还是添加样式？

追答

当然是样式啊

追问

试过了，不管用。我是用了来做编辑器的容器的，这怎么添加样式啊？后来我又换成了textarea，虽说样式加上了，可是还是不管用啊。。。

Ueditor 自定义按钮

第一步：找到ueditor文件夹下的ueditor.config.js下toolbars参数，新增一个字符串showmsg，同时新增一个labelMap用于鼠标移入显示自定义提示信息、

   //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的从新定义
        , toolbars: [[
            ......,print‘, ‘preview‘, ‘searchreplace‘, ‘help‘
            //, ‘drafts‘ 从草稿箱加载
            //新增自定义按钮
            ,‘showmsg‘
        ]]
        
        //自定义按钮鼠标移入提示
        ,labelMap:{
        	‘showmsg‘:‘显示提示信息‘
        }

第二步：找到ueditor文件夹下的ueditor.all.js的btnCmds数组，添加字符串‘showmsg‘

这个时候刷新页面就可以在help按钮后面新增了一个按钮，但是按钮的图标显示的是B（默认的样式）

第三步：在显示出来按钮后，我们发现按钮的图标不是我们想要的，然后我们找到ueditor文件夹下的themes文件夹下的default文件夹下的css文件夹下的ueditor.css,在文件的末尾加上如下css：

.edui-for-showmsg .edui-icon{
	background-position:-200px -40px;
}

这时候再刷新页面就发现图标已经换掉了，这里要解释下就是图标都是使用themes/default/images/icons.png这个图片文件通过偏移量来选择图标的，如果有自定义图标，只需要将制作好的图标加入到icons.png中，然后设置偏移量就可以了。

第四步：当我们点击按钮时发现没有反应，其实在第二步完成后ueditor已经为我们将这个按钮的点击事件绑定好了，只不过是这个点击方法是空的而已，现在就需要我们自己去重写这个点击方法了。首先在ueditor文件夹下定义一个myplugins的文件夹，然后新建一个showmsg.js文件，showmsg文件内容如下：

UE.commands[‘showmsg‘] = {
    execCommand : function(){
        var imgs = this.document.getElementsByTagName("img");
        for(var i= 0,img;img = imgs[i++];){
            img.setAttribute("border",2);
            img.setAttribute("width","100");
            img.setAttribute("height","100");
        }
    },
	queryCommandState:function(){
	     var images = this.document.getElementsByTagName("img" );
	     for(var i=0;i<$(images).length;i++){
	     	if($(images[i]).css("width")!="100px"){
	     		return 0;	 //如果找到宽度不为100的图片，则返回0，代表当前按钮可以点击
	     	}
	     }
	     return -1;           //否则返回-1，告诉编辑器将当前按钮置灰
	}
};

execComman 按钮点击时候要处理的信息，我写的是将所有的图片的border设为2，宽度和高都设置为100

queryCommandState 方法是指当编辑器获取焦点时要处理的事，这里就是遍历所有已上传的图片文件，如果编辑器中存在宽度不为100px的图片，则让当前按钮可点击，否则return -1；表示将按钮置灰不可点击