TinyMCE富文本编辑器

可以叫我小崔

已于 2023-10-13 08:48:05 修改

阅读量464

点赞数

文章标签： vue

于 2023-10-12 21:43:28 首次发布

本文链接：https://blog.csdn.net/Cuichenyang158/article/details/133798909

版权

文章目录

什么是富文本编辑器
vue项目中使用TinyMCE富文本编辑器
几个使用中的重难点
- 1，如何进行上传图片的操作
- 2，如何自定义上传后的图片大小

TinyMCE中文文档

什么是富文本编辑器

在了解TinyMCE富文本编辑器之前，我们先来了解一下什么是富文本编辑器吧。

富文本编辑器是一种用于创建和编辑富文本内容的工具或应用程序。富文本内容是指包含文本、图像、链接、样式和其他格式化元素的内容，允许用户以更具交互性和美观性的方式编辑文档或文本。
人话就是，富文本编辑器允许用户编写文章时，给文字以各种样式，也能进行各种格式化操作和图片链接的插入。可以让一篇文章更加的美观。

vue项目中使用TinyMCE富文本编辑器

1，安装并引入

下载

npm install tinymce @tinymce/tinymce-vue -S

引入
把node_modules/tinymec下的skins文件夹复制到public文件夹下
最后下载中文语言包，把里面的zh_CN.js也放进
中文语言包下载地址
请添加图片描述

2，封装富文本组件

<template>
    <editor v-html="modelValue" v-model="content" tag-name="div" :init="init" placeholder="请输入正文..." />
</template>

<script >
import { upload } from "@/api/ArticleApis.js";
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
//根据需要引入
import "tinymce/themes/silver/theme"; // 引用主题文件
import "tinymce/icons/default"; // 引用图标文件
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table"; //插入表格
import "tinymce/plugins/autoresize";
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/code"; //查看源码
import "tinymce/plugins/codesample"; //插入代码1
import "tinymce/plugins/directionality"; //
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/image"; //图片
import "tinymce/plugins/imagetools"; //图片工具
import "tinymce/plugins/importcss"; //图片工具
import "tinymce/plugins/media"; //媒体插入
import "tinymce/plugins/preview"; //预览
import "tinymce/plugins/quickbars"; //快捷菜单
import "tinymce/plugins/searchreplace"; //查询替换
import "tinymce/plugins/tabfocus"; //
import "tinymce/plugins/textpattern"; //
import "tinymce/plugins/emoticons"; //
// import "tinymce/plugins/numlist";
import { onMounted, ref, watch } from "vue";

