富文本处理-UEditor
作者：互联网
简单示例：持续编辑中
<!DOCTYPE html>
<html>
<head>
<title>iviewDemo</title>
#parse("sys/header.html")
<!-- 引入vue-ueditor-wrap.min.js -->
<script src="${rc.contextPath}/statics/libs/vue-ueditor-wrap.min.js"></script>
</head>
<body>
<div id="rrapp" v-cloak>
<!-- UEditor初始化 -->
<vue-ueditor-wrap v-model="richTextMSG" :config="ueConfig"></vue-ueditor-wrap>
</div>
<!-- 引入页面JS -->
<script src="${rc.contextPath}/js/test/richtext.js?_${date.systemTime}"></script>
</body>
</html>
//JQuery
$(function () {
});
//VUE
var vm = new Vue({
el: '#rrapp',
//引入组件
components: {
VueUeditorWrap
},
data: {
//富文本内容
richTextMSG:'',
//UEditor配置
ueConfig: {
toolbars: [
[
'undo', //撤销
'bold', //加粗
'indent', //首行缩进
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'subscript', //下标
'fontborder', //字符边框
'superscript', //上标
'formatmatch', //格式刷
'fontfamily', //字体
'fontsize', //字号
'justifyleft', //居左对齐
'justifycenter', //居中对齐
'justifyright', //居右对齐
'justifyjustify', //两端对齐
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'lineheight',//行间距
'insertvideo',
'insertimage',
]
],
'fontfamily':[
{ label:'',name:'songti',val:'宋体,SimSun'},
{ label:'仿宋',name:'fangsong',val:'仿宋,FangSong'},
{ label:'仿宋_GB2312',name:'fangsong',val:'仿宋_GB2312,FangSong'},
{ label:'',name:'kaiti',val:'楷体,楷体_GB2312, SimKai'},
{ label:'',name:'yahei',val:'微软雅黑,Microsoft YaHei'},
{ label:'',name:'heiti',val:'黑体, SimHei'},
{ label:'',name:'lishu',val:'隶书, SimLi'},
{ label:'',name:'andaleMono',val:'andale mono'},
{ label:'',name:'arial',val:'arial, helvetica,sans-serif'},
{ label:'',name:'arialBlack',val:'arial black,avant garde'},
{ label:'',name:'comicSansMs',val:'comic sans ms'},
{ label:'',name:'impact',val:'impact,chicago'},
{ label:'',name:'timesNewRoman',val:'times new roman'}
],
// 编辑器不自动被内容撑高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 500,
// 初始容器宽度
initialFrameWidth: '100%',
// 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
//serverUrl: '../sys/oss/upload',
//serverUrl: 'http://localhost:8080/framework/ueditor/exec',
//UEditor 资源文件的存放路径，如果你使用的是vue-cli生成的项目，通常不需要设置该选项，vue-ueditor-wrap会自动处理常见的情况
UEDITOR_HOME_URL: '../statics/UEditor/',
}
},
methods: {
}
});
标签：UEditor,name,val,label,仿宋,对齐,文本处理 来源： https://blog.csdn.net/RisoKome/article/details/110776172