UEditor 富文本编辑器

UEditor 是百度公司推出的一款富文本编辑器,功能十分强大

官方网址

引用

<script src="https://cdn.jsdelivr.net/gh/tianlunvip/vendor@master/ueditor/ueditor.config.js"></script>
<script src="https://cdn.jsdelivr.net/gh/tianlunvip/vendor@master/ueditor/ueditor.all.min.js"></script>

演示

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>

<body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>

</html>

最好使用 textarea 作为编辑器的容器

<textarea id="container" name="content">内容</textarea>

对编辑器的操作最好在编辑器 ready 之后再做

ue.ready(function(){
    //设置编辑器的内容
    ue.setContent('hello');
    //获取html内容,返回: <p>hello</p>
    var html = ue.getContent();
    //获取纯文本内容,返回: hello
    var txt = ue.getContentTxt();
});

自适应宽度、高度

代码参考全屏模式代码

resize : function(w, h){

    // w = $("#container").innerWidth();
    // h = $("#container").innerHeight();

    var self = ue;
    uiUtils = baidu.editor.ui.uiUtils;

    // 可以使用目标容器 $("#container") 尺寸代替 
    var vpRect = uiUtils.getViewportRect();

    console.log(vpRect.width + "    " + w);

    self.iframe.parentNode.style.width = '';
    self.ui.getDom().style.cssText = 'border:0;position:absolute;left:0;top:' + (self.options.topOffset || 0) + 'px;width:' + vpRect.width + 'px;height:' + vpRect.height + 'px;z-index:' + (self.ui.getDom().style.zIndex * 1 + 100);
    uiUtils.setViewportOffset(self.ui.getDom(), { left:0, top:self.options.topOffset || 0 });
    self.setHeight(vpRect.height - self.ui.getDom('toolbarbox').offsetHeight - self.ui.getDom('bottombar').offsetHeight - (self.options.topOffset || 0),true);
},

设置宽度自适应还有种简单方法

$("#container .edui-editor").css('width', '100%');
ue.iframe.parentNode.style.width = '';

自定义插件

考虑到大家的功能基本上都会扩展一个UI和这个UI做的事情,所以UEditor提供了registerUI这个接口,可以让开发者动态的注入扩展的内容。

UE.registerUI('uiname', function(editor, uiname) {
    //do something
}, [index, [editorId]]);

uiname: 新添加的UI的名字,可以是1个或者多个 “uiname1 uiname2 uiname3”

function: 是实际你要做的事情,这里提供两个参数,editor 是编辑器实例,如果你有多个编辑器实例,那每个编辑器实例化后,都会调用这个 function,并且把 editor 传进来, uiname 为ui起的名字,如果前边添加的是多个UI,这里function 会被调用多次,并且将每一个ui名字传递进来。如果函数返回了一个 UI 实例,那这个UI实例就会被默认加到工具栏上。当然也可以不返回任何 UI。比如希望监控 selectionchange 事件,在某些场景下弹出浮层,这时就不需要返回任何UI。

index: 是你想放到 toolbar 的那个位置,默认是放到最后

editorId: 当你的页面上有多个编辑器实例时,你想将这个ui扩展到那个编辑器实例上,这里的editorId是给你编辑器初始化时,传入的id,默认是每个实例都会加入你的扩展

添加按钮

UE.registerUI('button', function(editor, uiName) {
    //注册按钮执行时的command命令,使用命令默认就会带有回退操作
    editor.registerCommand(uiName, {
        execCommand: function() {
            alert('execCommand:' + uiName)
        }
    });
    //创建一个button
    var btn = new UE.ui.Button({
        //按钮的名字
        name: uiName,
        //提示
        title: uiName,
        //添加额外样式,指定icon图标,这里默认使用一个重复的icon
        cssRules: 'background-position: -500px 0;',
        //点击时执行的命令
        onclick: function() {
            //这里可以不用执行命令,做你自己的操作也可
            editor.execCommand(uiName);
        }
    });
    //当点到编辑内容上时,按钮要做的状态反射
    editor.addListener('selectionchange', function() {
        var state = editor.queryCommandState(uiName);
        if (state == -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
        } else {
            btn.setDisabled(false);
            btn.setChecked(state);
        }
    });
    //因为你是添加button,所以需要返回这个button
    return btn;
});
赞(3) 打赏
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

    暂无评论...