• (转)tinymce-vue使用教程

    一、资源下载

    1. npm install tinymce -S  //当前版本^5.1.1
    2. npm install @tinymce/tinymce-vue -S  //当前版本^3.0.1

    二、安装语言包

    • 资源下载后,在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下,(PS: 如果是使用 vue-cli 3.x 构建的 typescript 项目，就放到 public 目录下，文中所有 static 目录相关都这样处理)
      tinymce 默认是英文界面，所以还需要下载一个中文语言包
      然后将这个语言包放到 static 目录下，为了结构清晰，包了一层 tinymce 目录

     language.png

    三、初始化

    1. import tinymce from "tinymce";
    2. import Editor from "@tinymce/tinymce-vue";
    3. import 'tinymce/themes/modern/theme'
    4. //如果报错找不到  import 'tinymce/themes/modern/theme',可以替换成 import 'tinymce/themes/silver/theme'
    5. //不过一般都会报错,说找不到的....
    • tingmce-vue 是一个组件,需要在components中注册,然后再使用
    components: {Editor},

    <editor id="tinymce" v-model="value" :init="init">editor>
    • 这里的 init 是 tinymce 初始化配置项，后面会讲到一些关键的 api，完整 api 可以参考官方文档,
      中文文档
      编辑器需要一个 skin 才能正常工作，所以要设置一个 skin_url 指向之前复制出来的 skin 文件

    1. //这里是基于vue-cli 3.x配置的,如果不是cli3的情况,'/tinymce'前面要加上'/static',即'/static/tinymce/langs/zh_CN.js'
    2. init: {
    3.   selector: "#tinymce", //tinymce的id
    4.   language_url: "/tinymce/langs/zh_CN.js",
    5.   language: "zh_CN",
    6.   skin_url: "/tinymce/skins/ui/oxide", //编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
    7. }
    • 同时在 mounted 中也需要初始化一次：
    1. mounted() {
    2.     tinymce.init({});
    3. },

    四、扩展插件

    • 完成了上面的初始化之后，就已经能正常运行编辑器了，但只有一些基本功能
      tinymce 通过添加插件 plugins 的方式来添加功能
      比如要添加一个上传图片的功能，就需要用到 image 插件，添加超链接需要用到 link 插件
      • 4.1 在import里引入插件
      1. import "tinymce/plugins/image";
      2. import "tinymce/plugins/link";
      3. import "tinymce/plugins/code";
      4. import "tinymce/plugins/table";
      5. import "tinymce/plugins/lists";
      6. import "tinymce/plugins/wordcount";
      7. //下面的插件是自带的,不需要引入,引入的时候,浏览器会有个警告,说这个插件是内核自带,请自行删除
      8. // import "tinymce/plugins/contextmenu";
      9. // import "tinymce/plugins/colorpicker";
      10. // import "tinymce/plugins/textcolor";
      • 4.2 在data的init对象里引入插件
      plugins: "image link code table lists wordcount", //引入插件
      • 4.3 添加了插件之后，默认会在工具栏 toolbar 上添加对应的功能按钮，toolbar 也可以自定义
      toolbar: "fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen", //工具栏

    五、其他注意

    • 如果出现5-1图的报错

                                                                      5-1图报错.jpg


      这是因为你import里引入的插件和plugins引入的插件没有相互对应上,删除部分插件调整
    • 如果还存在报错,这是因为 init 参数地址错误
      这是因为 init 参数地址错误，请核对下 init 参数中的几个路径是否正确,如果参数无误，可以先删除 language_url 和 language 再试

    六、tinymce一些功能配置

    1. //PS: 在data的init里配置
    2. browser_spellcheck: true, // 拼写检查
    3. branding: false, // 去水印
    4. elementpath: false, //禁用编辑器底部的状态栏
    5. statusbar: false, // 隐藏编辑器底部的状态栏
    6. paste_data_images: true, // 允许粘贴图像
    7. menubar: false, // 隐藏最上方menu
    8. fontsize_formats: "14px 16px 18px 20px 24px 26px 28px 30px 32px 36px", //字体大小
    9. font_formats:"微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times", //字体
    10.  
    11. file_picker_types: 'image',
    12. images_upload_credentials: true,

    七、图片上传

    1. //在data的init里面配置
    2. /*
    3.    * 下面方法是为tinymce添加自定义插入图片按钮
    4.    * 借助iview的Upload组件,将图片先上传到存储云上，再将图片的存储地址放入编辑器内容
    5. */
    6. // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
    7. images_upload_handler: function(blobInfo, success, failure) {
    8.           let formdata = new FormData();
    9.           formdata.append("image", blobInfo.blob());
    10.           //uploadImg是上传图片的请求接口
    11.           uploadImg(formdata)
    12.             .then(res => {
    13.               console.log(res);
    14.               success("https://qnsjk.huabeisky.com/" + res.data);
    15.             })
    16.             .catch(res => {
    17.               failure("error");
    18.             });
    19. }

    八、预览效果

                                                                       预览效果.png

    九、封装

    • 子组件myTinymce
    2.  
    3. <script>
    4. import tinymce from "tinymce";
    5. import Editor from "@tinymce/tinymce-vue";
    6. import "tinymce/themes/silver/theme";
    7. import "tinymce/plugins/image";
    8. import "tinymce/plugins/link";
    9. import "tinymce/plugins/code";
    10. import "tinymce/plugins/table";
    11. import "tinymce/plugins/lists";
    12. import "tinymce/plugins/wordcount";
    13. import { uploadImg } from "@/api/common";
    14. //下面的插件是自带的,不需要引入
    15. // import "tinymce/plugins/contextmenu";
    16. // import "tinymce/plugins/colorpicker";
    17. // import "tinymce/plugins/textcolor";
    18. export default {
    19.   name: "MyTinymce",
    20.   props: {
    21.     tinymceHtml: '',
    22.     tinymceHeight: {
    23.       type: Number,
    24.       default: 500
    25.     }
    26.   },
    27.   components: {
    28.     Editor
    29.   },
    30.   data() {
    31.     return {
    32.       value: this.tinymceHtml, //父组件通过ref拿到该组件的值
    33.       init: {
    34.         selector: "#tinymce",
    35.         language_url: "/tinymce/langs/zh_CN.js",
    36.         language: "zh_CN",
    37.         skin_url: "/tinymce/skins/ui/oxide", //编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
    38.         height: this.tinymceHeight,
    39.         plugins: "image link code table lists wordcount", //引入插件
    40.         toolbar:
    41.           "fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen", //工具栏
    42.         browser_spellcheck: true, // 拼写检查
    43.         branding: false, // 去水印
    44.         elementpath: false, //禁用编辑器底部的状态栏
    45.         statusbar: false, // 隐藏编辑器底部的状态栏
    46.         paste_data_images: true, // 允许粘贴图像
    47.         menubar: false, // 隐藏最上方menu
    48.  
    49.         file_picker_types: 'image',
    50.         images_upload_credentials: true,
    51.         fontsize_formats: "14px 16px 18px 20px 24px 26px 28px 30px 32px 36px", //字体大小
    52.         font_formats:
    53.           "微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times", //字体
    54.         /**
    55.          * 下面方法是为tinymce添加自定义插入图片按钮
    56.          * 借助iview的Upload组件,将图片先上传到存储云上，再将图片的存储地址放入编辑器内容
    57.          */
    58.         // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
    59.         images_upload_handler: function(blobInfo, success, failure) {
    60.           let formdata = new FormData();
    61.           formdata.append("image", blobInfo.blob());
    62.  
    63.           uploadImg(formdata)
    64.             .then(res => {
    65.               console.log(res);
    66.               success("https://qnsjk.huabeisky.com/" + res.data);
    67.             })
    68.             .catch(res => {
    69.               failure("error");
    70.             });
    71.         }
    72.       }
    73.     };
    74.   },
    75.   watch: {
    76.     tinymceHtml(newV,oldV) {
    77.       this.value = newV
    78.     }
    79.   },
    80.   computed: {},
    81.   created() {},
    82.   mounted() {
    83.     tinymce.init({});
    84.   },
    85.   methods: {}
    86. };
    87. script>
    88. <style lang="scss" scoped>
    89. style>
    • 父组件中使用该组件
    2. <script>
    3. import myTinymce from "@/components/MyTinymce";
    4. export default {
    5.   name: "",
    6.   components: {myTinymce},
    7. }
    8. script>




    链接：https://www.jianshu.com/p/44ee417537eb

  • 相关阅读:
    JS Set方法
    【行为型模式】备忘录模式
    C# OpenCvSharp DNN Low Light image Enhancement
    如何应对 CentOS 的停更？
    掌握系统性思维
    PAT A1016 Phone Bills
    【论文阅读】自动作文评分系统：一份系统的文献综述
    centos 7.9安装和配置分析型数据库clickhouse
    D-Bus：busctl的使用
    推箱子游戏设计与实现（Java+swing+JAWT）
  • 原文地址：https://blog.csdn.net/caseywei/article/details/133810421