富文本编辑器嵌入指定html代码
先把内容放入一个input中
<input id="detail" type="hidden" value="${sysCarousel.detail}"/>
然后判断是插入还是修改
如果是修改才会向富文本编辑器中嵌入html代码
<script type="text/plain" id="chvGoodsRemark" name="detail" style="margin-bottom:100px;width: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="width:95%;height:600px;"></script>
<script type="text/javascript">
UE.getEditor('${input}_editor').addListener("ready", function () {
setTimeout('${input}init()',);
});
/* $(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>
富文本编辑器嵌入指定html代码的更多相关文章
- 在Asp.Net或.Net Core中配置使用MarkDown富文本编辑器有开源模板代码(代码是.net core3.0版本)
研究如何使用Markdown你们可能要花好几天才能搞定,但是看我的文章或者下载了源码,你搞定一般在10分钟之内.我先给各位介绍下它: Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯 ...
- 在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)
我们的富文本编辑器不能没有图片上传尤其是截图上传,下面我来教大家怎么实现MarkDown富文本编辑器截图上传和图片上传. 1.配置编辑器到html页 <div id="test-edi ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- kindeditor富文本编辑器初步使用教程
下载kindeditor 可以选择去官网下载(http://kindeditor.net/down.php),不过要FQ:或者直接CSDNhttp://download.csdn.net/downlo ...
- MarkDown富文本编辑器怎么加载模板文件
我们只需要一段加载代码就可以搞定MarkDown加载模板文件. $("#md-demo").bind('click', function () { $.get("/Lib ...
- 富文本编辑器kindeditor的使用
第一步:导入前端js文件 <!-- 富文本编辑器 --> <link rel="stylesheet" href="../plugins/kindedi ...
- 前端vue-TinyMCE富文本编辑器表情插件报错解决
最近项目中需要使用文本编辑器,比较了下最终选择了TinyMCE这款富文本编辑器.我安装的是TinyMCE v5但是在使用表情插件的时候,表情一直都出不来,报错信息如下: Uncaught Syntax ...
- 富文本编辑器上传图片需要配置js,后台代码
富文本编辑器上传图片需要配置js,后台代码
- JSP嵌入ueditor、umeditor富文本编辑器
一.下载: 1.什么是富文本编辑器?就是: 或者是这个: 其中第一个功能比较详尽,其主要用来编写文章,名字叫做udeitor. 第二个就相对精简,是第一个的MINI版,其主要用来编辑即时聊天或者发帖, ...
随机推荐
- 《安卓网络编程》之第四篇 处理URL地址
在Android手机系统中,可以通过URL地址获取网络资源.在URL类的众多方法中,可以使用openStream()方法来读取该URL资源的输入流InputStream.在此方法的基础上可以引申出很多 ...
- Android零碎知识(一)
public abstract Resources getResources () Return a Resources instance for your application's package ...
- ionic2 自定义cordova插件开发以及使用 (Android)
如何写一个cordova 用于ionic2项目中呢,在搜索了一番之后,千篇一律,我都怀疑那些文章是不是全部都是复制来复制去的,而且都不是很详细.我自己也捣鼓了一下午,踩了很多坑.所以特此写这下这篇,记 ...
- (HTTPS)-https原理及tomcat配置https方法
一. 什么是HTTPS 在说HTTPS之前先说说什么是HTTP,HTTP就是我们平时浏览网页时候使用的一种协议.HTTP协议传 输的数据都是未加密的,也就是明文的,因此使用HTTP协议传输隐私信息非常 ...
- javaWeb学习总结(10)- Filter(过滤器)常见应用(3)
一.统一全站字符编码 通过配置参数charset指明使用何种字符编码,以处理Html Form请求参数的中文问题 package me.gacl.web.filter; import java.io. ...
- centos7搭建SVN+Apache+IF.svnadmin实现web管理SVN
阅读目录 1. 介绍 2. 软件准备 3. 建立SVN Server仓库 4. 配置安装PHP&IF.SVNadmin 5. 启动服务 1.介绍 公司最近想把Windows server平台的 ...
- PHP开发微信模版消息换行的问题
微信是个坑!微信是个坑!微信是个坑!重要的时间说三遍 关键的地方是空白换行符到底是什么也不说,百度说是"\n":但是在发送消息的时候发现原样输出,发现json_encode对\n进 ...
- 卸载XCode插件的方法
1.Finder--前往---前往文件夹--输入~/Library/Developer/Xcode/Plug-ins 2.删除要卸载的插件即可.
- C# 特性(Attribute)
个人定义:不侵入对象的情况下,添加对象附注信息. 官方定义:将预定义的系统信息或用户定义的自定义信息与目标元素相关联.目标元素可以是程序集.类.构造函数.委托.枚举.事件.字段.接口.方法.可移植可执 ...
- Vulkan Tutorial 07 Window surface
操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 到目前为止,我们了解到Vulkan是一个与平台特性无关联的API集合.它不能直接与窗 ...