百度web编辑器ueditor配置日记 - 添加按钮 - 全屏 - 按钮管理 - 适配手机屏幕显示 - 背景色

# 让整个页面适配手机屏幕，包括编辑器

./index.html中的head中添加一句：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

# 获取当前编辑器里面的内容（html格式）

<button οnclick="save();">保存</button>
<script>
    function save () {
         var content = ue.getContent();
         /* JS code */
         $.ajax({
                ....
         });
    }
</script>

# 初始化时就全屏

./ueditor.config.js找到并启用：

//,fullscreen : false //是否开启初始化时即全屏，默认关闭

修改为

,fullscreen : true //是否开启初始化时即全屏，默认关闭

# 图标太多？管理图标

方法1: 直接修改初始配置文件：./ueditor.config.js中的

//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
, toolbars: [[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',

....

按照你需要的修改即可。

方法2: 在./index.html中找到当前实例

var ue = UE.getEditor('editor');

修改为你需要的样式，例如：

var ue = UE.getEditor('editor', {
toolbars: [['save', 'undo', 'redo', 'bold', 'italic', 'underline', '|', 'forecolor', 'insertorderedlist', 'insertunorderedlist', '|', 'fontsize', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify']]
});

# 修改编辑器显示区域的背景色等

修改/themes/iframe.css，例如

/*可以在这里添加你自己的css*/
body {
    background: rgb(131,175,155);
    color: white;
}

# 添加自定义按钮 - 保存内容等

参考 https://blog.csdn.net/zzq900503/article/details/77050823

需要注意的地方：

index.html前面引用js那里需要把<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"></script>改为<script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>
去到步骤“使用新图标”时，修改themes/default/css/ueditor.css时，应该把代码放到最后面，另外，需要增加"!important"以启用样式，同时设置下背景图为不重复、拉伸占满，参考代码：
```
.edui-default .edui-toolbar .edui-for-watermark .edui-icon {
    background-image: url("../images/watermark.png")!important;
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center center;
}
```
图标图片不生效？你用浏览器直接打开themes/default/css/ueditor.css，并刷新N遍即可，例如：http://your-site.com/themes/default/css/ueditor.css

暂时这样先。。。

来源：CSDN

作者：Rudon滨海渔村

链接：https://blog.csdn.net/qq285744011/article/details/103885584

标签

Ueditor

编辑器

ueditor编辑器