VUE: ^2.6.14 中使用tinymce富文本编辑框

最新推荐文章于 2024-03-22 16:12:28 发布

Shile every day

最新推荐文章于 2024-03-22 16:12:28 发布

阅读量365

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_46003296/article/details/130719869

版权

文章目录

概要

tinymce编辑器在vue2.0中的使用

整体安装流程

1、安装 tinymce

npm i @tinymce/tinymce-vue -S
	
npm i tinymce -S

2、vue2.0安装版本安装 tinymce

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

npm install tinymce@5.1.0 -S

3、安装的过程中可能出现安装失败的问题，我的解决方法是加 --legacy-peer-deps

npm install tinymce@5.1.0   --legacy-peer-deps    

npm install @tinymce/tinymce-vue@3.0.1   --legacy-peer-deps

4、安装成功后，在vue项目下的public下创建tinymce文件夹
在这里插入图片描述

5、从node-module找到tinymce文件将其中的plugins、skins，将这两个文件放入创建的tinymce文件夹
在这里插入图片描述
6、tinymce是英文的，需要从官网下载中文包:将改中文包放入创建的tinymce中，看步骤4图片
地址: https://www.tiny.cloud/get-tiny/language-packages/

7、tinymce需要icons文件，显示富文本图标使用，如果node-module/tinymce下没有icons文件，需要去百度查一下下载，放入tinymce文件夹

至此使用前的准备已经完成

使用步骤

1、在src/components下创建tinymce组件

<template>
    <div class="tinymce-editor">
        <Editor
            ref="editor"
            :disabled="isShow"
            :id="tinyId"
            v-model="tinyValue"
            :init="{ ...init, height }"
        />
    </div>
</template>

