功能描述

富文本编辑器，常用于新闻、通知、公告等信息的发布。 功能列表：
(1) 支持图片上传到服务器
(2) 支持视频上传到服务器
(3) 支持附件上传到服务器并下载

属性props

控件属性

参数	必填	数据类型	默认值	可选值	说明
config	是	Object			tinymce的配置选项
option	否	Object	{}		附件配置项,{module:'模块编号', path:'文档路径',action:'当前操作类型'}
value	否	String			内容
height	否	String	560px		编辑器高度

方法Methods

事件名	功能说明	参数	参数说明
getContent()	获得编辑器内容
getTinymce()	获取编辑器实例

例1: 新闻发布

详细例子参见源码的新闻管理（sys_news）模块

<template>
    <x-table-edit ref="table" :data-source="{head:{module:'sys_news'},workflow:{titleField: 'title'},option:{privilege:true,keyField:true,attFile:true,initRow:initRow},query:{filter:{type: currType}, order:'_time desc'},webEvn:{beforeAddEditSaveEvn:beforeAddEditSaveEvn}}">
        <x-query slot="query" label-width="70px" cols="5">
            <x-query-item prop="status" label="发布状态：">
                <template v-slot="scope">
                    <x-select v-model="scope.row.status" placeholder="请选择">
                        <el-option :key="100" label="已发布" :value="100" />
                        <el-option :key="0" label="未发布" :value="0" />
                    </x-select>
                </template>
            </x-query-item>
            <x-query-item prop="title" opt="like" label="标题：" />
            <x-query-item prop="_uidname" opt="like" label="创建者：" />
            <x-query-item prop="_oidname" opt="like" label="创建部门：" />
        </x-query>
        <x-table-column prop="status" label="状态" width="80">
            <template v-slot:show="scope">
                {{ scope.row.status == 100 ? '已发布' : '未发布' }}
            </template>
        </x-table-column>
        <x-table-column prop="title" label="标题" />
        <x-table-column prop="_uidname" label="创建者" width="80" />
        <x-table-column prop="_oidname" label="创建者部门" width="150" />
        <x-table-column prop="_time" label="创建时间" width="200" />

        <template v-slot:dialog="scope">
            <x-dialog-edit ref="xDialogEdit" title="信息发布" request append-to-body destroy-on-close :close-on-click-modal="false" fullscreen>
                <template v-if="scope.action">
                    <div class="x-sys-news-print" v-html="scope.row.content"/>
                    <el-button slot="footer" type="primary" icon="el-icon-d-arrow-right" @click="exportPdf(scope.row.title)">导出</el-button>
                </template>
                <template v-else>
                    <x-editor ref="xEditor" :config="config" :option="{module:'sys_news',path: 'sys_news' + '/' + scope.row.nid, action: scope.actionType}" v-model="scope.row.content" v-rules="[{type: 'required'}]" />
                    <!--            <el-button v-if="scope.actionType!='add'" slot="footer" type="warning" icon="el-icon-success" @click="()=>$refs.sysAudit.open(scope.row)">审 核</el-button>-->
                    <el-button v-if="scope.row.status!=100" slot="footer" type="warning" icon="el-icon-success" @click="fabu">发 布</el-button>
                </template>
            </x-dialog-edit>
        </template>
        <!--        <sys-audit ref="sysAudit" title="审核" module="sys_news" keyField="nid" :options="[{label: '审核通过', value: 100},{label: '审核不通过', value: 1}]" :saveBeforeAction="(row, avalue) => {return {status: avalue}}" :saveAfterAction="()=>$refs.table.refresh()" />-->
        <!--        <sys-audit-log ref="sysAuditLog" module="sys_news" width="85%" />-->
    </x-table-edit>
</template>

<script>
    import {MessageBox, Button, Option} from 'element-ui'
    import {XTableEdit, XTableColumn, XQuery, XQueryItem, XQuery, XQueryItem, XDialogEdit, XSelect, tools, XEditor, html2pdf} from 'sei-ui'

    export default {
        name: 'SysNews',
        components: {XEditor, ElButton: Button, ElOption: Option, XTableEdit, XTableColumn, XQuery, XQueryItem, XDialogEdit, XSelect},
        props: {
            type: {type: String}, /* 通知公告类型 */
            config: {type: Object, default: () => ({})}, /* tinymce的配置选项 */
            placeholder: {type: String, default: '<p style="text-align: center;"><span class="x-sys-news-title" style="font-size: 18pt;">标题</span></p><hr><p style="text-align: center;">发布部门：' + (tools.getOidName() || '') + '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 发布时间：' + tools.dateFormat('YYYY-mm-dd', new Date())+ '</p><hr><p style="text-align: left; text-indent: 2em;">请输入内容。。。</p>'}
        },
        data() {
            return {
                currType: this.type || this.$route.meta?.type || "news",
                tools,
                row: {}
            }
        },
        methods: {
            exportPdf(fileName) {
                MessageBox.confirm('确认要导出为pdf吗?', '导出pdf确认', {
                    confirmButtonText: '导出',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const opt = {
                        filename: fileName + '.pdf',
                        pagebreak: {mode: ['avoid-all', 'css', 'legacy']},
                        html2canvas: {
                            scale: 2, // 缩放程度，清晰度，越大越清晰，图片也越大
                            useCORS: true
                        }
                    };
                    html2pdf().set(opt).from(document.getElementsByClassName("x-sys-news-print")[0]).save();
                }).catch(() => null)
            },
            initRow(row) {
                row.status=0;
                row.nid = tools.getUUID();
                row.sysid = this.$project.sysid;
                row.type = this.currType
                row.content = this.placeholder
            },
            beforeAddEditSaveEvn(row) {
                let tinymce = this.$refs.xEditor.getTinymce()
                let v = tinymce.activeEditor.dom.select('.x-sys-news-title')
                v && v.length > 0 && (row.title = v[0].innerText)
                if (row.title == null) {
                    row.title = tinymce.activeEditor.getContent({format: "text"}).substring(0, 100)
                }
            },
            fabu() {
                MessageBox.confirm('确认要发布吗?', '发布确认', {
                    confirmButtonText: '发布',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => this.$refs.xDialogEdit.doSave((newData) => newData.status = 100));
            }
        }
    }
</script>