百度富文本编辑器UMeditor的使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34357835/article/details/78802804

百度富文本编辑器效果图如下：

实现：引用umeditor的js

jsp中定义：

<!--style给定宽度可以影响编辑器的最终宽度-->
<script type="text/plain" id="myEditor" style="width:1000px;height:240px;">
    <p>这里我可以写一些输入提示</p>
</script>

给script 一个id，js中实例化这个编辑器，获得输入内容

<div id="btns">
  <button class="btn" onclick="getContent()">获得内容</button>&nbsp;
</div>
<script type="text/javascript">
    //实例化编辑器
    var um = UM.getEditor('myEditor');
   //获取输入内容
    function getContent() {
        var content=UM.getEditor('myEditor').getContent();
           alert("内容为:"+content);
    }
</script>

代码实现很简单，主要是引用UMeditor的js和css

我把代码下载链接放出来，可以参考哦

链接：https://pan.baidu.com/s/1i5KSctv

提取码：i1sv

如果：想使编辑器看起来更简明，如下图这样：

我们可以在实例化编辑器中定义toolbar

var ue = UM.getEditor(
    'myEditor',
    {
        toolbar : [
                'source | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
                'insertorderedlist insertunorderedlist ',
                '| justifyleft justifycenter justifyright justifyjustify |',
                'link unlink | image insertvideo | fontfamily fontsize paragraph | preview | video ' ]
    });