百度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

需要注意的地方：

1. 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>
2. 去到步骤“使用新图标”时，修改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;
   }

    

3. 图标图片不生效？你用浏览器直接打开themes/default/css/ueditor.css，并刷新N遍即可，例如：http://your-site.com/themes/default/css/ueditor.css

 

 

暂时这样先。。。