Vue3(setup) 中集成tinymce富文本编辑器，复制代码直接可用

只写拿来就可用的文章

▂ ▃ ▄ ▅ ▆ ▇ █如果你也使用到，对你有帮助，请点赞收藏▂ ▃ ▄ ▅ ▆ ▇ █

1.首先下载文件 https://pan.baidu.com/share/init?surl=FuMhR0sZ0bP_5Ys1G1prDw&pwd=1111

帮下载下来的文件解压拷贝到你的项目public文件下

2.安装依赖 npm i @tinymce/tinymce-vue

安装按成后检查一下安装依赖版本 "@tinymce/tinymce-vue": "^5.1.1",

复制代码

 "dependencies": {
    "@tinymce/tinymce-vue": "^5.1.1",
    "element-plus": "^2.4.2",
    "pinia": "^2.1.7",
    "vue": "^3.3.4",
    "vue-cropper": "^1.0.9",
    "vue-router": "^4.2.5"
  },

如果项目跑不起来，直接修改依赖对应的版本在npm install

3.在components文件夹创建组件tinymce.vue

复制代码

tinymce.vue

<template>
    <div>
      <Editor v-model="content" :init="myTinyInit"></Editor>
    </div>
  </template>
  
  <script setup name="TinymceEditor">
  import {computed, defineEmits, defineProps, onMounted, reactive, ref, watch} from 'vue'
  import tinymce from 'tinymce/tinymce'
  import Editor from '@tinymce/tinymce-vue'
  import 'tinymce/icons/default/icons'
  import 'tinymce/themes/silver'
  import 'tinymce/models/dom/model'
  //按需引入插件
  import 'tinymce/plugins/image'
  import 'tinymce/plugins/table'
  import 'tinymce/plugins/lists'
  import 'tinymce/plugins/link'
  import 'tinymce/plugins/help'
  import 'tinymce/plugins/wordcount'
  import 'tinymce/plugins/code'
  import 'tinymce/plugins/preview'
  import 'tinymce/plugins/visualblocks'
  import 'tinymce/plugins/visualchars'
  import 'tinymce/plugins/fullscreen'
  
  const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
    plugins: {
      type: [String, Array],
      default: 'lists link image table help wordcount code preview fullscreen fontsize',
    },
    toolbar: {
      type: [String, Array],
      default:
          'undo redo formatselect fontsize bold italic forecolor backcolor lineheight alignleft aligncenter alignright alignjustify bullist numlist subscript superscript outdent indent table image code preview fullscreen',
    },
  })
  const emit = defineEmits(['input'])
  
  const myTinyInit = reactive({
    width: '100%',
    height: 500, // 默认高度
    language_url: '/tinymce/langs/zh_CN.js', // 配置汉化
    language: 'zh_CN', // 语言标识
    branding: false, // 不显示右下角logo
    auto_update: false, // 不进行自动更新
    resize: true, // 可以调整大小
    menubar: 'file edit insert view format table', // 菜单栏
    skin_url: '/tinymce/skins/ui/oxide', // 手动引入CSS
    content_css: '/tinymce/skins/content/default/content.css', // 手动引入CSS
    toolbar_mode: 'wrap',
    plugins: props.plugins, // 插件
    toolbar: props.toolbar, // 功能按钮
    //图片上传方法（注意！！：要使用 promise 对象中的 resolve 返回图片路径，否则会报错）
    images_upload_handler: (blobInfo) =>
        new Promise((resolve, reject) => {
       
                // 请求真实的上传图片接口获取在线地址并通过resolve返回
                //这里的上传需要根据自己的开发场景来 看后端需要一些什么参数 
                 //let file =blobInfo.blob();
                //    const params = {
                //      file: file,
                //      fileName:file.name,
                //      type: file.type,
                //     };

                //     upload(params)
                //     .then(function (res) {
                //         if (res && res.code === 200) {
                //             resolve(res.data.url)
                //         }
                //     })
                //     .catch(function (err) {
                //         console.log(err)
                //         alert('上传失败')
                //     })

                // 为了方便测试，返回一张固定的在线图片  真实项目中就是后端返回的图片地址
                resolve('https://img2.baidu.com/it/u=3354585195,1512541150&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1700845200&t=636a3f6d0f2d46b6753a203f48801a98')


              //注意下面代码不需要  z知识为了让你参照文件上传怎么写
              /**
                 * axiso 封装一般这么写 都是采用 FormData的形式  注意请求头 headers    'Content-Type': 'multipart/form-data'
                 * 
                 * export const uploads = params => {
                    const data = new FormData()
                   data.append('file', params.file, params.fileName)
                   return request({
                    headers: {
                    'Content-Type': 'multipart/form-data'
                    },
                    url: "你的地址",
                    method: 'post',
                    data,
                })
                }
                */

    
        }),
  })
  
  const initContent = computed(() => {
    return props.modelValue
  })
  
  onMounted(() => {
    tinymce.init({})
  })
  
  const content = ref()
  watch(
      initContent,
      (newVal) => {
        content.value = newVal
      },
      {deep: true, immediate: true}
  )
  
  watch(
      content,
      (newVal) => {
        emit('input', newVal)
      },
      {deep: true}
  )
  </script>
  
  <style scoped></style>

4.在页面中直接使用例如index.vue

复制代码

index.vue

<template>
  <div class='content'>
    <Tinymce v-model="content" @input="inputContent"/>
    <hr>
    <div v-html="content"></div>
  </div>
</template>

<script setup>
import Tinymce from '../components/tinymce.vue'
import { ref ,watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
const router = useRouter();
let content = ref('');
const inputContent = (val) => {
  content.value = val;
}

</script>