wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: downgrade tinymce and fix editor config

Browse Source
This commit is contained in:
wangqiao
2025-08-24 15:54:02 +08:00
parent a2fe21a497
commit 366b48188d
5 changed files with 379 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

727
pages/channel/create/index.vue
View File

@ -1,375 +1,380 @@
<template>
<KlNavTab></KlNavTab>
<div class="mx-auto w-[1440px]">
<!-- 使用 el-form 重构表单区域 -->
<el-form ref="formRef" inline :model="formData" label-width="110px" class="custom-form mb-[20px] mt-[20px] border rounded p-[20px]!">
<el-form-item label="标题：" prop="postsTitle" :rules="{ required: true, message: '请输入标题', trigger: 'blur' }">
<el-input v-model="formData.postsTitle" placeholder="请输入标题" class="w-[300px]!" minlength="4" maxlength="40"></el-input>
</el-form-item>
<el-form-item label="分类：" class="mb-[10px]" prop="projectDicId" :rules="{ required: true, message: '请选择分类', trigger: ['blur', 'change'] }">
<el-select v-model="formData.projectDicId" placeholder="请选择分类" class="w-[300px]!">
<el-option v-for="item in projectTypeList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="标签：" class="mb-[10px]" prop="postsTags" :rules="{ required: true, message: '请输入标签', trigger: ['blur', 'change'] }">
<el-select
v-model="formData.postsTags"
:remote-method="remoteMethod"
:loading="loading"
filterable
remote
multiple
placeholder="请输入搜索标签"
class="w-[300px]!"
>
<el-option v-for="(item, index) in labelsList" :key="index" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="频道列表：" class="mb-[10px]" prop="channelId" :rules="{ required: true, message: '请选择频道', trigger: ['blur', 'change'] }">
<el-select v-model="formData.channelId" placeholder="请选择频道" class="w-[300px]!">
<el-option v-for="item in channelIdList" :key="item.channelId" :label="item.channelTitle" :value="item.channelId" />
</el-select>
</el-form-item>
<!-- <el-form-item label="上传封面：" prop="postsCover" :rules="{ required: true, message: '请上传封面', trigger: ['blur', 'change'] }">
<KlUploader v-model:file-list="formData.postsCover" :limit="1" :size="1" tips="上传图片支持jpg/gif/png格式"> </KlUploader>
</el-form-item> -->
</el-form>
<Editor :id="tinymceId" v-model="myValue" :init="init" :disabled="disabled" :placeholder="placeholder" />
<!-- 按钮区域 -->
<div class="mt-[20px] flex justify-end">
<el-button :loading="post_loading" class="mr-[10px]" @click="previewContent">预览</el-button>
<el-button :loading="post_loading" type="primary" @click="saveContent">发表</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import { keywords } from '~/api/upnew/index'
import { reactive, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { create, list } from '~/api/channel/index'
import { parent,parentV2 } from '~/api/upnew/index'
import { upload } from '~/api/common/index' // 自定义上传方法
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver'
import 'tinymce/themes/silver/theme'
import 'tinymce/models/dom'
import 'tinymce/icons/default'
import 'tinymce/icons/default/icons'
// 引入编辑器插件
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' //快速工具条
import 'tinymce/plugins/wordcount' // 字数统计插件
// import '~/assets/tinymce/langs/zh-Hans.js' //下载后的语言包
// import 'tinymce/skins/content/default/content.css'
// 获取从其他地方传过来的参数
const channelId = route.query.channelId as string
const props = defineProps({
value: {
type: String,
default: '',
},
placeholder: {
type: String,
default: '请输入帖子内容',
},
height: {
type: Number,
default: 500,
},
disabled: {
type: Boolean,
default: false,
},
plugins: {
type: [String, Array],
default: 'code image link preview table quickbars pagebreak lists advlist',
},
toolbar: {
type: [String, Array],
default:
'undo redo codesample bold italic underline strikethrough link alignleft aligncenter alignright alignjustify \
bullist numlist outdent indent removeformat forecolor backcolor |formatselect fontselect fontsizeselect | \
blocks fontfamily fontsize pagebreak lists image customvideoupload table preview | code selectall',
},
templates: {
type: Array,
default: () => [],
},
options: {
type: Object,
default: () => ({}),
},
})
//用于接收外部传递进来的富文本
const myValue = ref(props.value)
const tinymceId = ref('vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''))
const init = reactive({
selector: '#' + tinymceId.value, //富文本编辑器的id,
language_url: '~/staic/tinymce/langs/zh_CN.js', // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件
language: 'zh-Hans', //语言
skin_url: '~/staic/tinymce/skins/ui/oxide', // skin路径，具体路径看自己的项目
content_css: '~/staic/tinymce/skins/content/default/content.css',
menubar: true, //顶部菜单栏显示
statusbar: true, // 底部的状态栏
plugins: props.plugins,
toolbar: props.toolbar,
toolbar_mode: 'sliding',
font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;', //字体
paste_convert_word_fake_lists: false, // 插入word文档需要该属性
font_size_formats: '12px 14px 16px 18px 22px 24px 36px 72px', //文字大小
height: props.height, //编辑器高度
placeholder: props.placeholder,
branding: false, //是否禁用"Powered by TinyMCE"
promotion: false, //禁用升级按钮
image_dimensions: false, //去除宽高属性
paste_webkit_styles: 'all',
paste_merge_formats: true,
nonbreaking_force_tab: false,
paste_auto_cleanup_on_paste: false,
file_picker_types: 'file',
resize: true,
elementpath: true,
content_style: `img {max-width:100%;} body{background-color: #fff;}`, // 直接自定义可编辑区域的css样式
templates: props.templates,
quickbars_selection_toolbar: 'forecolor backcolor bold italic underline strikethrough link',
quickbars_image_toolbar: 'alignleft aligncenter alignright',
quickbars_insert_toolbar: false,
image_caption: true,
image_advtab: true,
convert_urls: false,
images_upload_url: import.meta.env.VITE_BASE_API,
images_upload_handler: function (blobInfo: any, progress: any) {
console.log(blobInfo, progress)
return new Promise((resolve, reject) => {
const data = new FormData()
data.append('file', blobInfo.blob())
data.append('fieldName', blobInfo.filename())
upload('/prod-api/app-api/infra/file/upload', data)
.then((res) => {
resolve(res.data)
})
.catch(() => {
reject('Image upload failed')
})
})
},
// 添加自定义按钮
setup: function (editor: any) {
if (process.client) {
// 注册一个新的视频上传按钮
editor.ui.registry.addButton('customvideoupload', {
icon: 'embed', // 使用嵌入媒体图标
tooltip: '上传视频',
onAction: function () {
// 创建文件输入元素
const input = document.createElement('input')
input.setAttribute('type', 'file')
input.setAttribute('accept', 'video/*')
// 处理文件选择事件
input.onchange = function () {
if (input.files && input.files[0]) {
const file = input.files[0]
const data = new FormData()
data.append('file', file)
data.append('fieldName', file.name)
// 可以在这里添加上传进度显示
upload('/prod-api/app-api/infra/file/upload', data)
.then((res) => {
// 插入视频到编辑器
editor.insertContent(`
<video controls width="400">
<source src="${res.data}" type="video/${file.name.split('.').pop()}">
您的浏览器不支持视频标签
</video>
`)
})
.catch((error) => {
console.error('视频上传失败:', error)
// 可以添加错误提示
})
}
}
// 触发文件选择
input.click()
},
})
<KlNavTab></KlNavTab>
<div class="mx-auto w-[1440px]">
<!-- 使用 el-form 重构表单区域 -->
<el-form ref="formRef" inline :model="formData" label-width="110px" class="custom-form mb-[20px] mt-[20px] border rounded p-[20px]!">
<el-form-item label="标题：" prop="postsTitle" :rules="{ required: true, message: '请输入标题', trigger: 'blur' }">
<el-input v-model="formData.postsTitle" placeholder="请输入标题" class="w-[300px]!" minlength="4" maxlength="40"></el-input>
</el-form-item>
<el-form-item label="分类：" class="mb-[10px]" prop="projectDicId" :rules="{ required: true, message: '请选择分类', trigger: ['blur', 'change'] }">
<el-select v-model="formData.projectDicId" placeholder="请选择分类" class="w-[300px]!">
<el-option v-for="item in projectTypeList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
}
},
preview_styles: true,
...props.options,
})
// 表单数据
const formData = ref({
projectDicId: undefined,
postsTags: [],
postsCover: [] as any,
postsTitle: '',
channelId: channelId || undefined,
})
const formRef = ref()
const post_loading = ref(false)
const saveContent = () => {
formRef.value.validate().then(() => {
if (!myValue.value) {
ElMessage.error('请输入帖子内容')
return
}
post_loading.value = true
create({
postsTitle: formData.value.postsTitle,
// postsCover: formData.value.postsCover[0].url,
postsTags: formData.value.postsTags.join(','),
postsContent: myValue.value,
projectDicId: formData.value.projectDicId,
channelId: formData.value.channelId,
})
<el-form-item label="标签：" class="mb-[10px]" prop="postsTags" :rules="{ required: true, message: '请输入标签', trigger: ['blur', 'change'] }">
<el-select
v-model="formData.postsTags"
:remote-method="remoteMethod"
:loading="loading"
filterable
remote
multiple
placeholder="请输入搜索标签"
class="w-[300px]!"
>
<el-option v-for="(item, index) in labelsList" :key="index" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="频道列表：" class="mb-[10px]" prop="channelId" :rules="{ required: true, message: '请选择频道', trigger: ['blur', 'change'] }">
<el-select v-model="formData.channelId" placeholder="请选择频道" class="w-[300px]!">
<el-option v-for="item in channelIdList" :key="item.channelId" :label="item.channelTitle" :value="item.channelId" />
</el-select>
</el-form-item>
<!-- <el-form-item label="上传封面：" prop="postsCover" :rules="{ required: true, message: '请上传封面', trigger: ['blur', 'change'] }">
<KlUploader v-model:file-list="formData.postsCover" :limit="1" :size="1" tips="上传图片支持jpg/gif/png格式"> </KlUploader>
</el-form-item> -->
</el-form>
<ClientOnly>
<Editor :id="tinymceId" v-model="myValue" :init="init" :disabled="disabled" :placeholder="placeholder" />
</ClientOnly>
<!-- 按钮区域 -->
<div class="mt-[20px] flex justify-end">
<el-button :loading="post_loading" class="mr-[10px]" @click="previewContent">预览</el-button>
<el-button :loading="post_loading" type="primary" @click="saveContent">发表</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import { keywords } from '~/api/upnew/index'
import { reactive, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { create, list } from '~/api/channel/index'
import { parent,parentV2 } from '~/api/upnew/index'
import { upload } from '~/api/common/index' // 自定义上传方法
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver'
import 'tinymce/themes/silver/theme'
import 'tinymce/models/dom'
import 'tinymce/icons/default'
import 'tinymce/icons/default/icons'
// 引入编辑器插件
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' //快速工具条
import 'tinymce/plugins/wordcount' // 字数统计插件
// import 'tinymce/langs/zh-Hans'
// import 'tinymce/skins/ui/oxide/skin.min.css'
// import 'tinymce/skins/ui/oxide/content.min.css'
// import 'tinymce/skins/content/default/content.css'
// import '~/assets/tinymce/langs/zh-Hans.js' //下载后的语言包
// import 'tinymce/skins/content/default/content.css'
// 获取从其他地方传过来的参数
const channelId = route.query.channelId as string
const props = defineProps({
value: {
type: String,
default: '',
},
placeholder: {
type: String,
default: '请输入帖子内容',
},
height: {
type: Number,
default: 500,
},
disabled: {
type: Boolean,
default: false,
},
plugins: {
type: [String, Array],
default: 'code image link preview table quickbars pagebreak lists advlist',
},
toolbar: {
type: [String, Array],
default:
'undo redo codesample bold italic underline strikethrough link alignleft aligncenter alignright alignjustify \
bullist numlist outdent indent removeformat forecolor backcolor |formatselect fontselect fontsizeselect | \
blocks fontfamily fontsize pagebreak lists image customvideoupload table preview | code selectall',
},
templates: {
type: Array,
default: () => [],
},
options: {
type: Object,
default: () => ({}),
},
})
//用于接收外部传递进来的富文本
const myValue = ref(props.value)
const tinymceId = ref('vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''))
const init = reactive({
selector: '#' + tinymceId.value, //富文本编辑器的id,
language_url: '/_nuxt/static/tinymce/langs/zh_CN.js', // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件
language: 'zh-Hans', //语言
skin_url: '/_nuxt/static/tinymce/skins/ui/oxide', // skin路径，具体路径看自己的项目
content_css: '/_nuxt/static/tinymce/skins/content/default/content.css',
menubar: true, //顶部菜单栏显示
statusbar: true, // 底部的状态栏
plugins: props.plugins,
toolbar: props.toolbar,
toolbar_mode: 'sliding',
font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;', //字体
paste_convert_word_fake_lists: false, // 插入word文档需要该属性
font_size_formats: '12px 14px 16px 18px 22px 24px 36px 72px', //文字大小
height: props.height, //编辑器高度
placeholder: props.placeholder,
branding: false, //是否禁用"Powered by TinyMCE"
promotion: false, //禁用升级按钮
image_dimensions: false, //去除宽高属性
paste_webkit_styles: 'all',
paste_merge_formats: true,
nonbreaking_force_tab: false,
paste_auto_cleanup_on_paste: false,
file_picker_types: 'file',
resize: true,
elementpath: true,
content_style: `img {max-width:100%;} body{background-color: #fff;}`, // 直接自定义可编辑区域的css样式
templates: props.templates,
quickbars_selection_toolbar: 'forecolor backcolor bold italic underline strikethrough link',
quickbars_image_toolbar: 'alignleft aligncenter alignright',
quickbars_insert_toolbar: false,
image_caption: true,
image_advtab: true,
convert_urls: false,
images_upload_url: import.meta.env.VITE_BASE_API,
images_upload_handler: function (blobInfo: any, progress: any) {
console.log(blobInfo, progress)
return new Promise((resolve, reject) => {
const data = new FormData()
data.append('file', blobInfo.blob())
data.append('fieldName', blobInfo.filename())
upload('/prod-api/app-api/infra/file/upload', data)
.then((res) => {
console.log(res)
if (res.code === 0) {
ElMessage.success('发表成功')
router.push('/communication/channel')
}
resolve(res.data)
})
.catch((err) => {
console.log(err)
})
.finally(() => {
post_loading.value = false
.catch(() => {
reject('Image upload failed')
})
})
}
const previewContent = () => {
// 获取编辑器实例
const editor = tinymce.get(tinymceId.value)
// 调用编辑器的预览命令
if (editor) {
editor.execCommand('mcePreview')
},
// 添加自定义按钮
setup: function (editor: any) {
if (process.client) {
// 注册一个新的视频上传按钮
editor.ui.registry.addButton('customvideoupload', {
icon: 'embed', // 使用嵌入媒体图标
tooltip: '上传视频',
onAction: function () {
// 创建文件输入元素
const input = document.createElement('input')
input.setAttribute('type', 'file')
input.setAttribute('accept', 'video/*')
// 处理文件选择事件
input.onchange = function () {
if (input.files && input.files[0]) {
const file = input.files[0]
const data = new FormData()
data.append('file', file)
data.append('fieldName', file.name)
// 可以在这里添加上传进度显示
upload('/prod-api/app-api/infra/file/upload', data)
.then((res) => {
// 插入视频到编辑器
editor.insertContent(`
<video controls width="400">
<source src="${res.data}" type="video/${file.name.split('.').pop()}">
您的浏览器不支持视频标签
</video>
`)
})
.catch((error) => {
console.error('视频上传失败:', error)
// 可以添加错误提示
})
}
}
// 触发文件选择
input.click()
},
})
}
}
//在onMounted中初始化编辑器
onMounted(() => {
if (process.client) {
getParent()
getChannelIdList()
tinymce.init({})
}
})
/** 获取频道列表 */
const channelIdList = ref<any>([])
const getChannelIdList = () => {
list().then((res) => {
channelIdList.value = res.data
},
preview_styles: true,
...props.options,
})
// 表单数据
const formData = ref({
projectDicId: undefined,
postsTags: [],
postsCover: [] as any,
postsTitle: '',
channelId: channelId || undefined,
})
const formRef = ref()
const post_loading = ref(false)
const saveContent = () => {
formRef.value.validate().then(() => {
if (!myValue.value) {
ElMessage.error('请输入帖子内容')
return
}
post_loading.value = true
create({
postsTitle: formData.value.postsTitle,
// postsCover: formData.value.postsCover[0].url,
postsTags: formData.value.postsTags.join(','),
postsContent: myValue.value,
projectDicId: formData.value.projectDicId,
channelId: formData.value.channelId,
})
.then((res) => {
console.log(res)
if (res.code === 0) {
ElMessage.success('发表成功')
router.push('/communication/channel')
}
})
.catch((err) => {
console.log(err)
})
.finally(() => {
post_loading.value = false
})
})
}
const previewContent = () => {
// 获取编辑器实例
const editor = tinymce.get(tinymceId.value)
// 调用编辑器的预览命令
if (editor) {
editor.execCommand('mcePreview')
}
const projectTypeList = ref<any>([])
/** 获取分类下拉框 */
const getParent = () => {
parentV2({
}
//在onMounted中初始化编辑器
onMounted(async () => {
if (process.client) {
getParent()
getChannelIdList()
tinymce.init({})
}
})
/** 获取频道列表 */
const channelIdList = ref<any>([])
const getChannelIdList = () => {
list().then((res) => {
channelIdList.value = res.data
})
}
const projectTypeList = ref<any>([])
/** 获取分类下拉框 */
const getParent = () => {
parentV2({
type: 1,
parentId: 0,
}).then((res) => {
projectTypeList.value = res.data
})
}
const loading = ref(false)
/** 获取标签 */
const labelsList = ref<any>([])
const remoteMethod = (query: string) => {
if (query) {
loading.value = true
keywords({
type: 1,
parentId: 0,
}).then((res) => {
projectTypeList.value = res.data
keywords: query,
})
}
const loading = ref(false)
/** 获取标签 */
const labelsList = ref<any>([])
const remoteMethod = (query: string) => {
if (query) {
loading.value = true
keywords({
type: 1,
keywords: query,
.then((res) => {
labelsList.value = res.data
})
.then((res) => {
labelsList.value = res.data
})
.finally(() => {
loading.value = false
})
} else {
labelsList.value = []
}
.finally(() => {
loading.value = false
})
} else {
labelsList.value = []
}
</script>
<style scoped>
.custom-form {
border: 2px solid #eeeeee;
border-radius: 4px;
}
</script>
<style scoped>
.custom-form {
border: 2px solid #eeeeee;
border-radius: 4px;
}
.upload-container {
display: flex;
flex-direction: column;
}
.cover-uploader {
:deep(.el-upload) {
width: fit-content;
}
.upload-container {
display: flex;
flex-direction: column;
}
.cover-uploader {
:deep(.el-upload) {
width: fit-content;
}
}
.image-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #909399;
height: 100%;
}
.image-actions {
display: flex;
justify-content: center;
}
:deep(.el-form-item__label) {
font-weight: normal;
}
:deep(.el-button--primary.is-link) {
padding: 0;
height: auto;
font-size: 14px;
}
.text-gray-500 {
color: #999;
}
.text-12px {
font-size: 12px;
}
</style>
}
.image-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #909399;
height: 100%;
}
.image-actions {
display: flex;
justify-content: center;
}
:deep(.el-form-item__label) {
font-weight: normal;
}
:deep(.el-button--primary.is-link) {
padding: 0;
height: auto;
font-size: 14px;
}
.text-gray-500 {
color: #999;
}
.text-12px {
font-size: 12px;
}
</style>