Article Detail

百度Ueditor编辑器宽度高度自适应

1、宽度自适应：设置 initialFrameWidth: null var ue = UE.getEditor('editor',{ initialFrame...

HTML 阅读 33万 2 分钟阅读 2021-08-17 09:20

1、宽度自适应：设置 initialFrameWidth: null

var ue = UE.getEditor('editor',{
  initialFrameWidth:null ,//宽度随浏览器自适应
  wordCount: false, //关闭字数统计
  elementPathEnabled : false,//隐藏元素路径
  autoHeightEnabled: false,//是否自动长高
  autoFloatEnabled: false//是否保持toolbar的位置不动
});

2、高度自适应：设置 ‘#edui1’ 和 ‘#edui1_iframeholder’ 的高度
css中设置：

#edui1 {
  height: 100%;
}

js中设置（编辑器显示时）：

$('#edui1_iframeholder').css('height','calc(100% - 10px)');

3、扩展

ue.setDisabled();//不可编辑

Comments 评论区

广西南宁市 2021-08-17 09:25

UEditor自定义toolbar工具条

使用ueditor的同学都知道，ueditor里有很多功能，
很全面，但有时候我们的编辑器不需要太多的功能，比如前台评论或者留言，就不需要这么多功能了，
那我们怎么去定制自己想要的工具呢？
官方给出了两个方法，
ueditor工具栏上的按钮列表可以自定义配置,
只需要通过修改配置项就可以实现需求：

1. 方法一：修改ueditorconfig.js里面的toolbars
2. 方法二：实例化编辑器的时候传入toolbars参数

第一种貌似不适合，需要改ueditor.config.js文件，有点麻烦，
第二种就很好，我们且来看看第二种方法，示例如下：

<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script>
<script>
$(function() {
//本来是这样的:UE.getEditor('editor'); 传入参数后就是下面那样子了，toolbars里的就是工具的图标
UE.getEditor('editor', {
toolbar: [
['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic',
'underline','fontborder', 'backcolor', 'fontsize', 'fontfamily',
'justifyleft', 'justifyright','justifycenter', 'justifyjustify',
'strikethrough','superscript', 'subscript', 'removeformat',
'formatmatch','autotypeset', 'blockquote', 'pasteplain', '|',
'forecolor', 'backcolor','insertorderedlist', 'insertunorderedlist',
'selectall', 'cleardoc', 'link', 'unlink','emotion', 'help']
]
});
})
</script>

配置项里用竖线

'|'

代表分割线
完整的按钮列表

toolbars: [
[
'anchor', //锚点
'undo', //撤销
'redo', //重做
'bold', //加粗
'indent', //首行缩进
'snapscreen', //截图
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'subscript', //下标
'fontborder', //字符边框
'superscript', //上标
'formatmatch', //格式刷
'source', //源代码
'blockquote', //引用
'pasteplain', //纯文本粘贴模式
'selectall', //全选
'print', //打印
'preview', //预览
'horizontal', //分隔线
'removeformat', //清除格式
'time', //时间
'date', //日期
'unlink', //取消链接
'insertrow', //前插入行
'insertcol', //前插入列
'mergeright', //右合并单元格
'mergedown', //下合并单元格
'deleterow', //删除行
'deletecol', //删除列
'splittorows', //拆分成行
'splittocols', //拆分成列
'splittocells', //完全拆分单元格
'deletecaption', //删除表格标题
'inserttitle', //插入标题
'mergecells', //合并多个单元格
'deletetable', //删除表格
'cleardoc', //清空文档
'insertparagraphbeforetable', //"表格前插入行"
'insertcode', //代码语言
'fontfamily', //字体
'fontsize', //字号
'paragraph', //段落格式
'simpleupload', //单图上传
'insertimage', //多图上传
'edittable', //表格属性
'edittd', //单元格属性
'link', //超链接
'emotion', //表情
'spechars', //特殊字符
'searchreplace', //查询替换
'map', //Baidu地图
'gmap', //Google地图
'insertvideo', //视频
'help', //帮助
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'forecolor', //字体颜色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'fullscreen', //全屏
'directionalityltr', //从左向右输入
'directionalityrtl', //从右向左输入
'rowspacingtop', //段前距
'rowspacingbottom', //段后距
'pagebreak', //分页
'insertframe', //插入Iframe
'imagenone', //默认
'imageleft', //左浮动
'imageright', //右浮动
'attachment', //附件
'imagecenter', //居中
'wordimage', //图片转存
'lineheight', //行间距
'edittip ', //编辑提示
'customstyle', //自定义标题
'autotypeset', //自动排版
'webapp', //百度应用
'touppercase', //字母大写
'tolowercase', //字母小写
'background', //背景
'template', //模板
'scrawl', //涂鸦
'music', //音乐
'inserttable', //插入表格
'drafts', // 从草稿箱加载
'charts', // 图表
]
]

备注：
我配置的时候配置key使用的是toolbar,
很多博文使用的是toolbars,但是我使用toolbars不起作用,
不知道是不是ueditor的版本问题。

广西南宁市2021-08-17 09:26:55

<!-- 加载编辑器的容器 -->  <script id="editor" type="text/plain" name="content">            ${info.content}   //在这里输入编辑器的初始内容。  </script>
 
<!-- 创建编辑器并设置属性 -->
<script type="text/javascript">
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
   //相见文档配置属于你自己的编译器 var ue = UE.getEditor('editor', {
        initialFrameHeight: 300,
        initialFrameWeight: 100
    });
