富文本编辑器 tinymce 的安装与使用

百度的富文本编辑器大家都熟悉，那么下面给大家介绍一款富文本编辑器tinymce ，个人感觉比百度的界面好看，调用方便，就不知道各位大神怎么看咯！

以下是vue中使用示例，献上最终效果图

安装：

npm install tinymce
npm install @tinymce/tinymce-vue

语言设置：

在官网下载语言包https://www.tiny.cloud/get-tiny/language-packages/，

在目录public建立一个文件夹tinymce，放语言文件语言文件zh_CN.js和皮肤skin, 然后在node_modules里找到tinymce的skin包，复制到public/tinymce里

以下是封装的富文本组件

使用：
<tinymce ref="tinymce1" :id="'tinymce1'"></tinymce>

获取编辑器内容：this.$refs.tinymce1.tinymceHtml

<template>
    <div class="tinymce">
        <Editor :id="id" v-model="tinymceHtml" :init="init"></Editor>  
    </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
//--------------------插入引入--------------------
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/imagetools'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/link' //超链接插件
import 'tinymce/plugins/code' //代码块插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/contextmenu'  //右键菜单插件
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/colorpicker' //选择颜色插件
import 'tinymce/plugins/textcolor'  //文本颜色插件
import 'tinymce/plugins/fullscreen' //全屏
import 'tinymce/plugins/help'       
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/print'
import 'tinymce/plugins/preview'
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'
import 'tinymce/themes/silver/theme'
export default {
	components:{
        Editor,
    },
    props:['id'],
    data(){
        return{
            init:{
                selector: this.id,//选择HTML元素
                language_url:'/tinymce/zh_CN.js',  //导入语言文件
                language: "zh_CN",//语言设置
                //disabled:true, //禁用
                skin_url: '/tinymce/skins/ui/oxide',//主题样式
                height:250, //高度
                theme: 'silver',
                menubar: false,// 隐藏最上方menu菜单
                toolbar: true,//false禁用工具栏（隐藏工具栏）
                browser_spellcheck: true, // 拼写检查
                branding: false, // 去水印
                image_advtab: true,
                statusbar: false, // 隐藏编辑器底部的状态栏
                elementpath: false,  //禁用下角的当前标签路径
                paste_data_images: true, // 允许粘贴图像
                automatic_uploads: true,
                images_upload_handler: (blobInfo, success, failure) => {
			        var xhr, formData;
			 
			        xhr = new XMLHttpRequest();
			        xhr.withCredentials = false;
			        xhr.open('POST', 'uploadFileURL');//第一个参数是请求方式，第二个参数是请求地址，我这里配置的是struts的action，如果是其他（PHP等）的可这样配置：xxx.php
			 
			        xhr.onload = function () {
			            var json;
			            if (xhr.status !== 200) {
			                failure('HTTP Error: ' + xhr.status);
			                return;
			            }
			            json = JSON.parse(xhr.responseText);            
			            if (!json || typeof json.location !== 'string') {
			            failure('Invalid JSON: ' + xhr.responseText);
			                return;
			            }
			            success(json.location);
			        };
			 
			        formData = new FormData();
			        formData.append('file', blobInfo.blob(), blobInfo.filename());
			        xhr.send(formData);
			    },
                plugins: 
                'lists image imagetools media table wordcount code fullscreen help  toc fullpage autosave nonbreaking insertdatetime visualchars visualblocks searchreplace spellchecker pagebreak link charmap paste print preview hr anchor' ,
                toolbar:[
                    'newdocument undo redo | formatselect visualaid|cut copy paste selectall| bold italic underline strikethrough |codeformat blockformats| superscript subscript  | forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent |  removeformat ',
                    'code  bullist numlist | lists image imagetools media table link |fullscreen help toc fullpage restoredraft nonbreaking insertdatetime visualchars visualblocks searchreplace spellchecker pagebreak anchor charmap  pastetext print preview hr',
                ]
            },
            tinymceHtml:"",  
        }
    },
    mounted(){
        tinymce.init({})
    },
}
</script>
<style lang="scss" scoped>
 
</style>

富文本编辑器 tinymce 的安装与使用

猜你喜欢