Vue中引用百度富文本打包后报 路径static路径找不到

本文分享了在Vue项目中成功引入百度富文本编辑器,并在遇到打包后路径错误的问题时,通过调整相对路径设置成功解决问题的经验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

好不容易Vue项目引用百度富文本成功了,在测试环境都没有任何问题,于是就打包提交项目吧!我天 问题出现了,报百度富文本的引用包报错,找不到路径!一脸懵,百度各种方式都试了 都不对症,,,最后想到了引用文件的地方修改了一下相对路径 就完美解决了 记录一下:
在这里插入图片描述

<think>我们正在处理的是在Vue项目中集成TinyMCE富文本编辑器并设置初始值的问题。根据引用,我们可以总结出以下步骤: 1.安装必要的依赖:tinymce和@tinymce/tinymce-vueVue组件)2.将TinyMCE的皮肤文件(skins)复制到项目的public/static/tinymce目录下(或者public目录下的其他位置,确保可以访问)3.在Vue组件中引入TinyMCE和Vue组件,并进行初始化配置4.使用v-model绑定数据,以实现初始值的设置和内容的双向绑定具体步骤: ###步骤1:安装依赖```bashnpm installtinymce@5.10.7@tinymce/tinymce-vue@3.2.8```注意:这里我们指定了版本,因为不同版本可能有差异。如果你需要其他版本,可以调整。###步骤2:复制皮肤文件将`node_modules/tinymce/skins`目录复制到项目的`public/static/tinymce`目录下。这样,在运行时,TinyMCE就能到皮肤文件。###步骤3:在Vue组件中使用在Vue组件中,我们需要引入TinyMCE的核心JS和主题,以及Vue组件。然后,在组件的`data`或`setup`中定义初始值和编辑器的初始化配置。####示例代码(使用Options API):```vue<template><div><editorv-model="content":init="initConfig"></editor></div></template> <script> importtinymcefrom 'tinymce/tinymce'import Editorfrom '@tinymce/tinymce-vue'import 'tinymce/themes/silver/theme'//引入主题//初始化TinyMCEtinymce.init({//这里可以放一些全局的初始化配置,但通常我们在每个编辑器的init中配置})export default{components:{Editor},data() {return{content:'这是初始内容', //设置初始值initConfig: {skin_url: '/static/tinymce/skins/ui/oxide', //皮肤路径,根据你放置的位置调整content_css:'/static/tinymce/skins/content/default/content.css', //内容CSSheight:500,plugins: 'advlistautolink listslink imagecharmapprint previewhr anchorpagebreak',toolbar:'undoredo| styleselect |bold italic| alignleft aligncenter alignright alignjustify| bullist numlist outdent indent| linkimage',//更多配置参考TinyMCE文档}}}} </script>``` ####示例代码(使用Composition API):```vue<template><editor v-model="content":init="initConfig"></editor></template> <scriptsetup>import {ref }from 'vue'import tinymcefrom 'tinymce/tinymce'import Editorfrom '@tinymce/tinymce-vue'import 'tinymce/themes/silver/theme'tinymce.init({})//初始化,可以传入空对象,具体配置也可以在每个编辑器的init中设置constcontent =ref('这是初始内容')//设置初始值const initConfig ={skin_url: '/static/tinymce/skins/ui/oxide',content_css: '/static/tinymce/skins/content/default/content.css',height:500,plugins: 'advlistautolink listslink imagecharmapprint previewhr anchorpagebreak',toolbar:'undoredo| styleselect |bold italic| alignleft aligncenter alignright alignjustify| bullist numlist outdent indent| linkimage'} </script>``` ###设置初始值的关键点-使用`v-model`绑定一个变量(如`content`),该变量的初始值就是编辑器的初始内容。 -当编辑器内容改变时,`content`会自动更新;同样,如果改变了`content`的值,编辑器内容也会更新。###注意事项1.**皮肤路径**:`skin_url`的路径一定要正确。如果你将skins放在`public/static/tinymce`下,那么路径就是`/static/tinymce/skins/ui/oxide`(根据你的目录结构调整)。2.**内容CSS路径**:同样,`content_css`也要指向正确的路径。3.**版本问题**:不同版本的TinyMCE可能配置有差异,请参考官方文档。 4. **按需引入**:为了减小打包体积,可以只引入需要的插件和主题。例如,如果你不需要`image`插件,就不要在plugins中写它。###动态改变内容如果你想在外部改变编辑器的内容,直接修改绑定的`content`即可。###解决编辑器重复加载的问题引用[3]中提到,可以使用`:key`来防止重复。当编辑器需要重新渲染时(比如打开一个弹窗,每次打开都需要一个新的编辑器实例),可以改变`key`的值,这样Vue会重新创建组件。 ```vue<editor:key="tinymceFlag"...></editor>``` 在需要重置的时候,改变`tinymceFlag`的值(比如每次打开弹窗时,生成一个新的随机数或者时间戳)。 ###完整示例(带重置功能)```vue<template><button @click="openEditor">打开编辑器</button><div v-if="showEditor"><editorv-model="content":init="initConfig":key="tinymceKey"></editor></div></template> <script> importEditorfrom '@tinymce/tinymce-vue'import tinymcefrom 'tinymce/tinymce'import 'tinymce/themes/silver/theme'export default{components:{ Editor},data(){return {showEditor:false,content: '',tinymceKey:0,initConfig: {... }//同上}},methods: {openEditor(){this.showEditor =truethis.content ='初始内容'//设置初始内容this.tinymceKey =Date.now() //改变key,确保每次打开都是新的编辑器实例}}} </script>``` ###引用说明-引入TinyMCE核心和主题 [^4] -使用`@tinymce/tinymce-vue`组件 [^2] -复制皮肤文件到public目录 [^5] -使用`:key`避免重复问题[^3]§§相关问题 §§1.如何在TinyMCE编辑器中上传图片到自己的服务器?2.TinyMCE编辑器如何实现多语言(国际化)支持?3.如何自定义TinyMCE编辑器的工具栏和菜单?4.在Vue中如何监听TinyMCE编辑器内容的变化(除了v-model)?</think>在 Vue 项目中集成 TinyMCE 富文本编辑器并设置初始值,可以通过以下步骤实现: ### 完整实现步骤 #### 1. 安装依赖 ```bash npm install tinymce@5.10.7 @tinymce/tinymce-vue@3.2.8 ``` #### 2. 复制皮肤文件 将 TinyMCE 的皮肤文件复制到公共目录: ```bash # 创建目录 mkdir -p public/static/tinymce # 复制皮肤文件 cp -r node_modules/tinymce/skins public/static/tinymce/ ``` #### 3. 创建编辑器组件 ```vue <template> <div> <!-- 使用 key 强制刷新避免缓存问题 --> <Editor v-model="content" :init="editorInit" :key="editorKey" /> </div> </template> <script> import tinymce from 'tinymce/tinymce' import Editor from '@tinymce/tinymce-vue' import 'tinymce/themes/silver/theme' import 'tinymce/plugins/link' import 'tinymce/plugins/image' import 'tinymce/plugins/code' export default { components: { Editor }, props: { initialContent: { type: String, default: '' } }, data() { return { content: this.initialContent, editorKey: 0, editorInit: { skin_url: '/static/tinymce/skins/ui/oxide', content_css: '/static/tinymce/skins/content/default/content.css', height: 500, plugins: 'link image code', toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | image link', images_upload_handler: this.handleImageUpload, setup: (editor) => { editor.on('init', () => { // 初始化时设置内容 editor.setContent(this.initialContent) }) } } } }, methods: { // 图片上传处理 handleImageUpload(blobInfo, success, failure) { const formData = new FormData() formData.append('file', blobInfo.blob(), blobInfo.filename()) // 替换为你的上传接口 axios.post('/api/upload', formData) .then(res => success(res.data.url)) .catch(() => failure('上传失败')) }, // 刷新编辑器(解决内容不更新问题) refreshEditor() { this.editorKey += 1 } }, watch: { // 监听初始值变化 initialContent(newVal) { this.content = newVal this.refreshEditor() } } } </script> ``` #### 4. 在父组件中使用 ```vue <template> <div> <TinyMceEditor :initial-content="htmlContent" @input="handleContentChange" /> <button @click="setNewContent">设置新内容</button> </div> </template> <script> import TinyMceEditor from '@/components/TinyMceEditor.vue' export default { components: { TinyMceEditor }, data() { return { htmlContent: '<h1>初始标题</h1><p>这是<strong>初始内容</strong></p>' } }, methods: { handleContentChange(content) { console.log('内容变更:', content) this.htmlContent = content }, setNewContent() { // 动态更新内容 this.htmlContent = `<div style="color:blue;">新设置的内容 - ${new Date().toLocaleString()}</div>` } } } </script> ``` ### 关键配置说明 1. **初始值设置**: - 通过 `v-model` 绑定内容变量 - 在 `setup` 函数中使用 `editor.setContent()` 确保初始化加载 - 使用 `:initial-content` prop 传递初始值 2. **强制刷新**: - 添加 `:key="editorKey"` 属性 - 调用 `refreshEditor()` 方法更新 key 值 - 解决动态设置内容不更新的问题[^3] 3. **路径配置**: ```js skin_url: '/static/tinymce/skins/ui/oxide', content_css: '/static/tinymce/skins/content/default/content.css' ``` 确保路径与复制的皮肤文件位置一致[^5] 4. **内容更新监听**: ```js watch: { initialContent(newVal) { this.content = newVal this.refreshEditor() } } ``` ### 常见问题解决 1. **内容不更新**: - 使用 `:key` 强制刷新组件 - 在 watcher 中调用刷新方法 - 确保不要直接修改 prop 内容 2. **皮肤加载失败**: - 检查 `skin_url` 路径是否正确 - 确认 public 目录下有 skins 文件 - 使用开发者工具查看网络请求 3. **插件加载问题**: - 确保已导入所需插件:`import 'tinymce/plugins/image'` - 在 init 配置中声明插件:`plugins: 'link image code'` 4. **图片上传**: - 实现 `images_upload_handler` 方法 - 处理服务器响应并返回图片 URL[^1] ### 最佳实践建议 1. **封装独立组件**: - 创建可复用的编辑器组件 - 通过 props 控制初始内容和配置 2. **动态加载**: ```js const Editor = () => import('@tinymce/tinymce-vue') ``` 减少首屏加载体积 3. **多语言支持**: ```js import 'tinymce-i18n/langs/zh_CN' // ... language: 'zh_CN', language_url: '/static/tinymce/langs/zh_CN.js' ``` 4. **内容清理**: ```js init: { // ... valid_elements: 'p[style],strong,em,a[href],ul,ol,li', valid_styles: { '*': 'color,font-size' } } ``` [^1]: TinyMCE 官方文档推荐使用自定义上传处理程序 [^2]: Vue 组件通过 v-model 实现双向绑定 [^3]: 使用 key 属性强制刷新解决内容缓存问题 [^5]: 正确配置皮肤路径确保编辑器样式正常加载
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值