常规版里el-dialog中加入富文本 trumbowyg 失效问题
富文本 trumbowyg 控件：
trumbowyg.zip
a(https://mega.nz/file/Duwh1RTL#6Kho4liRmbBCAiIBjIJlwSUZ_YVbTt_g3zzg9EZ8EDc)[https://mega.nz/file/Duwh1RTL#6Kho4liRmbBCAiIBjIJlwSUZ_YVbTt_g3zzg9EZ8EDc]
我把这个加入到了工程里的 statics下了，如图1，
img[//cdn.renren.io/8c656202205261716393154.png]
样式出来了，但是富文本的插件按钮没反应，如图2
img[//cdn.renren.io/b3a90202205261716495155.png]
html 文件：
https://mega.nz/file/23oT1ajI#nNHkCehjiLHbd1KGEti5Zw8yISRpN3WV5qYhSprD1Go
请各位大佬指教，如何解决这个问题啊，我的是 renren-security常规版v2.9.1
@Mark
[pre]
<!DOCTYPE html>
<html>
<head>
<#include "/header.html">
<link rel="stylesheet" href="${request.contextPath}/statics/trumbowyg/dist/ui/trumbowyg.min.css">
<link rel="stylesheet" href="${request.contextPath}/statics/trumbowyg/dist/plugins/colors/ui/trumbowyg.colors.min.css">
<link rel="stylesheet" href="${request.contextPath}/statics/trumbowyg/dist/plugins/emoji/ui/trumbowyg.emoji.min.css">
<link rel="stylesheet" href="${request.contextPath}/statics/trumbowyg/dist/plugins/table/ui/trumbowyg.table.min.css">
</head>
<body>
<div v-cloak class="aui-wrapper aui-page__iframe">
<div class="aui-content__wrapper">
<div class="aui-content">
<el-card shadow="never" class="aui-card--fill">
<div class="mod-sys__product">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input size="mini" v-model="dataForm.title" placeholder="标题" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button size="mini" v-if="$hasPermission('info:article:save')" type="primary" @click="openAddOrUpdate()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<el-dialog fullscreen :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form :model="dataForm" ref="dataForm" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
<el-form-item label="标题" prop="title">
<el-input v-model="dataForm.title" placeholder="标题"></el-input>
</el-form-item>
<el-form-item label="详情" prop="content">
<textarea id="full-editor" v-model="dataForm.content" data-value="dataForm.content"></textarea>
</el-form-item>
</el-form>
<template slot="footer">
<el-button size="mini" @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button size="mini" type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}
</el-button>
</template>
</el-dialog>
</div>
</el-card>
</div>
</div>
</div>
<#include "/footer.html">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="${request.contextPath}/statics/trumbowyg/dist/trumbowyg.js"></script>
<script src="${request.contextPath}/statics/trumbowyg/dist/trumbowyg.min.js"></script>
<script src="${request.contextPath}/statics/trumbowyg/dist/plugins/pasteimage/trumbowyg.pasteimage.min.js"></script>
<script src="${request.contextPath}/statics/trumbowyg/dist/plugins/base64/trumbowyg.base64.min.js"></script>
<script src="${request.contextPath}/statics/trumbowyg/dist/plugins/upload/trumbowyg.upload.min.js"></script>
<script src="https://rawcdn.githack.com/RickStrahl/jquery-resizable/0.35/dist/jquery-resizable.min.js"></script>
<script src="${request.contextPath}/statics/trumbowyg/dist/plugins/resizimg/trumbowyg.resizimg.min.js"></script>
<script src="${request.contextPath}/statics/trumbowyg/dist/plugins/cleanpaste/trumbowyg.cleanpaste.min.js"></script>
<script src="${request.contextPath}/statics/trumbowyg/dist/plugins/colors/trumbowyg.colors.min.js"></script>
<script src="${request.contextPath}/statics/trumbowyg/dist/plugins/emoji/trumbowyg.emoji.min.js"></script>
<script src="${request.contextPath}/statics/trumbowyg/dist/plugins/fontfamily/trumbowyg.fontfamily.min.js"></script>
<script src="${request.contextPath}/statics/trumbowyg/dist/plugins/fontsize/trumbowyg.fontsize.min.js"></script>
<script src="${request.contextPath}/statics/trumbowyg/dist/plugins/indent/trumbowyg.indent.min.js"></script>
<script src="${request.contextPath}/statics/trumbowyg/dist/plugins/table/trumbowyg.table.min.js"></script>
<script type="text/javascript">
var _obj = {
btnsDef: {
image: {
dropdown: ['insertImage', 'base64', 'upload'],
ico: 'insertImage'
}
},
btns: [
['viewHTML'],
['undo', 'redo'],
['formatting'],
['fontfamily'],
['fontsize'],
['foreColor', 'backColor'],
['indent', 'outdent'],
['emoji'],
['strong', 'em', 'del'],
['superscript', 'subscript'],
['link'],
['table'],
['image'], // Our fresh created dropdown
['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
['unorderedList', 'orderedList'],
['horizontalRule'],
['removeformat']
], plugins: {
upload: {
serverPath: '/admin/sys/oss/upload',
fileFieldName: 'file',
urlPropertyName: 'data.link'
}, resizimg: {
minSize: 64,
step: 16,
}, colors: {
foreColorList: ['ff0000', '00ff00', '0000ff', '800000', 'FFFF00', '008000', '121936', '4de7c8'],
backColorList: ['000', '333', '555', 'F5F5F5', 'F8F8FF', '778899', '800000', 'A9A9A9', '808080', 'A9A9A9', '696969']
},
fontfamily: {
fontList: [
{name: 'Arial', family: 'Arial, Helvetica, sans-serif'},
{name: 'Comic Sans', family: '\'Comic Sans MS\', Textile, cursive, sans-serif'},
{name: 'Open Sans', family: '\'Open Sans\', sans-serif'},
{name: '宋体', family: 'SimSun'},
{name: '微软雅黑', family: '"Microsoft Yahei"'},
{
name: '中英文整合',
family: 'Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei"'
},
]
},
fontsize: {
sizeList: [
'12px', '14px',
'18px', '20px',
'22px'
],
allowCustomSize: true
},
}, autogrow: true
};
(function ($) {
$('#full-editor').trumbowyg(_obj);
var vm = window.vm = new Vue({
el: '.aui-wrapper',
i18n: window.SITE_CONFIG.i18n,
mixins: [window.SITE_CONFIG.mixinViewModule],
data: function () {
return {
mixinViewModuleOptions: {
getDataListURL: '/act/activity/page',
getDataListIsPage: true,
deleteURL: '/act/activity',
deleteIsBatch: true
},
queryDate: '',
visible1: false,
visible: true,
tableData: [],
dataForm: {
id: '',
title: '',
content: '',
},
imageUrl: '',
}
},
computed: {
dataRule: function () {
return {
name: [
{required: true, message: vm.$t('validate.required'), trigger: 'blur'}
],
content: [
{required: true, message: vm.$t('validate.required'), trigger: 'blur'}
],
}
}
},
components: {},
beforeCreate: function () {
vm = this;
},
created: function () {
},
watch: {},
methods: {
openAddOrUpdate: function (_id) {
vm.visible = true;
vm.imageUrl = '';
vm.dataForm = {
title: '',
content: '',
};
$('#full-editor').trumbowyg(_obj);
},
// 表单提交
dataFormSubmitHandle: _.debounce(function () {
}, 1000, {'leading': true, 'trailing': false}),
}
});
})(jQuery);
</script>
</body>
</html>
[/pre]