<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default/icons";
import "tinymce/themes/silver";
import "tinymce/themes/silver/theme.min";
import "tinymce/skins/ui/oxide/skin.min.css";
import "tinymce/plugins/noneditable";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/media";
import "tinymce/plugins/template";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/paste";
import "tinymce/plugins/preview"; 
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/help";
import "tinymce/plugins/charmap";
import "tinymce/plugins/print";
import "tinymce/plugins/hr";
import "tinymce/plugins/anchor";
import "tinymce/plugins/pagebreak";
import "tinymce/plugins/spellchecker";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/autosave";
import "tinymce/plugins/fullpage";
import "tinymce/plugins/toc";
export default {
    name: "Tinymce",
    components: { Editor },
    props: {
        height: {
            type: Number,
            default: 500,
        },
        id: {
            type: String,
            default: "tinymceEditor",
        },
        value: {
            type: String,
            default: "",
        },
        isShow: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            init: {
                language_url: "./tinymce/langs/zh_CN.js",   //语种路径
                language: "zh_CN",  //显示语种
                skin_url: "./tinymce/skins/ui/oxide",   //skin 路径
                height: 500,    // 编辑器高度
                content_style: "p {margin: 0px;padding:0px;border:0px}",    //编辑器样式
                lineheight_formats:
                    "1 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 2 2.5 3 3.5 4 4.5 5",
                fontsize_formats:
                    "10px 11px 12px 13px 14px 15px 16px 17px 18px 20px 22px 24px 26px 28px 30px 32px 32px 34px 36px",
                font_formats:
                    "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';Arial=arial,helvetica,sans-serif; Helvetica=helvetica;Symbol=symbol;Tahoma=tahoma,arial,helvetica;Terminal=terminal,monaco;Times New Roman=times new roman,times;",
                plugins:
                    " powerpaste indent2em lists image media table wordcount code fullscreen toc insertdatetime  searchreplace   link charmap  hr fullpage autosave nonbreaking  visualchars visualblocks  pagebreak print preview  anchor",
                powerpaste_allow_local_images: true,
                powerpaste_word_import: "propmt", // 此设置控制如何筛选从 Microsoft Word 粘贴的内容
                powerpaste_html_import: "propmt",
                paste_data_images: true,    // 粘贴的同时能把内容里的图片自动上传
                paste_word_valid_elements: "*[*]",  // 此选项使您能够配置特定于 MS Office 的有效*元素
                paste_convert_word_fake_lists: true,    // 插入 word 文档需要该属性
                //  paste
                toolbar: [
                    "undo redo newdocument fullscreen restoredraft print bold italic underline strikethrough subscript superscript removeformat blockquote cut copy paste pastetext bullist  numlist alignleft aligncenter alignright alignjustify  hr outdent indent indent2em lineheight backcolor textcolor forecolor textcolor  formatselect  fontselect fontsizeselect code ltr directionality  rtl directionality link unlink openlink image media charmap  preview insertdatetime table tabledelete tablecellprops tablemergecells  tablesplitcells tableinsertrowbefore tableinsertrowafter tabledeleterow tablerowprops tablecutrow tablecopyrow tablepasterowbefore  tablepasterowafter  tableinsertcolbefore tableinsertcolafter tabledeletecol ",
                ],  // 工具栏，参数类型是个数组
                statusbar: false,
                menubar: false, // 菜单栏的配置，也是数组
                advlist_bullet_styles: "default,circle,square", //此选项允许您在默认 bullist 工具栏控件中包含特定的无序列表项标记 默认值：default,circle,disc,square
                advlist_number_styles: "default,lower-alpha,upper-alpha",
                branding: false, // 水印“Powered by TinyMCE”
                // 上传 图片 监听
                images_upload_handler: (blobInfo, success, failure) => {
                    this.imgUpload(blobInfo, success, failure);
                },
                videoUrl: "",
                uploaded: false,
                file_picker_types: "image media",// 此选项允许您通过空格或逗号分隔的类型名称列表指定所需的文件选取器类型。目前有三种有效类型：文件、图像和媒体
                // 点击上传 文件监听
                file_picker_callback: (callback, value, meta) => {
                    this.uploadVideo(callback, value, meta);
                },
            },
            tinyId: this.id,
            newValue: "",
        };
    },
    watch: {
        newValue(newValue) {
            this.$emit("input", newValue);
        },
    },
    mounted() {
        // 只读模式
        // tinymce.activeEditor.setMode('readonly');
        // 通过id禁用编辑器
        // tinyMCE.get('textarea_id').getBody().setAttribute('contenteditable', false);
        tinymce.init({});
    },
    computed: {
        tinyValue: {
            get() {
                return this.value;
            },
            set(val) {
                this.newValue = val;
            },
        },
    },
    methods: {
        // 富文本图片上传
        imgUpload(blobInfo, success, failure) {
            var size = blobInfo.blob().size / 1000;
            if (size > 6000) {
                this.$message({
                    message: " 图片大小不允许超过6M，请压缩后上传!",
                    type: "warning",
                });
            }
            const formData = new FormData();
            formData.append("file", blobInfo.blob());
            // 上传图片接口   换成自己的接口
            this.$http
                .post(this.$url.uploadFile, formData)
                .then((res) => {
                    if (res.code == 200) {
                        // 图片路径
                        success(res.data.fileUrl);
                    } else {
                        this.$message.error("上传失败:" + res.message);
                    }
                });
        },
        // 视频上传
        uploadVideo(callback, value, meta) {
            if (meta.filetype == "media") {
                let input = document.createElement("input"); //创建一个隐藏的input上传
                input.setAttribute("type", "file");
                let that = this;
                input.onchange = async function () {
                    let file = this.files[0]; //选取第一个文件
                    if (file.type.includes("video")) {
                        this.uploaded = await that.uploadFile(file, "media"); //上传视频返回的url
                    } else {
                        that.$message.error("请选择视频文件！");
                        return false;
                    }
                    if (this.uploaded) {
                        callback(that.videoUrl); //将url显示在弹框输入框中
                    }
                };
                // 触发点击
                input.click();
            } else if (meta.filetype == "image") {
                let input = document.createElement("input"); //创建一个隐藏的input上传
                input.setAttribute("type", "file");
                let that = this;
                input.onchange = async function () {
                    let file = this.files[0]; //选取第一个文件
                    if (file.type.includes("image")) {
                        this.uploaded = await that.uploadFile(file, "media"); //上传图片返回的url
                    } else {
                        that.$message.error("请选择图片文件！");
                        return false;
                    }
                    setTimeout(() => {
                        if (this.uploaded) {
                            callback(that.videoUrl); //将url显示在弹框输入框中
                        }
                    }, 600);
                };
                // 触发点击
                input.click();
            }
        },
        // 上传图片或者视频
        uploadFile(params) {
            let file = params;
            let form = new FormData();
            form.append("file", file);
            // 上传图片接口
            return this.$http
                .post(this.$url.uploadOperationFiles, form)
                .then((res) => {
                    if (res.code == 200) {
                        // 上传成功图片路径
                        this.videoUrl = res.data.fileUrl;
                        return true;
                    } else {
                        this.$message.error("上传失败:" + res.message);
                        return false;
                    }
                });
        },
        clear() {
            this.tinyValue = "";
        },
    },
};
</script>

2、在父组件中使用tinymce组件

<template>
	<div>
	     <Tinymce
                id="editor1"
             	:isShow="type !== 'detail' ? false: true "
                v-model="ruleForm.detail"
                ref="editor"
     />
	</div>
</template>
<script>
import Tinymce from "@/components/Tinymce";
export default {
components: { TinymceMore },
data(){
	return	{
		ruleForm:{
			detail:''
		}
	}
	}
}
</script>

小结

tinymce使用结束，其中的一些字段我也没有使用，所以没有写出来，其中的一些字段可能需要去官网查看。tinymce中文文档

Shile every day

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
VUE: ^2.6.14 中使用tinymce富文本编辑框

1、安装 tinymce2、vue2.0安装版本安装 tinymce3、安装的过程中可能出现安装失败的问题，我的解决方法是加 --legacy-peer-deps4、安装成功后，在vue项目下的public下创建tinymce文件夹5、从node-module找到tinymce文件将其中的plugins、skins，将这两个文件放入创建的tinymce文件夹6、tinymce是英文的，需要从官网下载中文包:将改中文包放入创建的tinymce中，看步骤4图片地址: https://www.
复制链接

扫一扫