export default {
    props: ["modelValue"],
    components: {
        editor: Editor,
    },
    emits: { "update:modelValue": null },
    // props: {
    //     modelValue: String,
    // },
    setup(props, context) {
        const init = {
            language_url: "/tinymce/langs/zh_CN.js", // 中文语言包路径
            language: "zh_CN",
            skin_url: "/tinymce/skins/ui/oxide", // skin路径
            content_css: "/tinymce/skins/ui/oxide/content.css", //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
            menubar: false, // 隐藏菜单栏
            autoresize_bottom_margin: 50,
            // max_height: 500,
            // min_height: 350,
            skin: 'oxide-dark',
            //   height: 320,
            toolbar_mode: "none",
            plugins:
                "textpattern  tabfocus  searchreplace  quickbars preview   media  importcss imagetools image  fullscreen emoticons  directionality codesample code charmap link code table  autoresize link", // 插件需要import进来
            toolbar:
                "formats  fontsizeselect fontselect media image  aligncenter alignleft alignright alignjustify underline quicklink h2 h3 blockquote numlist bullist table forecolor backcolor bold italic  strikethrough  charmap link codesample code ",//工具栏展示的
            content_style: "p {margin: 5px 0; font-size: 14px} body { color: #fff; } iframe { border: 1px solid #fff; }",
            fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
            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;",
            branding: false,
            elementpath: false,
            resize: false, // 禁止改变大小
            statusbar: false, // 隐藏底部状态栏
            // paste_data_images: true, // 允许粘贴图像
            content_style: '#515767', // 设置默认文字颜色
            file_picker_types: "file image media",

            //文件上传
            file_picker_callback: function (callback, value, meta) {
                //文件分类
                var filetype =
                    ".pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4";
                //为不同插件指定文件类型
                switch (meta.filetype) {
                    case "image":
                        filetype = ".jpg, .jpeg, .png, .gif";
                        break;
                    case "media":
                        filetype = ".mp3, .mp4";
                        break;
                    case "file":
                    default:
                }
                //模拟出一个input用于添加本地文件
                var input = document.createElement("input");
                input.setAttribute("type", "file");
                input.setAttribute("accept", filetype);
                input.click();
                input.onchange = function (v) {
                    console.log('v', v)
                    var file = v.target.files[0];
                    var formData = new FormData();
                    formData.append("image", file, file.name);
                    upload(formData).then((res) => {
                        callback(res.data.data, { title: file.name });
                        console.log(res.data.data);
                    });
                };
            },

            //   图片上传
            images_upload_handler: async (blobInfo, success) => {
                //改写,通过自己的upload接口，返回的图片时正常的url格式
                const blob = blobInfo.blob();
                const filename = blobInfo.filename();
                var form = new FormData();

                form.append("image", blob, filename);
                console.log('form', form);
                upload(form).then((res) => {
                    success(res.data.data);
                    console.log(res.data.data);
                });
            },
            codesample_languages: [
                { text: 'HTML/XML', value: 'markup' },
                { text: 'JavaScript', value: 'javascript' },
                { text: 'CSS', value: 'css' },
                { text: 'PHP', value: 'php' },
                { text: 'Ruby', value: 'ruby' },
                { text: 'Python', value: 'python' },
                { text: 'Java', value: 'java' },
                { text: 'C', value: 'c' },
                { text: 'C#', value: 'csharp' },
                { text: 'C++', value: 'cpp' }
            ],
            codesample_content_css: '/static/prism.css',
        };

        const content = ref('');

        onMounted(() => {
            // console.log('props.modelValue', props.modelValue);
            // content.value = props.modelValue;
        });
        watch(
            () => content.value,
            () => {
                console.log('变化了');
                imgsize(content.value);
                revert_data(content.value);
            }
        );
        watch(
            () => props.modelValue,
            () => {
                content.value = props.modelValue;
            }
        );

        // 匹配所有img图片，把所有宽度大于750px的图片等比缩小到750px
        const imgsize = function (img) {
            // 使用正则表达式匹配<img>标签
            const regex = /<img[^>]*\b(?:width|height)\s*=\s*["']?(\d{4,}|[1-9][0-4]\d{2,})["']?\s*[^>]*>/g;
            const matchedImages = img.match(regex);
            console.log('matchedImages', matchedImages);
            if (matchedImages) {
                for (const imgTag of matchedImages) {
                    // 匹配width和height属性的值
                    const widthMatch = imgTag.match(/\bwidth\s*=\s*["']?(\d+)/);
                    const heightMatch = imgTag.match(/\bheight\s*=\s*["']?(\d+)/);

                    if (widthMatch && heightMatch) {
                        const width = parseInt(widthMatch[1]);
                        const height = parseInt(heightMatch[1]);

                        if (width > 850) {
                            // 计算等比缩小后的新高度，保持宽度等于750px
                            const aspectRatio = width / height;
                            const newWidth = 850;
                            const newHeight = Math.round(850 / aspectRatio);

                            // 修改width和height属性的值，确保宽度为750px
                            const updatedImgTag = imgTag.replace(`width="${width}"`, `width="${newWidth}"`).replace(`height="${height}"`, `height="${newHeight}"`);

                            // 替换原始的<img>标签
                            content.value = content.value.replace(imgTag, updatedImgTag);
                        }
                    }
                }
            }
        }

        const revert_data = (content) => {
            //实现数据的双向绑定
            context.emit("update:modelValue", content);
        };

        tinymce.init; // 初始化
        return {
            init,
            revert_data,
            content,
        };
    },
};
</script>

2，使用富文本组件

<div class="form_wrapper">
		<form class="form_main" method="post">
				<div class="tit">
				//如果富文本编辑器有标题栏需要多写一个input框，因为富文本编辑器只有内容框
					<input type="text" placeholder="请输入标题……" v-model="form.title" @input="titL"
						@keydown.enter="handleEnterKey" />
				</div>
				
				//引入并使用富文本组件
				<TEditor ref="editor" :modelValue=richTextContent v-model="state.content" />
		</form>
</div>

<script setup>
let state = reactive({
	content: '', //获取TEditor的内容
});

watch(
	() => state.content,

	() => {
		//监控TEditor内容的变化

		console.log(state.content);

		form.content = state.content;
	}
);
</script>

几个使用中的重难点

1，如何进行上传图片的操作

详细请看http://tinymce.ax-z.cn/general/upload-images.php
TinyMCE为我们提供了 images_upload_handler配置项

images_upload_handler是一个用于处理上传图片的回调函数。它接收三个参数：

blobInfo：表示要上传的图片的信息，包括文件名、大小等。
succFun：表示上传成功时的回调函数。
failFun：表示上传失败时的回调函数。

例如

            //   图片上传
            images_upload_handler: async (blobInfo, success) => {
                //改写,通过自己的upload接口，返回的图片时正常的url格式
                const blob = blobInfo.blob();
                const filename = blobInfo.filename();
                var form = new FormData();

                form.append("image", blob, filename);
                console.log('form', form);
                upload(form).then((res) => {
                    success(res.data.data);
                    console.log(res.data.data);
                });
            },

blobInfo表示要上传的图片的信息，包括图片的二进制数据和文件名。
blobInfo.blob()用于获取图片的二进制数据。
blobInfo.filename()用于获取图片的文件名。
然后创建一个FormData对象，将图片的二进制数据和文件名添加到表单中。再调传入上传图片的api接口，调用success函数并传递上传后的图片URL作为参数。这将通知TinyMCE编辑器上传成功，并将图片URL插入到编辑器中。

2，如何自定义上传后的图片大小

TinyMCE上传完图片后，图片的大小默认为原图片的大小
例如
在这里插入图片描述
打开控制台可以看到图片的实际宽高

可以看到图片已经超过了富文本框的宽度，那么怎么让上传后的图片等比例缩小为符合富文本框宽度的图片呢？

看到控制台我们知道图片之所以那么大，是因为富文本编辑器默认把图片真实大小也就是1920px设置成了这个img标签的宽度。
所以我们只需要改变这个width和height就行了

实现图片等比例缩小的方法，传入一个富文本，它会匹配这个富文本里的img标签，并查看这个img标签的宽度是否超过了850px，如果超过了就会缩小为850px

        // 匹配所有img图片，把所有宽度大于850px的图片等比缩小到850px
        const imgsize = function (img) {
            // 使用正则表达式匹配<img>标签
            const regex = /<img[^>]*\b(?:width|height)\s*=\s*["']?(\d{4,}|[1-9][0-4]\d{2,})["']?\s*[^>]*>/g;
            const matchedImages = img.match(regex);
            console.log('matchedImages', matchedImages);
            if (matchedImages) {
                for (const imgTag of matchedImages) {
                    // 匹配width和height属性的值
                    const widthMatch = imgTag.match(/\bwidth\s*=\s*["']?(\d+)/);
                    const heightMatch = imgTag.match(/\bheight\s*=\s*["']?(\d+)/);

                    if (widthMatch && heightMatch) {
                        const width = parseInt(widthMatch[1]);
                        const height = parseInt(heightMatch[1]);

                        if (width > 850) {
                            // 计算等比缩小后的新高度，保持宽度等于850px
                            const aspectRatio = width / height;
                            const newWidth = 850;
                            const newHeight = Math.round(850 / aspectRatio);

                            // 修改width和height属性的值，确保宽度为850px
                            const updatedImgTag = imgTag.replace(`width="${width}"`, `width="${newWidth}"`).replace(`height="${height}"`, `height="${newHeight}"`);

                            // 替换原始的<img>标签
                            content.value = content.value.replace(imgTag, updatedImgTag);
                        }
                    }
                }
            }
        }

我们监听这个富文本是否改动，改动就调用imgsize方法

      watch(
            () => content.value,
            () => {
                console.log('变化了');
                imgsize(content.value);
            }
        );

在这里插入图片描述

可以看到图片已经等比例缩小了

可以叫我小崔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
TinyMCE富文本编辑器

在了解TinyMCE富文本编辑器之前，我们先来了解一下什么是富文本编辑器吧。富文本编辑器是一种用于创建和编辑富文本内容的工具或应用程序。富文本内容是指包含文本、图像、链接、样式和其他格式化元素的内容，允许用户以更具交互性和美观性的方式编辑文档或文本。人话就是，富文本编辑器允许用户编写文章时，给文字以各种样式，也能进行各种格式化操作和图片链接的插入。可以让一篇文章更加的美观。TinyMCE上传完图片后，图片的大小默认为原图片的大小例如打开控制台可以看到图片的实际宽高。
复制链接

扫一扫