富文本编辑器 插件tinymce.js 下载使用

tinymce使用

效果图

1.官网下载 官方地址TinyMCE下载


2.原装是英文版，可以下载汉化包
tinymce汉化包

放进langs文件夹下

3.开始使用

3.1 引用js

<script src="static/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>

3.2 html 使用

<textarea id="detail"></textarea>

3.3 初始化

//初始化富文本
            setEditor(val){
                var _this = this;
                //第一次打开初始化
                tinymce.init({
                    selector: '#detail',
                    language: 'zh_CN',//语言
                    height: 300,//编辑器高度
                    branding: false,//是否禁用“Powered by TinyMCE”
                    plugins: [
                        'powerpaste table advlist autolink lists link charmap print preview hr anchor pagebreak',
                        'searchreplace wordcount visualblocks visualchars code fullscreen',
                        'insertdatetime nonbreaking save table contextmenu directionality',
                        'emoticons textcolor colorpicker textpattern image code codesample toc pagebreak'
                    ],
                    toolbar1: 'undo redo | table | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                    toolbar2: 'print preview | forecolor backcolor emoticons | codesample | pagebreak | toc | fullscreen',
                    image_advtab: true,
                    paste_data_images: true,
                    menubar: false,//禁用标题栏
                    automatic_uploads: true,
                    media_live_embeds: true,//查看上传的视频
                    //图片选择上传
                    images_upload_handler: function (blobInfo, success, failure) {
                        var xhr, formData;
                        var file = blobInfo.blob();//转化为易于理解的file对象
                        var isLt10M = file.size / 1024 / 1024  < 10;
                        if(!isLt10M){
                            failure('上传图片大小不能超过10MB哦!');
                            return;
                        }
                        xhr = new XMLHttpRequest();
                        xhr.withCredentials = false;
                        xhr.open('POST',ctx + 'file/uploadFile?editorImg=editorImg&target=oss');
                        xhr.onload = function() {
                            var json;
                            if (xhr.status != 200) {
                                failure('上传失败!');
                                return;
                            }
                            json = JSON.parse(xhr.responseText);
                            if (!json.data || typeof json.data.filePath != 'string') {
                                failure('上传失败!');
                                return;
                            }
                            success(json.data.filePath);
                        };
                        formData = new FormData();
                        formData.append('file', file, file.name );//此处与源文档不一样
                        xhr.send(formData);
                    },
                    //初始化完成回调函数
                    init_instance_callback : editor => {
                    //如果第一次打开并且是查看动态记录详情则直接设置值
                    if(!this.editorInit && val){
                    editor.setContent(val);
                }
                //修改为初始化完成
                this.editorInit = true;
            }
            });
                if(this.editorInit){
                    //清空富文本编辑器内容
                    tinymce.activeEditor.setContent("");
                    //如果是查看在重新设置内容
                    if(val){
                        tinymce.activeEditor.setContent(val);
                    }
                }
            },

3.4 新增时调用

//新增
            add(){
                this.RecordOperation.title = "新增";
                this.RecordOperation.show = true;
                setTimeout(()=>{
                    this.setEditor();
                },500);
            },

3.5 保存时，获取内容赋值

this.data.content = tinymce.activeEditor.getContent();

3.6 编辑查看富文本内容

//查询详情
            queryDynamicInfo(dynamicId){
                axios.get('mj/projectMessage/queryDynamicInfo/'+dynamicId).then(res => {
                    this.RecordOperation.data = res.data;
                    this.RecordOperation.show = true;
                    this.RecordOperation.title = "编辑动态";
                    setTimeout(()=>{
                        this.setEditor(this.RecordOperation.data.content);
                    },500);
                });
            },

3.7 同个页面使用多个富文本，用不同选择器再次初始化

<textarea id="detail2"></textarea>