百度ueditor富文本--PC端单个，PC端多个，mobile单个，mobile多个
2024-05-07 20:16:08
我们在之前的文章中已经做过富文本插件的调研。
富文本插件
Ueditor
是百度推出的一款开源在线 HTML 编辑器。
http://fex-team.github.io/ueditor/
比较好用，我们本章详细记录它的应用过程，以及在不同场景下的具体配置。
我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 ueditor用法。
应用bootstrap模板
基础项目源码下载地址为:
SpringMVC+Shiro+MongoDB+BootStrap基础框架
我们在基础项目中已经做好了首页index的访问。
现在就在index.jsp页面和index的路由Controller上做修改，实现 ueditor用法。
下载引用插件
ueditor可以定制，我们这里下载JSP版:
http://ueditor.baidu.com/website/download.html
http://download.csdn.net/detail/q383965374/9887681
下载到的zip包解压后文件如图，使用浏览器打开index.html有完整的demo。
我们在项目中webapp路径下新建一个ueditor文件夹，把解压出来的文件都放入其中，如图:
引用方式如下:
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>ueditor.config.js是配置文件，可以在里面调整相关配置和工具栏工具。
PC端单个
我们现在来在index.jsp页面中初始化一个富文本，富文本中录入的内容用于展示在PC端。
引入使用代码
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>html中使用占位代码
<script id="name" class="ueditorFlag" name="name" type="text/plain" style="width:100%;height:150px;">
${pic.name}</script>初始化代码,使用class名称初始化
// 初始化文本编辑器
$(".ueditorFlag").each(function() {var id = this.id; var ue = UE.getEditor(id, {pasteplain: true, /* 纯文本粘贴 */autoHeightEnabled:false,/* 启用右侧滚轮,默认是true自动长高模式*/toolbars: [['fullscreen', 'source', '|', 'undo', 'redo', '|','bold', 'italic', 'underline','removeformat', '|','insertorderedlist', 'insertunorderedlist','indent', '|', 'justifyleft', 'justifycenter','|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', 'insertimage','|', 'link', 'unlink']]}).addOutputRule(function(root){// 每次编辑框获取焦点的时候都会自动插入<p><br/></p> 不需要的话我们这里可以处理一下// 只处理第一个空的段落，后面的段落可能是人为添加var firstPNode = root.getNodesByTagName("p")[0];firstPNode && /^\s*(<br\/>\s*)?$/.test(firstPNode.innerHTML()) && firstPNode.parentNode.removeChild(firstPNode);});console.log('ueditor for ' + id + ' init.');
});用法与input一样，即可以form提交也可以js中获取值再提交，传递到后台的参数名称是 name的value。
完整html
<%@ include file="./include/header.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script><div id="page-wrapper"><div id="page-inner"><div class="row"><div class="col-md-12"><h1 class="page-header">ueditor用法 <small>PC端单个</small></h1></div></div><!-- /. ROW --><div class="tab-pane fade active in"><form id="base"><div><h4>名称</h4><script id="name" class="ueditorFlag" name="name" type="text/plain" style="width:100%;height:150px;">
${pic.name}</script></div><button type="button" class="btn btn-primary save">保存</button></form></div> <!-- /. ROW --></div><!-- /. PAGE INNER --></div><!-- /. PAGE WRAPPER --><%@ include file="./include/footer.jsp"%>
<script type="text/javascript">// 初始化文本编辑器
$(".ueditorFlag").each(function() {var id = this.id; var ue = UE.getEditor(id, {pasteplain: true, /* 纯文本粘贴 */autoHeightEnabled:false,/* 启用右侧滚轮,默认是true自动长高模式*/toolbars: [['fullscreen', 'source', '|', 'undo', 'redo', '|','bold', 'italic', 'underline','removeformat', '|','insertorderedlist', 'insertunorderedlist','indent', '|', 'justifyleft', 'justifycenter','|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', 'insertimage','|', 'link', 'unlink']]}).addOutputRule(function(root){// 每次编辑框获取焦点的时候都会自动插入<p><br/></p> 不需要的话我们这里可以处理一下// 只处理第一个空的段落，后面的段落可能是人为添加var firstPNode = root.getNodesByTagName("p")[0];firstPNode && /^\s*(<br\/>\s*)?$/.test(firstPNode.innerHTML()) && firstPNode.parentNode.removeChild(firstPNode);});console.log('ueditor for ' + id + ' init.');
});/*** jQuery form 扩展获取数据*/
$.fn.formGet = function(opts) {
opts = $.extend({}, opts);
var data = {},els = opts.formGroup ? this.find('[form-group="' + opts.formGroup + '"]') : this.find('[name]');
if (!els || !els.length) {return data;
}var fnSetValue = (function(emptyToNull) {return emptyToNull ? function(obj, propertyChain, value, allowMulti) {value !== '' && _fnObjectSetPropertyChainValue(obj, propertyChain, value, allowMulti)} : _fnObjectSetPropertyChainValue
})(opts.emptyToNull);els.each(function() {var $this = $(this),type = $this.attr('type'),name = $this.attr('name'), // 可能为属性链tag = this.tagName.toLowerCase();if (tag == 'input') {if (type == 'checkbox') {var v = $(this).val();if (v == 'on' || !v) {fnSetValue(data, name, $(this).prop('checked'));} else {$(this).prop('checked') && fnSetValue(data, name, v, true);}} else if (type == 'radio') {this.checked && fnSetValue(data, name, $this.val());} else {fnSetValue(data, name, $this.val());}} else if ('|select|textarea|'.indexOf('|' + tag + '|') > -1) {fnSetValue(data, name, $this.val());} else {fnSetValue(data, name, $.trim($this.text()));}
});
return data;
};/** * 内部私有方法 */
var _fnObjectGetPropertyChainValue = function(obj, propertyChain) { /* 获取属性链的值 */ if (!obj) return; if (!propertyChain) return obj; var property, chains = propertyChain.split('.'), i = 0, len = chains.length; for (; (property = chains[i]) && i < len - 1; i++) { if (!obj[property]) return; obj = obj[property]; } return obj[property];
},
_fnObjectSetPropertyChainValue = function(obj, propertyChain, value, allowMulti) { /* 设置属性链的值 */ if (!obj || !propertyChain) return; var property, chainObj = obj, chains = propertyChain.split('.'), i = 0, len = chains.length; for (; (property = chains[i]) && i < len - 1; i++) { if (!chainObj[property]) { chainObj[property] = {}; } chainObj = chainObj[property]; } // 改进版：checkbox的多选可以组合为数组 if (!allowMulti || chainObj[property] === undefined) { chainObj[property] = value; } else { var pv = chainObj[property]; if ($.isArray(pv)) { pv.push(value); } else { chainObj[property] = [pv, value]; } } return obj;
}; $(document).ready(function () {/*END-保存表单-END*/$('button.save').on('click', function () {debugger;var data = $('#base').formGet();$.ajax({type: "POST",url: "/pic/save",contentType: "application/json",data: JSON.stringify(data),success: function (result) {console.log(result);if (!result.code) {alert(result.data);} else {alert(result.msg);}},error: function (result) {alert("出错了，请稍后重试");}});});});</script></body></html>辅助实体和路由
Pic.java
package com.test.domain.entity;import java.util.List;public class Pic {private String id;private String name;private String description;private List<String> tags;//标签public String getId() {return id;}public void setId(String id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getDescription() {return description;}public void setDescription(String description) {this.description = description;}public List<String> getTags() {return tags;}public void setTags(List<String> tags) {this.tags = tags;}}
IndexController.java
package com.test.web.controller;import java.io.IOException;
import java.util.ArrayList;
import java.util.List;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import com.test.domain.entity.Pic;
import com.test.util.JSONResult;/*** IndexController* * */
@Controller
public class IndexController {@RequestMapping("/")public String index(Model model) throws IOException {model.addAttribute("hostname", "http://127.0.0.1:8080/");Pic pic=new Pic();List<String> tags=new ArrayList<String>();pic.setName("name");pic.setDescription("描述");tags.add("足球");tags.add("棒球");tags.add("篮球");pic.setTags(tags);model.addAttribute("pic", pic);return "/index";}@RequestMapping("/pic/save")@ResponseBodypublic JSONResult saveMigrateLine(@RequestBody Pic pic) {//保存pic记录//int result = save(pic);int result =1;return result > 0 ? JSONResult.success("保存成功"):JSONResult.error("保存失败!");}
}
PC端多个
因为我们这里是使用class进行初始化的,所以要增加多一个输入框的时候非常简单，只需要增加一个 同样class的占位代码即可。如下:
它们的class都是ueditorFlag。
<h4>名称</h4><script id="name" class="ueditorFlag" name="name" type="text/plain" style="width:100%;height:150px;">
${pic.name}</script><h4>描述</h4><script id="description" class="ueditorFlag" name="description" type="text/plain" style="width:100%;height:150px;">
${pic.description}</script>需要注意的是 使用多个script作为占位时，script的id不能与html中的其他元素 id重复 ，否则页面布局会混乱。
效果如图:
mobile单个
之前的单个和多个都是针对PC版使用时的初始化，现在微信公众号文章和手机端的编辑也是很常用的。 为了可以在页面上更真实的模拟 文本在mobile上的显示是否美观，我们对ueditor的样式在初始化时进行了一些样式调整。 尤其是加上宽度的限制即可。
style="width:375px;height:667px;"引入使用代码
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>html中使用占位代码
<script id="content" class="ueditorFlag" type="text/plain" style="width:375px;height:667px;"name="content"></script>初始化代码,使用class名称初始化
function () {$(".ueditorFlag").each(function () {//实例化编辑器var ue = UE.getEditor(this.id, {pasteplain: true, /* 纯文本粘贴 */toolbars: [['fullscreen', 'source', '|', 'undo', 'redo', '|','bold', 'italic', 'underline', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', /*'selectall', 'cleardoc',*/ '|','rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'fontsize', '|', 'indent', '|','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', '|','link', 'unlink', /*'anchor'*/, '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|','insertimage', 'preview', '|', 'foreword', 'subhead', 'body', 'caption', 'stress', 'quote']],iframeCssUrl: "/ueditor/themes/ancestry.css"});ue.ready(function() {ue.setContent('${pic.description}');});});}用法与input一样，即可以form提交也可以js中获取值再提交，传递到后台的参数名称是 name的value。
完整html
<%@ include file="./include/header.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script><div id="page-wrapper"><div id="page-inner"><div class="row"><div class="col-md-12"><h1 class="page-header">ueditor用法 <small>mobile端单个</small></h1></div></div><!-- /. ROW --><div class="tab-pane fade active in"><form id="base"><div><h4>内容</h4><script id="content" class="ueditorFlag" type="text/plain" style="width:375px;height:667px;"name="content"></script></div><button type="button" class="btn btn-primary save">保存</button></form></div> <!-- /. ROW --></div><!-- /. PAGE INNER --></div><!-- /. PAGE WRAPPER --><%@ include file="./include/footer.jsp"%>
<script type="text/javascript">$(document).ready(function () {$(".ueditorFlag").each(function () {//实例化编辑器var ue = UE.getEditor(this.id, {pasteplain: true, /* 纯文本粘贴 */toolbars: [['fullscreen', 'source', '|', 'undo', 'redo', '|','bold', 'italic', 'underline', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', /*'selectall', 'cleardoc',*/ '|','rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'fontsize', '|', 'indent', '|','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', '|','link', 'unlink', /*'anchor'*/, '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|','insertimage', 'preview', '|', 'foreword', 'subhead', 'body', 'caption', 'stress', 'quote']],iframeCssUrl: "/ueditor/themes/ancestry.css"});ue.ready(function() {ue.setContent('${pic.description}');});});}
)/*** jQuery form 扩展获取数据*/
$.fn.formGet = function(opts) {
opts = $.extend({}, opts);
var data = {},els = opts.formGroup ? this.find('[form-group="' + opts.formGroup + '"]') : this.find('[name]');
if (!els || !els.length) {return data;
}var fnSetValue = (function(emptyToNull) {return emptyToNull ? function(obj, propertyChain, value, allowMulti) {value !== '' && _fnObjectSetPropertyChainValue(obj, propertyChain, value, allowMulti)} : _fnObjectSetPropertyChainValue
})(opts.emptyToNull);els.each(function() {var $this = $(this),type = $this.attr('type'),name = $this.attr('name'), // 可能为属性链tag = this.tagName.toLowerCase();if (tag == 'input') {if (type == 'checkbox') {var v = $(this).val();if (v == 'on' || !v) {fnSetValue(data, name, $(this).prop('checked'));} else {$(this).prop('checked') && fnSetValue(data, name, v, true);}} else if (type == 'radio') {this.checked && fnSetValue(data, name, $this.val());} else {fnSetValue(data, name, $this.val());}} else if ('|select|textarea|'.indexOf('|' + tag + '|') > -1) {fnSetValue(data, name, $this.val());} else {fnSetValue(data, name, $.trim($this.text()));}
});
return data;
};/** * 内部私有方法 */
var _fnObjectGetPropertyChainValue = function(obj, propertyChain) { /* 获取属性链的值 */ if (!obj) return; if (!propertyChain) return obj; var property, chains = propertyChain.split('.'), i = 0, len = chains.length; for (; (property = chains[i]) && i < len - 1; i++) { if (!obj[property]) return; obj = obj[property]; } return obj[property];
},
_fnObjectSetPropertyChainValue = function(obj, propertyChain, value, allowMulti) { /* 设置属性链的值 */ if (!obj || !propertyChain) return; var property, chainObj = obj, chains = propertyChain.split('.'), i = 0, len = chains.length; for (; (property = chains[i]) && i < len - 1; i++) { if (!chainObj[property]) { chainObj[property] = {}; } chainObj = chainObj[property]; } // 改进版：checkbox的多选可以组合为数组 if (!allowMulti || chainObj[property] === undefined) { chainObj[property] = value; } else { var pv = chainObj[property]; if ($.isArray(pv)) { pv.push(value); } else { chainObj[property] = [pv, value]; } } return obj;
}; $(document).ready(function () {/*END-保存表单-END*/$('button.save').on('click', function () {debugger;var data = $('#base').formGet();$.ajax({type: "POST",url: "/pic/save",contentType: "application/json",data: JSON.stringify(data),success: function (result) {console.log(result);if (!result.code) {alert(result.data);} else {alert(result.msg);}},error: function (result) {alert("出错了，请稍后重试");}});});});</script></body></html>
辅助实体和路由
Pic.java
package com.test.domain.entity;import java.util.List;public class Pic {private String id;private String name;private String description;private List<String> tags;//标签public String getId() {return id;}public void setId(String id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getDescription() {return description;}public void setDescription(String description) {this.description = description;}public List<String> getTags() {return tags;}public void setTags(List<String> tags) {this.tags = tags;}}
IndexController.java
package com.test.web.controller;import java.io.IOException;
import java.util.ArrayList;
import java.util.List;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import com.test.domain.entity.Pic;
import com.test.util.JSONResult;/*** IndexController* * */
@Controller
public class IndexController {@RequestMapping("/")public String index(Model model) throws IOException {model.addAttribute("hostname", "http://127.0.0.1:8080/");Pic pic=new Pic();List<String> tags=new ArrayList<String>();pic.setName("name");pic.setDescription("描述");tags.add("足球");tags.add("棒球");tags.add("篮球");pic.setTags(tags);model.addAttribute("pic", pic);return "/index";}@RequestMapping("/pic/save")@ResponseBodypublic JSONResult saveMigrateLine(@RequestBody Pic pic) {//保存pic记录//int result = save(pic);int result =1;return result > 0 ? JSONResult.success("保存成功"):JSONResult.error("保存失败!");}
}效果图
mobile多个
mobile多个跟PC多个一样，使用class来初始化即可。 给每个编辑框限制宽度。
style="width:375px;height:667px;"引用插件
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>html占位
<div class="tab-pane fade active in"><form id="base"><div><h4>内容</h4><script id="name" class="ueditorFlag" type="text/plain" style="width:375px;height:667px;"name="name">${pic.name}</script></div><div><h4>描述</h4><script id="description" class="ueditorFlag" type="text/plain" style="width:375px;height:667px;"name="description">${pic.description}</script></div><button type="button" class="btn btn-primary save">保存</button></form></div> 初始化代码
$(document).ready(function () {$(".ueditorFlag").each(function () {//实例化编辑器var ue = UE.getEditor(this.id, {pasteplain: true, /* 纯文本粘贴 */toolbars: [['fullscreen', 'source', '|', 'undo', 'redo', '|','bold', 'italic', 'underline', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', /*'selectall', 'cleardoc',*/ '|','rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'fontsize', '|', 'indent', '|','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', '|','link', 'unlink', /*'anchor'*/, '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|','insertimage', 'preview', '|', 'foreword', 'subhead', 'body', 'caption', 'stress', 'quote']]});});}
)完整html代码
<%@ include file="./include/header.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script><div id="page-wrapper"><div id="page-inner"><div class="row"><div class="col-md-12"><h1 class="page-header">ueditor用法 <small>mobile端多个</small></h1></div></div><!-- /. ROW --><div class="tab-pane fade active in"><form id="base"><div><h4>内容</h4><script id="name" class="ueditorFlag" type="text/plain" style="width:375px;height:667px;"name="name">${pic.name}</script></div><div><h4>描述</h4><script id="description" class="ueditorFlag" type="text/plain" style="width:375px;height:667px;"name="description">${pic.description}</script></div><button type="button" class="btn btn-primary save">保存</button></form></div> <!-- /. ROW --></div><!-- /. PAGE INNER --></div><!-- /. PAGE WRAPPER --><%@ include file="./include/footer.jsp"%>
<script type="text/javascript">$(document).ready(function () {$(".ueditorFlag").each(function () {//实例化编辑器var ue = UE.getEditor(this.id, {pasteplain: true, /* 纯文本粘贴 */toolbars: [['fullscreen', 'source', '|', 'undo', 'redo', '|','bold', 'italic', 'underline', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', /*'selectall', 'cleardoc',*/ '|','rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'fontsize', '|', 'indent', '|','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', '|','link', 'unlink', /*'anchor'*/, '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|','insertimage', 'preview', '|', 'foreword', 'subhead', 'body', 'caption', 'stress', 'quote']]});});}
)/*** jQuery form 扩展获取数据*/
$.fn.formGet = function(opts) {
opts = $.extend({}, opts);
var data = {},els = opts.formGroup ? this.find('[form-group="' + opts.formGroup + '"]') : this.find('[name]');
if (!els || !els.length) {return data;
}var fnSetValue = (function(emptyToNull) {return emptyToNull ? function(obj, propertyChain, value, allowMulti) {value !== '' && _fnObjectSetPropertyChainValue(obj, propertyChain, value, allowMulti)} : _fnObjectSetPropertyChainValue
})(opts.emptyToNull);els.each(function() {var $this = $(this),type = $this.attr('type'),name = $this.attr('name'), // 可能为属性链tag = this.tagName.toLowerCase();if (tag == 'input') {if (type == 'checkbox') {var v = $(this).val();if (v == 'on' || !v) {fnSetValue(data, name, $(this).prop('checked'));} else {$(this).prop('checked') && fnSetValue(data, name, v, true);}} else if (type == 'radio') {this.checked && fnSetValue(data, name, $this.val());} else {fnSetValue(data, name, $this.val());}} else if ('|select|textarea|'.indexOf('|' + tag + '|') > -1) {fnSetValue(data, name, $this.val());} else {fnSetValue(data, name, $.trim($this.text()));}
});
return data;
};/** * 内部私有方法 */
var _fnObjectGetPropertyChainValue = function(obj, propertyChain) { /* 获取属性链的值 */ if (!obj) return; if (!propertyChain) return obj; var property, chains = propertyChain.split('.'), i = 0, len = chains.length; for (; (property = chains[i]) && i < len - 1; i++) { if (!obj[property]) return; obj = obj[property]; } return obj[property];
},
_fnObjectSetPropertyChainValue = function(obj, propertyChain, value, allowMulti) { /* 设置属性链的值 */ if (!obj || !propertyChain) return; var property, chainObj = obj, chains = propertyChain.split('.'), i = 0, len = chains.length; for (; (property = chains[i]) && i < len - 1; i++) { if (!chainObj[property]) { chainObj[property] = {}; } chainObj = chainObj[property]; } // 改进版：checkbox的多选可以组合为数组 if (!allowMulti || chainObj[property] === undefined) { chainObj[property] = value; } else { var pv = chainObj[property]; if ($.isArray(pv)) { pv.push(value); } else { chainObj[property] = [pv, value]; } } return obj;
}; $(document).ready(function () {/*END-保存表单-END*/$('button.save').on('click', function () {debugger;var data = $('#base').formGet();$.ajax({type: "POST",url: "/pic/save",contentType: "application/json",data: JSON.stringify(data),success: function (result) {console.log(result);if (!result.code) {alert(result.data);} else {alert(result.msg);}},error: function (result) {alert("出错了，请稍后重试");}});});});</script></body></html>
其他辅助类参考上文。
效果如图:
百度ueditor富文本--PC端单个，PC端多个，mobile单个，mobile多个相关推荐
- java 百度副文本_spring boot 、springMVC环境集成百度ueditor富文本编辑器
spring-boot-mvc-ueditor-qiniu spring boot .springMVC环境集成百度ueditor富文本编辑器,使用七牛云存储图片 依赖库版本: spring boot ...
- php引入百度Ueditor富文本编辑器
php引入百度Ueditor富文本编辑器 文本编辑器插件内容丰富,比起传统的textarea标签输入要好用很多,看看如何在页面实现引入吧 1.下载适合的资源包(可以去官网下载适合的版本),我是php引 ...
- 百度ueditor富文本--图片保存路径的配置以及上传到远程服务器
我们在上篇文章中学习了 上传图片的配置: 百度ueditor富文本--配置图片上传 在文章的最后 讲到 ueditor 默认设置的 保存图片的 路径 是相对路径,项目相关的. 保存的图片会放在to ...
- 百度Ueditor 富文本弹出层，如何保证点击空白处不关闭
百度Ueditor 富文本弹出层,如何保证点击空白处不关闭 使用百度富文本上传图片.视频等资源时,在上传过程中如果点击了弹出层外的地方,弹出层自动关闭,上传就自动退出了,导致资源就上传失败.如何解决这 ...
- 百度UEditor富文本编辑器去除自动追加span标签
#消息模板实时翻译 1.消息模板支持实时翻译,并且将消息模板中的主题.消息.短信.邮件修改为消息富文本编辑器,对主题和短信的富文本编辑器工具进行隐藏. 2.替换规则: 同步拼接编码和label, ...
- phpeditor编写php_PHP如何搭建百度Ueditor富文本编辑器
本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为 ...
- 百度ueditor富文本插件插入视频问题汇总【必须收藏】
业务场景:想必在非vue情况下很多后台大多都在用百度的富文本,这不公司的一些老项目在迁移另一台服务器后就遇到了各式各样的奇怪问题,此文会总结汇总该插件的所有相关问题及修改方案,不断更新! 问题一:在插 ...
- django 与 百度 ueditor 富文本编辑器集成
django 是基于 python 的一个很好的web开发框架.ueditor 是百度开源的一个富文本编辑器.有很好的用户体验,很适合中国人使用的一个编辑器. 在使用ueditor 之前,我集成过 f ...
- ueditor html中使用方法,vue集成百度UEditor富文本编辑器使用教程
在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器.那么,如果你有这个需求,希望可以帮助到你. vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于 ...
最新文章
- VTK：小部件之TexturedButtonWidget
- 【ARM】ARM汇编程序设计(五) str和ldr
- python和stata_从Python运行Stata do文件
- IP,VIP,SCAN IP之间的关系是怎么样的呢？
- caffe学习笔记（2）
- 拓扑检查中的一些问题（为啥没自相交）
- html5 苹果手机上传word文件_DocumentsbyReaddle文件管理器，让你的苹果手机 更顺畅...
- 【Vegas原创】Oracle批量create、Lock user的方法
- C#.NET身份证验证算法
- 音乐播放类应用后台播放耗电评测报告 1
- LiteIDE中运行GO
- linux 切换gnome kde桌面,科学网—openSUSE15.1切换桌面环境（从Gnome至KDE Plasma） - 潘林的博文...
- 乐山市计算机学校灵异事件,我也来说个以前上学时候的灵异事件
- MSN Messenger协议 【 very cool stuff 】
- 0基础怎么学习短视频剪辑，并通过剪辑赚钱？
- 学计算机用多大的u盘合适,装w764位系统需要多大u盘呢?
- c语言c11标准 pdf,C语言新标准C11
- 软件开发投标技术力量_开发者社区的力量
- 实战分享：一文读懂RS-232总线
- Nginx 实现OCSP Stapling