只写拿来就可用的文章
▂ ▃ ▄ ▅ ▆ ▇ █如果你也使用到,对你有帮助,请点赞收藏▂ ▃ ▄ ▅ ▆ ▇ █
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>