富文本编辑器的html怎么在form表单中提交,怎么在html中显示不带标签,直接渲染

  • 时间:
  • 来源:互联网
  • 文章标签:

这里以summernote为例,其实在类似ueditor这样的富文本插件,使用方法是一样的,在下面的这个普通表单里面,其实富文本的引用只有一行。

<textarea class="summernote" name="coursewareContent"></textarea>

<form action="#" id="form-Content">
			<div class="form-group">
				<label for="formGroupExampleInput">文章标题</label> 
				<input type="text"	class="form-control" name="title"
					placeholder="请输入课件标题">
			</div>
			
			<div class="form-group">
				<label for="formGroupExampleInput2">课件封面图片url</label> <input type="text"
					class="form-control" name="coursewareImgurl"
					placeholder="请输入视频链接">
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">状态:</label>
				<div class="col-sm-8">
					<label><input name="status" type="radio" value="1" checked/>正常
					</label> <label><input name="status" type="radio" value="0" />停用        
                    </label>
				</div>
			</div>
			
			<div class="form-group">
				<label for="exampleFormControlTextarea1">简介</label>
				<textarea class="form-control" name="jianjie"
					rows="3"></textarea>
			</div>
			<!-- 富文本编辑器编辑图文内容 -->
			<div class="form-group">
				<div class="col-sm-12" style="margin-top: 15px">
					<textarea class="summernote" name="coursewareContent"></textarea>
				</div>
			</div>
		</form>

提交的时候直接序列化表单就行了

function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-Content').serialize()
                        );
            }
        }

在后台直接用实体类接收

public int addSave(@Validated ClassroomOurseware classroomOurseware) {
		return 1;
	}

新增完之后可能还要有富文本的显示功能,要显示到html上,但是往往取出来的内容往往不能够被渲染,而是带着标签显示在页面上,这种情况,我提供一种解决方案。

第一步:写一个隐藏的div,直接把内容塞进去

<div class="content1" hidden="hidden">
        [[${content}]]
</div>

第二步:写一个div,用于显示富文本的内容到html

<div class="content2">
</div>

第三步:把content2的显示内容显示为content1的所有html

$(".content2").html($(".content1").text());

大功告成,希望对你有帮助!

本文链接http://www.taodudu.cc/news/show-83210.html