add Editor media&templates&pagebreak

src/components/scEditor/index.vue

@@ -15,9 +15,14 @@
 	// 引入编辑器插件
 	import 'tinymce/plugins/code'  //编辑源码
 	import 'tinymce/plugins/image'  //插入编辑图片
+	import 'tinymce/plugins/media'  //插入视频
 	import 'tinymce/plugins/link'  //超链接
 	import 'tinymce/plugins/preview'//预览
+	import 'tinymce/plugins/template'//模板
 	import 'tinymce/plugins/table'  //表格
+	import 'tinymce/plugins/pagebreak'  //分页
+	import 'tinymce/plugins/lists'  //列
+	import 'tinymce/plugins/advlist'  //列
 	import 'tinymce/plugins/quickbars'  //快速工具条
 
 	export default {
@@ -43,13 +48,17 @@
 			},
 			plugins: {
 				type: [String, Array],
-				default: 'code image link preview table quickbars'
+				default: 'code image media link preview table quickbars template pagebreak lists advlist'
 			},
 			toolbar: {
 				type: [String, Array],
 				default: 'undo redo |  forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
-					alignleft aligncenter alignright alignjustify outdent indent lineheight | bullist numlist | \
+					alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | \
-					image table  preview | code selectall'
+					image media table template preview | code selectall'
+			},
+			templates: {
+				type: Array,
+				default: () => []
 			}
 		},
 		data() {
@@ -70,6 +79,7 @@
 					resize: true,
 					elementpath: true,
 					content_style: "",
+					templates: this.templates,
 					quickbars_selection_toolbar: 'forecolor backcolor bold italic underline strikethrough link',
 					quickbars_image_toolbar: 'alignleft aligncenter alignright',
 					quickbars_insert_toolbar: false,

src/views/vab/editor.vue

@@ -1,7 +1,7 @@
 <template>
 	<el-main>
 		<el-card shadow="never">
-			<sc-editor v-model="html" placeholder="请输入" :height="400"></sc-editor>
+			<sc-editor v-model="html" placeholder="请输入" :templates="templates" :height="400"></sc-editor>
 		</el-card>
 		<el-card shadow="never" header="配置" style="margin-top: 20px;">
 			<el-descriptions border :column="1">
@@ -9,9 +9,10 @@
 				<el-descriptions-item label="placeholder">占位符</el-descriptions-item>
 				<el-descriptions-item label="height">编辑器高度，默认300</el-descriptions-item>
 				<el-descriptions-item label="disabled">禁用编辑器 Boolean</el-descriptions-item>
+				<el-descriptions-item label="templates">插入自定义模板 Array</el-descriptions-item>
 				<el-descriptions-item label="toolbar">自定义工具栏，使用"|"竖杠分割，使用"\"斜杠分组，默认：'undo redo |  forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
-					alignleft aligncenter alignright alignjustify outdent indent lineheight | bullist numlist | \
+					alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | \
-					image table  preview | code selectall'</el-descriptions-item>
+					image media table template preview | code selectall'</el-descriptions-item>
 			</el-descriptions>
 		</el-card>
 	</el-main>
@@ -28,7 +29,19 @@
 		},
 		data(){
 			return {
-				html: ''
+				html: '',
+				templates: [
+					{
+						title: '自定义HTML模板',
+						description: '',
+						content: '<strong>演示模板</strong>'
+					},
+					{
+						title: '列表',
+						description: '',
+						content: '<ol><li>演示列表1</li><li>演示列表2</li></ol>'
+					}
+				]
 			}
 		}
 	}