</script>

#⁰

广西南宁市 2021-08-17 09:27

<!--配置文件
value: //编辑器内容
config:{
    eddc:{
        //其他
    },
    toolbars:[ //工具栏]
}
editorNum: 1 //编辑器编号
width: 75%
width1: 380px
-->

<template>
    <!--<script id="editor" type="text/plain"></script>-->
    <div>

        <div :id="'editor'+editorNum"></div>

        <JxtPicture
            :exhibition="exhibition"
            @close="onClose"
            :title="'图片管理'"
            @getImg="getImg"
            :width="'75%'"
            :width1="'380px'"
            :priceLength="10000"
            v-if="exhibition"
        ></JxtPicture>

    </div>

</template>

<script>

import JxtPicture from '../components/jxt-picture.vue'

export default {
    name: 'ue1',
    components: { 
        JxtPicture
    },
    props: {
        editorNum:{
            type: Number,
            default:1 //编辑器编号
        },
        value: {
            type: String,
            default: '',
            required: false
        },
        config: {
            type: Object,
            default: {
                eddc:{},
                toolbars:[]
            },
            required: false
        },
    },
    data() {
        return {
            exhibition:false,
            editor: null,
            instance: null,
            //texta: 333,
            configd:this.config,
            eddc:{
                initialFrameWidth:null ,//宽度随浏览器自适应
                wordCount: false, //关闭字数统计
                elementPathEnabled : false,//隐藏元素路径
                autoHeightEnabled: true,//是否自动长高
                autoFloatEnabled: true,//是否保持toolbar的位置不动
                initialFrameHeight: 360,
            },
            toolbars: [[
                'source', //源代码
                //'anchor', //锚点
                'undo', //撤销
                'redo', //重做
                '|',
                'forecolor', //字体颜色
                'backcolor', //背景色
                'bold', //加粗
                //'indent', //首行缩进
                //'snapscreen', //截图
                'italic', //斜体
                'underline', //下划线
                'strikethrough', //删除线
                'subscript', //下标
                'fontborder', //字符边框
                'superscript', //上标
                '|',
                'formatmatch', //格式刷
                //'blockquote', //引用
                'pasteplain', //纯文本粘贴模式
                'selectall', //全选
                //'print', //打印
                //'preview', //预览
                'horizontal', //分隔线
                'removeformat', //清除格式
                '|',
                //'time', //时间
                //'date', //日期
                //'unlink', //取消链接
                'insertrow', //前插入行
                'insertcol', //前插入列
                'mergeright', //右合并单元格
                'mergedown', //下合并单元格
                'deleterow', //删除行
                'deletecol', //删除列
                'splittorows', //拆分成行
                'splittocols', //拆分成列
                'splittocells', //完全拆分单元格
                'deletecaption', //删除表格标题
                'inserttitle', //插入标题
                'mergecells', //合并多个单元格
                'deletetable', //删除表格
                'cleardoc', //清空文档
                //'insertparagraphbeforetable', //"表格前插入行"
                //'insertcode', //代码语言
                //'fontfamily', //字体
                '|',
                'fontsize', //字号
                'paragraph', //段落格式
                //'simpleupload', //单图上传
                //'insertimage', //多图上传
                //'edittable', //表格属性
                //'edittd', //单元格属性
                //'link', //超链接
                //'emotion', //表情
                //'spechars', //特殊字符
                //'searchreplace', //查询替换
                //'map', //Baidu地图
                //'gmap', //Google地图
                //'insertvideo', //视频
                //'help', //帮助
                '|',
                'justifyleft', //居左对齐
                'justifyright', //居右对齐
                'justifycenter', //居中对齐
                'justifyjustify', //两端对齐
                '|',
                'insertorderedlist', //有序列表
                'insertunorderedlist', //无序列表
                //'directionalityltr', //从左向右输入
                //'directionalityrtl', //从右向左输入
                //'rowspacingtop', //段前距
                //'rowspacingbottom', //段后距
                'pagebreak', //分页
                'insertframe', //插入Iframe
                '|',
                'imagenone', //默认
                'imageleft', //左浮动
                'imageright', //右浮动
                //'attachment', //附件
                'imagecenter', //居中
                //'wordimage', //图片转存
                'lineheight', //行间距
                //'edittip ', //编辑提示
                //'customstyle', //自定义标题
                //'autotypeset', //自动排版
                //'webapp', //百度应用
                //'touppercase', //字母大写
                //'tolowercase', //字母小写
                //'background', //背景
                //'template', //模板
                //'scrawl', //涂鸦
                //'music', //音乐
                'inserttable', //插入表格
                //'drafts', // 从草稿箱加载
                'charts', // 图表
                '|',
                'fullscreen', //全屏
                'macros', // 自定义上传
            ]]
        }
    },
    watch: {
        value: {
            handler: function(val, oldVal) {
                this.editor = window.UE.getEditor('editor'+this.editorNum, this.configd);
                this.editor.setContent(val);
            }
        }
    },
    mounted () {

        let config=this.config;
        //console.log(config.eddc);return false;

        let eddc=config.eddc && Object.keys(config.eddc).length!=0?config.eddc:this.eddc

        let toolbars=config.toolbars 
        && config.toolbars.length 
        && config.toolbars[0] 
        && config.toolbars[0].length
        ?config.toolbars:this.toolbars

        //console.log(eddc);
        eddc.toolbars=toolbars;
        console.log(eddc)
        this.configd=eddc;
        

        this.$nextTick(() => {
            const _this = this
            
            this.editor = window.UE.getEditor('editor'+this.editorNum, this.configd);

            this.editor.addListener('ready', function () {
                _this.editor.setContent(_this.value)
            })
            this.editor.commands['macros'] = { 
                execCommand : () => {
                    this.beforeInsertImage()
                },
                queryCommandState: function(){
		
		}
            }
        })
    },
    methods: {

        onClose() {
            this.exhibition = false
        },

        getUEContent () {
            return this.editor.getContent()
        },
        beforeInsertImage() {
            //this.$emit('showModal', { editor: 'editor' })

            //console.log(e)
            this.exhibition = true
            //this.priceLength = 10000

        },

        getImg(e) {

            let UE = this.editor
            e.forEach(item => {
                UE.execCommand('insertHtml', `<img src=${item.org_img}>`) 
            })

        },


    },
    destroyed () {
        this.editor.destroy()
    }
}
</script>

<style lang="scss" scoped>
    /*#editor {
        width: 90vh;    
    }*/
</style>

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。