在vue3.0项目中使用tinymce富文本编辑器

目录

  • 一、安装
  • 二、完整代码
  • 三、事项说明
  • 四、参考文档

  之前看了好几篇关于 vue项目中使用 tinymce的文章, import引入大量 tinymce插件, /node_modules/tinymce下的部分文件搬运到 public文件夹下(可能是以前只能用这种方法来实现吧),对于我来说,或者之前没用过 tinymce,觉得这样操作起来就会麻烦,一不小心就可能会出错,后然直接看 官方文档(英文),发现其实不需要什么其他的操作,简单粗暴直接搞定

一、安装

使用npm安装tinymce-vue

npm install --save "@tinymce/tinymce-vue@^4"

在vue3.0项目中使用tinymce富文本编辑器_第1张图片
会安装@tinymcetinymce这两个包,不需要再单独安装tinymce

注意:
tinymce-vue包的版本 4支持 Vue3.0版本,但不支持vue2.0版本。
对于 Vue2.0项目,就要安装tinymce-vue版本 3 (npm install --save “@tinymce/tinymce-vue@^3”)

二、完整代码

  直接来写完后的代码,代码上都有注释,需要的直接复制拿走,那里要改动的可以看文档加以修改·

 <template>
  <p class="tipx">
    最开始引入tinymce时是这个页面写的,/src/components/Tinymce.vue是基于这里的内容封装分出去的
  </p>
  <div class="tinymce-boxz">
    <Editor v-model="content" :api-key="apiKey" :init="init" />
  </div>
</template>

<script>
import Editor from "@tinymce/tinymce-vue";
import { reactive, ref, toRefs } from "@vue/reactivity";

export default {
  name: "About",
  components: {
    Editor,
  },
  setup() {
    const content = ref("默认文字 hello word");
    const tiny = reactive({
      apiKey: "qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc", //https://github.com/tinymce/tinymce-vue/blob/main/src/demo/views/Iframe.vue
      init: {
        language: "zh_CN", //语言类型
        placeholder: "在这里输入文字", //textarea中的提示信息
        min_width: 320,
        min_height: 220,
        height: 500, //注:引入autoresize插件时,此属性失效
        resize: "both", //编辑器宽高是否可变,false-否,true-高可变,'both'-宽高均可,注意引号
        branding: false, //tiny技术支持信息是否显示
        // statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
        // elementpath: false, //元素路径是否显示

        font_formats:
          "微软雅黑=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;", //字体样式
        plugins:
          "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave emoticons", //插件配置 axupimgs indent2em
        toolbar: [
          "fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | bullist numlist | blockquote subscript superscript removeformat ",
          "styleselect formatselect fontselect fontsizeselect |  table image axupimgs media emoticons charmap hr pagebreak insertdatetime  selectall visualblocks searchreplace | code print preview | indent2em lineheight formatpainter",
        ], //工具栏配置,设为false则隐藏
        // menubar: "file edit my1", //菜单栏配置,设为false则隐藏,不配置则默认显示全部菜单,也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”

        // images_upload_url: '/apib/api-upload/uploadimg',  //后端处理程序的url,建议直接自定义上传函数image_upload_handler,这个就可以不用了
        // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
        paste_data_images: true, //图片是否可粘贴
        //此处为图片上传处理函数
        images_upload_handler: (blobInfo, success, failure) => {
          // 这里用base64的图片形式上传图片,
          let reader = new FileReader(); //本地预览
          reader.readAsDataURL(blobInfo.blob());
          reader.onloadend = function () {
            const imgbase64 = reader.result;
            success(imgbase64);
          };
        },

        file_picker_types: "file image media", //file image media分别对应三个类型文件的上传:link插件,image和axupimgs插件,media插件。想屏蔽某个插件的上传就去掉对应的参数
        // 文件上传处理函数
        file_picker_callback: function (callback, value, meta) {
          // 使用案例http://tinymce.ax-z.cn/general/upload-images.php
          // meta.filetype  //根据这个判断点击的是什么file image media

          let filetype; //限制文件的上传类型,需要什么就添加什么的后缀
          if (meta.filetype == "image") {
            filetype = ".jpg, .jpeg, .png, .gif, .ico, .svg";
          } else if (meta.filetype == "media") {
            filetype = ".mp3, .mp4, .avi, .mov";
          } else {
            filetype =
              ".pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4, .jpg, .jpeg, .png, .gif, .ico, .svg";
          }
          let inputElem = document.createElement("input"); //创建文件选择
          inputElem.setAttribute("type", "file");
          inputElem.setAttribute("accept", filetype);
          inputElem.click();
          inputElem.onchange = () => {
            let file = inputElem.files[0]; //获取文件信息

            // 所有都转成base64文件流,来自官方文档https://www.tiny.cloud/docs/configure/file-image-upload/#file_picker_callback
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
              // Note: Now we need to register the blob in TinyMCEs image blob
              // registry. In the next release this part hopefully won't be
              // necessary, as we are looking to handle it internally.
              let id = "blobid" + new Date().getTime();
              let blobCache = tinymce.activeEditor.editorUpload.blobCache;
              let base64 = reader.result.split(",")[1];
              let blobInfo = blobCache.create(id, file, base64);
              blobCache.add(blobInfo);

              // call the callback and populate the Title field with the file name
              callback(blobInfo.blobUri(), { title: file.name });
            };
          };
        },
      },
    });
    return {
      content,
      ...toRefs(tiny),
    };
  },
};
</script>
<style scoped>
.tinymce-boxz > textarea {
  display: none;
}
</style>
<style>
/* 隐藏apikey没有绑定当前域名的提示 */
.tox-notifications-container .tox-notification--warning {
  display: none !important;
}

.tox.tox-tinymce {
  max-width: 100%;
}
</style>

三、事项说明

在vue3.0项目中使用tinymce富文本编辑器_第2张图片
  这里的apiKey是在github上面看到的,学习在vue项目中安装tinymce富文本编辑器,拿过来就直接用了,建议还是去官网(https://www.tiny.cloud/)免费申请一个,说不定哪天这个apiKey就不能用了
                            
在vue3.0项目中使用tinymce富文本编辑器_第3张图片
  图片、视频等文件的上传后,经过后端处理一般都会整理放到对应的文件夹里面.
  因为没有后端接口(后台),图片、视频上传的功能就实现不了,所以这里将上传的文件都转成base64文本,来完成上传功能以达到一个展示效果
                            
在vue3.0项目中使用tinymce富文本编辑器_第4张图片
这两个一起配置,会出现上传按钮(下图),没有配置就没有
在vue3.0项目中使用tinymce富文本编辑器_第5张图片
                            
在vue3.0项目中使用tinymce富文本编辑器_第6张图片
代码已上传至github
仓库地址:https://github.com/cooj/tinymce-vue3
Demo:https://cooj.github.io/tinymce-vue3/

四、参考文档

tinymce官网及文档:https://www.tiny.cloud/
tinymce中文文档:http://tinymce.ax-z.cn/
tinymce-vue在github上的项目:https://github.com/tinymce/tinymce-vue
在vue3.0+中使用tinymce及实现多图上传,文件上传等功能:https://www.cnblogs.com/huihuihero/p/13877589.html

你可能感兴趣的:(vue,vue.js,js,前端)