Html怎么插入百度富文本编辑器ueditor-木庄网络博客

本文摘自PHP中文网，作者little bottle，侵删。

本篇文章的主要内容是教大家如何在Html里插入百度富文本编辑器，感兴趣的朋友可以了解一下，希望能对你有所帮助。

在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,假如你用百度富文本编辑器,首先需要下载好百度编辑器的demo，然后创建ueditor.html文件,引入百度编辑器，然后在html文件内引入，然后再用js实例化编辑器即可。代码如下：

<!DOCTYPE html>
<html>
<head>
<title>百度编辑器</title>
</head>
<body>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>
    <script id="editor" type="text/plain" name="gdesc" style="width:100%;height:350px;"></script>
    <script type="text/javascript">
        //实例化编辑器
        var ue = UE.getEditor('editor', {});
    </script>
</body>
</html>

到这里在浏览器打开上面的ueditor.html文件就能看到如下图所示:

这是实例化后的初始编辑器,里面的功能有很多,其中有一部分可能是我们完全用不到的,想定制怎么办呢?别捉急,百度提供了可以定制的功能,将上面实例化编辑器的js代码改为以下代码:

<script type="text/javascript">
    //实例化编辑器
    var ue = UE.getEditor('editor', {
    toolbars: [
        [
            'undo', //撤销
            'bold', //加粗
            'underline', //下划线
            'preview', //预览
            'horizontal', //分隔线
            'inserttitle', //插入标题
            'cleardoc', //清空文档
            'fontfamily', //字体
            'fontsize', //字号
            'paragraph', //段落格式
            'simpleupload', //单图上传
            'insertimage', //多图上传
            'attachment', //附件
            'music', //音乐
            'inserttable', //插入表格
            'emotion', //表情
            'insertvideo', //视频
            'justifyleft', //居左对齐
            'justifyright', //居右对齐
            'justifycenter', //居中对
            'justifyjustify', //两端对齐
            'forecolor', //字体颜色
            'fullscreen', //全屏
            'edittip ', //编辑提示
            'customstyle', //自定义标题
            'template', //模板
             ]
        ]
    });
</script>