chengxiangbai
chengxiangbai

vue 4.x 集成 TinyMCE 使用bdmap插件解决页面找不到问题

vue 4.x 集成 TinyMCE 使用bdmap插件解决页面找不到问题

    • 环境
    • 1. 需要新建index.js文件用于在vue项目中引入
    • 2. 需要百度地图api key
    • 3. 需要给map.html下放入api key
    • 4. 修改plugin.js和plugin.min.js(解决map页面404问题)
    • 5. 拷贝bd.html和map.html到后端项目静态资源目录下，此处使用的是thymeleaf模板引擎，静态资源目录地址修改为templates,所以放在templates下
    • 6. 后端使用SpringBoot Security 出现iframe无法引用显示问题
    • 7.拷贝bdmap文件夹到vue项目src目录下
    • 8.引入测试
    • 9.解决方案二（不从后端拿html)
      • 1. 在public/tinymce文件夹下新建html文件夹
      • 2. 在移入bd.html和map.html
      • 3. 修改plugin.js和plugin.min.js
      • 补充（百度地图默认未标记定位问题解决）

环境

vue/cli 4.1

tinymce-vue 3.0.1

tinymce 5.1.5

百度地图插件下载地址 bdmap.zip

压缩包文件 plugin.js、plugin.min.js、bd.html、map.html

1. 需要新建index.js文件用于在vue项目中引入

index.js

/* eslint-disable */
require('./plugin.js');

2. 需要百度地图api key

申请地址

示例图

vue 4.x 集成 TinyMCE 使用bdmap插件解决页面找不到问题_第1张图片

3. 需要给map.html下放入api key

示例

示例图片

vue 4.x 集成 TinyMCE 使用bdmap插件解决页面找不到问题_第2张图片

4. 修改plugin.js和plugin.min.js(解决map页面404问题)

404问题

vue 4.x 集成 TinyMCE 使用bdmap插件解决页面找不到问题_第3张图片

此处地址是后端静态资源目录下的html地址

var iframe1 = ‘http://localhost:8082/map.html’;

此处地址是后端静态资源目录下的html地址

html=’