单个页面显示多个Ueditor编辑器方法

最新推荐文章于 2024-09-13 22:16:11 发布

yzzPHP

最新推荐文章于 2024-09-13 22:16:11 发布

阅读量1w

点赞数

分类专栏： JQuery，JavaScript 文章标签： ueditor 单页面多个使用

本文链接：https://blog.csdn.net/qq_38377299/article/details/78311375

版权

JQuery，JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天在项目中遇到需要在单个页面中显示多个编辑器使用的是Ueditor编辑器实例化多个编辑器后虽然也能显示但是明显错位查看了官网的说明和手册后发现Ueditor是基于传统的iframe模式在使用多个的时候很容易出现层叠的错误现象，根据官网的建议采用umeditor编辑器（基于Div的模式），加载速度更快，虽然没有ueditor功能多，但是够用了

①首先引入外部文件

<!--umeditor Scripts-->
<script type="text/javascript" src="__ADMIN__/plus/umeditor/third-party/template.min.js"></script>
<script type="text/javascript" charset="utf-8" src="__ADMIN__/plus/umeditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__ADMIN__/plus/umeditor/umeditor.min.js"></script>

以及CSS样式

    <!--umeditor styles-->
    <link href="__ADMIN__/plus/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">

在这里没有提到JQuery 如果你的项目里没有引入请自行引入

②然后在需要显示编辑器的地方添加如下代码

 <script type="text/plain" id="container" name="content" style="width:1500px;height:400px;"></script>

宽度和高度请根据自行需要设定

③然后在底部添加如下代码

        <script type="text/javascript">
            var um = UM.getEditor('container');                     //文档内容编辑器

            var longtext = $('div#longtext').find('script');
            longtext.each(function(){
                var name = $(this).attr('name');
                UM.getEditor(name);                 //自定义长文本字段编辑器
            });
        </script>

如果需要多个编辑器请获取到所有的编辑器容器节点，循环添加即可