Vue2使用富文本编译器

chao超的搬运文章

发布于 2023-10-15 19:25:26

2100

发布于 2023-10-15 19:25:26

文章被收录于专栏：java,hbasejava,hbase

可以先看看我之前的一篇文章，属于基础吧在页面使用富文本编译器_超*的博客-CSDN博客

至于为什么还是用TinyMCE，不用ElementUI自带的富文本编译器，因为技穷/(ㄒoㄒ)/~~

同样参考一篇文章(进行修改、完善)：

VUE2下版本的项目加入富文本框实现_vue2富文本从js文件夹加载_我算哪枝小绿植的博客-CSDN博客

1、下载资源

npm install tinymce -S
npm install @tinymce/tinymce-vue@3.0.1

2、开始

这里说一下，按照原博主的步骤是将node_module文件下的tinymce文件，拷贝一份到静态资源目录中。不要去拷贝到资源目录中，vue默认就会到node_modules中去找相应文件！

下载中文语言包，看我上面那篇基础文章。

创建一个组件，在组件中引入tinymce组件并初始化：

<template>
  <tinymce :init="init" v-model="content"></tinymce>
</template>

<script>
//引入tinymce组件
import Editor from "@tinymce/tinymce-vue";
export default {
  name: 'tinymceTest',
  data(){
    return {
      init: {
        language_url: "./zh_CN.js", //中文语言包路径
        language: "zh_CN",        //声明富文本的语言类型
        height: 430,
        menubar: true,//是否显示上面菜单
        plugins: "link lists image code table colorpicker textcolor wordcount contextmenu",
        toolbar: "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | link unlink image code | removeformat",     //放置头部的一些配置
        branding: false,   //控制是否内联
        images_upload_handler: (blobInfo, success, failure) => {
          success('data:image/jpeg;base64,' + blobInfo.base64())  //该处理器函数使用base64编码将图片转换为data:image/jpeg格式的字符串，并将其作为成功的结果传递给编辑器
        }
      },
      content:''
    }
  },
  components:{"tinymce":Editor}
}
</script>
<style scoped>
</style>