富文本编辑器 Tiny 封装为 Vue 组件。

准备

  1. 官网 https://www.tiny.cloud/ 注册账号，申请 APIKEY（建议下载代码，发布到公司的 cdn）
  2. 获取 cdn (tinymce.min.js)

开发

TinyEditor.vue

  1. <template>
  2.   <div
  3.     class="editor-popup"
  4.     v-if="visible"
  5.   >
  6.     <div
  7.       class="tiny-editor"
  8.       :style="style"
  9.     >
  10.       <div
  11.         class="tips-line"
  12.         v-show="!isInitFinished"
  13.       >
  14.         <p>初始化中...</p>
  15.       </div>
  16.       <div v-show="isInitFinished">
  17.         <textarea
  18.           ref="tinyEditor"
  19.           id="tinyTextarea"
  20.           name="tinyTextarea"
  21.         >欢迎使用 <b>Tiny</b> 富文本编辑器</textarea>
  22.         <div class="editor-actions-bar">
  23.           <div
  24.             class="editor-action-btn"
  25.             @click="handleOk"
  26.           >确定</div>
  27.           <div
  28.             class="editor-action-btn"
  29.             @click="handleCancel"
  30.           >取消</div>
  31.         </div>
  32.       </div>
  33.     </div>
  34.   </div>
  35. </template>
  36. <script>
  37. import '@/lib/tinymce-zh_CN.js'
  38. export default {
  39.   name: 'TinyEditor',
  40.   props: {
  41.     visible: {
  42.       type: Boolean,
  43.       default: false
  44.     },
  45.     style: {
  46.       type: Object,
  47.       default: {
  48.         width: '800px',
  49.         height: '400px'
  50.       }
  51.     }
  52.   },
  53.   data() {
  54.     return {
  55.       // 编辑器是否初始化完成
  56.       isInitFinished: false,
  57.       // 编辑器实例
  58.       tinymce: null,
  59.       // 编辑器内容
  60.       editorContent: '',
  61.       // 默认配置项
  62.       tinyDefault: {
  63.         imageUrl: 'http://assets.dxycdn.com/gitrepo/bbs/img/bbs/logo.png'
  64.       }
  65.     }
  66.   },
  67.   methods: {
  68.     handleOk() {
  69.       const self = this
  70.       this.tinymce.then(function(res) {
  71.         self.editorContent = res[0].getContent()
  72.         console.log(self.editorContent)
  73.       })
  74.     },
  76.     handleCancel() {
  77.       this.editorContent = ''
  78.       this.tinymce.then(function(res) {
  79.         res[0].resetContent()
  80.       })
  81.       this.$emit('handleCancel')
  82.     }
  83.   },
  84.   mounted() {
  85.     this.$nextTick(() => {
  86.       this.tinymce = tinymce.init({
  87.         // 选择器配置
  88.         selector: '#tinyTextarea',
  89.         // 隐藏技术支持
  90.         branding: false,
  91.         // 隐藏元素路径
  92.         elementpath: false,
  93.         // 中文语言包
  94.         language: 'zh_CN',
  95.         // 禁止调整编辑器大小
  96.         resize: false,
  97.         /**
  98.          * 使用 content_css 自定义可编辑区域
  99.          * http://tinymce.ax-z.cn/general/customize-ui.php
  100.          */
  101.         content_css: '',
  102.         /**
  103.          * 菜单栏配置
  104.          * http://tinymce.ax-z.cn/general/basic-setup.php
  105.          */
  106.         menubar: false,
  107.         /**
  108.          * 插件配置
  109.          * 参考：https://www.tiny.cloud/docs/plugins/
  110.          */
  111.         plugins:
  112.           'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help paste emoticons autosave bdmap indent2em', // 插件按需加载 字符串方式/数组方式
  113.         /**
  114.          * 工具栏配置
  115.          * 参考：http://tinymce.ax-z.cn/general/basic-setup.php
  116.          */
  117.         toolbar:
  118.           'code undo redo restoredraft | forecolor backcolor bold italic underline strikethrough link | bullist numlist | alignleft aligncenter alignright alignjustify outdent indent | \
  119.                      styleselect fontselect fontsizeselect | table image media emoticons hr insertdatetime | preview',
  120.         height: 400,
  121.         fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
  122.         font_formats:
  123.           '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif',
  124.         importcss_append: true,
  125.         // 自定义文件选择器的回调内容
  126.         file_picker_callback: function(callback, value, meta) {
  127.           if (meta.filetype === 'file') {
  128.             callback(this.tinyDefault.imageUrl, { text: 'DXY' })
  129.           }
  130.           if (meta.filetype === 'image') {
  131.             callback(this.tinyDefault.imageUrl, { alt: 'DXY' })
  132.           }
  133.         },
  134.         // 时间日期格式
  135.         template_cdate_format: '[CDATE: %m/%d/%Y : %H:%M:%S]',
  136.         template_mdate_format: '[MDATE: %m/%d/%Y : %H:%M:%S]',
  137.         image_caption: true,
  138.         // 初始化结束后执行
  139.         init_instance_callback: editor => {
  140.           this.isInitFinished = true
  141.         }
  142.       })
  143.     })
  144.   }
  145. }
  146. </script>
  148. <style lang="scss" scoped>
  149. @import '@/styles/var.scss';
  150. .editor-popup {
  151.   position: fixed;
  152.   top: 0;
  153.   right: 0;
  154.   bottom: 0;
  155.   left: 0;
  156.   overflow: auto;
  157.   margin: 0;
  158.   background-color: rgba(0, 0, 0, 0.4);
  159.   .tiny-editor {
  160.     position: absolute;
  161.     top: 50%;
  162.     left: 50%;
  163.     transform: translate3d(-50%, -50%, 0);
  164.     background-color: #fff;
  165.     .tips-line {
  166.       display: flex;
  167.       justify-content: center;
  168.       align-items: center;
  169.       width: 100%;
  170.       height: 100%;
  171.     }
  172.   }
  173.   .editor-actions-bar {
  174.     display: flex;
  175.     justify-content: space-between;
  176.     align-items: center;
  177.     border: 1px solid #fff;
  178.     border-top: none;
  179.     width: 100%;
  180.     height: 35px;
  181.     line-height: 35px;
  182.     background-color: $--color-primary;
  183.     box-sizing: border-box;
  184.     .editor-action-btn {
  185.       position: relative;
  186.       width: 100%;
  187.       height: 100%;
  188.       text-align: center;
  189.       font-weight: 500;
  190.       color: #fff;
  191.       cursor: pointer;
  192.       &:nth-of-type(1) {
  193.         border-right: 1px solid #fff;
  194.       }
  195.       &:hover {
  196.         &::after {
  197.           position: absolute;
  198.           content: ' ';
  199.           width: 100%;
  200.           height: 100%;
  201.           top: 0;
  202.           left: 0;
  203.           background: rgba(255, 255, 255, 0.2);
  204.         }
  205.       }
  206.       &:active {
  207.         opacity: 0.8;
  208.       }
  209.     }
  210.   }
  211. }
  212. </style>

使用

  1.  <!-- 富文本编辑器 -->
  2.  <tiny-editor
  3.    :visible.sync="tinyEditor.visible"
  4.    @handleCancel="tinyEditor.visible = false"
  5.  />

参考