zoukankan      html  css  js  c++  java
  • 富文本编辑器嵌入指定html代码

    先把内容放入一个input中

    <input id="detail" type="hidden" value="${sysCarousel.detail}"/>

    然后判断是插入还是修改

    如果是修改才会向富文本编辑器中嵌入html代码

    <script type="text/plain" id="chvGoodsRemark" name="detail"  style="margin-bottom:100px;1024px;height:700px;"></script>
                    <c:if test="${sysCarousel.id==null}">
                   <script type="text/javascript">
                        UE.getEditor("chvGoodsRemark", {
                    autoClearinitialContent:false,wordCount:true,elementPathEnabled:true,autoHeightEnabled:false,maximumWords:0,fullscreen:false,initialFrameWidth:1000,initialFrameHeight:320
                    }); 
                   </script>    
                    </c:if>
                    
                    <c:if test="${sysCarousel.id!=null}">
                         <script type="text/javascript">
                        UE.getEditor("chvGoodsRemark", {
                    autoClearinitialContent:false,wordCount:true,elementPathEnabled:true,autoHeightEnabled:false,maximumWords:0,fullscreen:false,initialFrameWidth:1000,initialFrameHeight:320
                    }); 
                   </script>        
                    </c:if>

    然后js控制插入代码

    $(function(){
                window.setTimeout(setContent,1000);//一秒后再调用赋值方法
            });
    
            //给ueditor插入值
            function setContent(){
                var a =$('#detail').val();
                UE.getEditor('chvGoodsRemark').execCommand('insertHtml',a);
            }

     如果是想在html页面中直接嵌入一段html(比如<p>123<p>显示123)代码,直接jquery获取这段代码,或者手写一段代码,通过js函数向<text></text>里面赋值即可,例子如下:

    <text id="showInfo2"></text>
     var divshow = $("#showInfo2");
                    divshow.text("");// 清空数据
                    divshow.append(data); // 添加Html内容,不能用Text 或 Val
    <%@ tag language="java" pageEncoding="UTF-8"%>
    <%@ include file="/WEB-INF/views/include/taglib.jsp"%>
    <%@ attribute name="input" type="java.lang.String" required="true"
        description="输入框"%>
    <%@ attribute name="value" type="java.lang.String" required="true"
        description=""%>
    <%@ attribute name="maxWidth" type="java.lang.String" required="false"
        description="最大宽度"%>
    <%@ attribute name="maxHeight" type="java.lang.String" required="false"
        description="最大高度"%>    
    <script id="${input}_editor" name="${input}" type="text/plain" class="required" style="95%;height:600px;"></script>
    <script type="text/javascript">
    UE.getEditor('${input}_editor').addListener("ready", function () { 
        setTimeout('${input}init()',500);
        });
    /* $(function(){
        setTimeout('${input}init()',500);
    }); */
    function ${input}init(){
        var html = $('#${input}').val();
        UE.getEditor('${input}_editor').execCommand('insertHtml',html);
        
    } 
    
    </script>
    <script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('${input}_editor');
    </script>
    <input id="${input}" type="hidden" value="${value}" class="required"/>
    <script type="text/javascript" src="${ctxStatic}/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="${ctxStatic}/ueditor/ueditor.all.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctxStatic}/ueditor/lang/zh-cn/zh-cn.js"></script>
  • 相关阅读:
    PHP开发调试环境配置(基于wampserver+Eclipse for PHP Developers )
    关于汽车
    PCB 敷铜间距规则(转)
    有同感的话
    kubernetes学习之二进制部署1.16
    kubernetes网络之Flannel
    Kubernetes学习之原理
    Kubernetes学习之基础概念
    Centos7配置Grafana对接OpenLDAP
    Centos7安装OpenLDAP
  • 原文地址:https://www.cnblogs.com/fengwenzhee/p/6931881.html
Copyright © 2011-2022 走看看