环境

vue/cli 4.1
tinymce-vue 3.0.1
tinymce 5.1.5

百度地图插件包 bdmap

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

1、需要新建index.js用于在vue项目中引入引入 页面里写入下面代码

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

2、需要给bd.html map.html下放入api key

<script src="//api.map.baidu.com/api?key=此处放入申请的百度地图api key&v=1.1&services=true"></script>
<script charset="utf-8" src="http://api.map.baidu.com/api?v=3.0&ak=此处放入申请的百度地图api key"></script>

3、修改plugin.js和plugin.min.js 将下面代码替换路径(解决map页面404问题)

1. 挂载到前端的处理方法

var iframe1 = "../tinymce/html/map.html";
html='<iframe src="../tinymce/html/bd.html?center='+tinymceLng+'%2C'+tinymceLat+'&zoom=14&width='+(bdmap_width(editor)-2)+'&height='+(bdmap_height(editor)-2)+'" frameborder="0" style="width:'+bdmap_width(editor)+'%;height:'+bdmap_height(editor)+'px;"  frameborder="0">';

2. 挂载到后端的处理方法（个人认为很麻烦）

var iframe1 = '挂在后端文件的地址/map.html';
html='<iframe src="挂在后端文件的地址/bd.html?center='+tinymceLng+'%2C'+tinymceLat+'&zoom=14&width='+(bdmap_width(editor)-2)+'&height='+(bdmap_height(editor)-2)+'" frameborder="0" style="width:'+bdmap_width(editor)+'px;height:'+bdmap_height(editor)+'px;"  frameborder="0">';

3. 后端文件存放地址 将bd.html map.html挂在后端

代码块 文件存放位置

在tinymce/plugins 下面新建一个bdmap文件夹 将plugin.js plugin.min.js 和第一步新建的 index.js放入bdmap文件夹

封装组件页面

<template>
  <div>
    <tinymce-editor :init="init" v-model="content"></tinymce-editor>
  </div>
</template>
 
 <script>
import Editor from '@tinymce/tinymce-vue'
import '../../public/tinymce/plugins/bdmap'
export default {
  name: 'Editor',
  components: {
    'tinymce-editor': Editor,
  },
  props: {
    // 容器高度
    height: {
      type: Number,
      default: 400,
    },
    // 插件配置
    plugins: {
      type: Array,
      default: () => [
        'code bdmap',
        'link',
        'lists',
        'image',
        'code',
        'table',
        'wordcount',
      ],
    },
    // 工具栏
    toolbar: {
      type: Array,
      default: () => [
        'code bdmap',
        'italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | link unlink image code | removeformat',
      ],
    },
  },
  data() {
    return {
      content: '',
      init: {
        // 中文语言包
        language_url:
          'https://cdn.jsdelivr.net/gh/wt-sml/wutong_cdn/js/tinymce-lang-zh@5.2.2.js',
        language: 'zh_CN',
        height: this.height,
        plugins: this.plugins,
        toolbar: this.toolbar,
        // 隐藏右下角技术支持
        branding: false,
        // 图片上传成功转为base64文件
        images_upload_handler: (blobInfo, success, failure) => {
          success('data:image/jpeg;base64,' + blobInfo.base64())
        },
      },
    }
  },
}
</script>

补充（百度地图默认未标记定位问题解决）修改map.html文件

map = new BMap.Map('map_canvas');
    var point = new BMap.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 19);
    map.addControl(new BMap.NavigationControl());
    map.enableScrollWheelZoom();
    var myCity = new BMap.LocalCity();
    myCity.get(function(result) {
        map.setCenter(result.name);
        lng = result.center.lng;
        lat = result.center.lat;
        var marker = new BMap.Marker(new BMap.Point(lng, lat));
        map.clearOverlays();
        map.addOverlay(marker);
        parent.tinymceLng = lng;
        parent.tinymceLat = lat;
    });