富文本处理-UEditor

2020-12-06 22:05:27 阅读：360 来源： 互联网

简单示例：持续编辑中

<!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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

富文本处理-UEditor