Layui之動態循環遍歷出的富文本編輯器顯示

這篇記得是工作中的例子

描述：

平常的富文本顯示都是根據靜態的html獲取id來顯示，比如：

<textarea class="layui-textarea" id="content" >  
  富文本內容
</textarea>

layui.use([ "form", "layer","layedit"], function() {
    var  form = layui.form;
    var  layer = layui.layer;
     var layedit = layui.layedit;//引入layedit
        //富文本
         layedit.set({//上傳圖片
            uploadImage: {
                url: '/common/upload/uploadTextareaImage', //接口url
                type: 'post', //默認post
                success: function (data) {
                   
                     if (data.status == 0) {
                         layer.msg("圖片上傳成功!");
                     }
                     if (data.message != null) {
                         layer.msg(result.message)
                     }
                
                }
            }
        });
        //content就是關聯id，只能是id並且只能放置一個id
        //下面這段代碼最好放在上段代碼下面
        var index = layedit.build('content', {
            height: 500//高度
        });


//很多時候，你用來layui的東西你就必須按着他的規范接着往下做，這就是用layui最蛋疼的一點，
不用的話就出不來效果，比如獲取富文本內容的獲取就用下面的代碼：
    
 //編輯器外部操作
var content = layedit.getContent(index) //獲取編輯器內容
var text = layedit.getText(index) //獲取編輯器純文本內容
layedit.getSelection(index)

  };

現在有個需求就是，富文本的數量是動態的，並且這個數量的個數是根據配置文件來獲取的

先看后台配置文件是這樣的properties文件：

有三段標題，每個標題根據逗號隔開，通過java代碼讀取
budget.target=\u9884\u7B97\u76EE\u68071,\u9884\u7B97\u76EE\u68072,\u9884\u7B97\u76EE\u68073

本來配置文件里面存的是中文，但是不管你輸出什么文字，eclipse都會幫你轉碼成上面那樣==
比如原來是這樣的
budget.target = 名稱1，名稱2，名稱3

然后我們根據java代碼讀取配置里面配置文件標題的數量：

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;

@Configuration
@PropertySource("classpath:xxx.properties")
public class PropertyUtil {

    @Value("${budget.target}")
    private String budgetTarget;//這個是我們從配置文件讀取的
    
    public String getBudgetTarget() {
        return budgetTarget;
    }

    public void setBudgetTarget(String budgetTarget) {
        this.budgetTarget = budgetTarget;
    }

}

接着：

@RequestMapping(value = "edit")
ModelAndView edit(Model model) {

// 從配置文件讀取項目詳情的名稱和數量
String budget = propertyUtil.getBudgetTarget();

String[] budgets = budget.split(",");//得到一個string數組，然后我們就可以知道我們需要遍歷的富文本數量了
//注：一個標題一個富文本編輯器

model.addAttribute("budgets ", budgets);

ModelAndView modelAndView = new ModelAndView("backend/xx/xx/xx");
return modelAndView;

}

然后通過jstl+el表達式進行前端渲染：

<form class="layui-form common-form">
        <b>詳情</b>
        <c:forEach items="${budgets}" var="b" varStatus="s">
            <div class="layui-form-item">
                <!-- <label class="layui-form-label"></label> -->
                <textarea placeholder="請輸入內容" lay-verify="content" autocomplete="off"
                    id="${b}${s.index}" class="layui-textarea"></textarea>
            </div>
        </c:forEach>
    </form>

上面的id="content${s.index}" 表示 標題0，標題1，標題2這樣，主要是為了通過layui動態渲染富文本做准備
這邊實際代碼不是這樣的，為了方便記錄所以很多地方刪了

渲染富文本js：

//接收文本索引
var indexs = [];
layui.use([ "form", "layer","layedit" ], function() {
    form = layui.form;
    layer = layui.layer;
    layedit = layui.layedit;
    
        //富文本
         layedit.set({//上傳圖片
            uploadImage: {
                url: '/common/upload/uploadTextareaImage', //接口url
                type: 'post', //默認post
                success: function (data) {
                   
                     if (data.status == 0) {
                         layer.msg("圖片上傳成功!");
                     }
                     if (data.message != null) {
                         layer.msg(result.message)
                     }
                
                }
            }
        });

      // 渲染富文本
        $(".layui-textarea").each(function (index, obj) {
            var index = layedit.build($(obj).attr("id"), {//通過循環遍歷出每一個id
                height: 100
            });
            indexs.push(index);//沒每個id對應的索引push進數組

        });

　　　　然后在需要的地方獲取富文本內容

　　　　　　// 先清空富文本內容
　　　　　　var contents = [];
　　　　　　// 獲取富文本內容
　　　　　　for (var i = 0; i < indexs.length; i++) {
　　　　　　　　contents.push(layedit.getContent(indexs[i]));
　　　　　　}

　　　　
        });

實際效果：

 

 關於富文本內容就先告一段落了