Vue 富文本编辑器

富文本编辑器官网
http://tinymce.ax-z.cn
安装

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

下载语言包
语言包

下载完之后在项目里新建public文件夹

1）在public目录下新建tinymce文件夹，并将下载的语言包解压到该目录下

2）在node_modules里面找到tinymce，将skins目录复制到public/tinymce里面

<template><div class="tinymce-editor"><Editor:id="tinymceId":init="init":disabled="disabled"v-model="myValue"@onClick="onClick"></Editor></div>
</template>
<script>import axios from "axios";import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入不显示import Editor from '@tinymce/tinymce-vue'//编辑器引入import 'tinymce/themes/silver/theme'//编辑器主题import 'tinymce/icons/default'  //引入编辑器图标icon，不引入则不显示对应图标// 引入编辑器插件（基本免费插件都在这儿了）import 'tinymce/plugins/advlist'  //高级列表import 'tinymce/plugins/autolink'  //自动链接import 'tinymce/plugins/link'  //超链接import 'tinymce/plugins/image'  //插入编辑图片import 'tinymce/plugins/lists' //列表插件import 'tinymce/plugins/charmap'  //特殊字符import 'tinymce/plugins/media' //插入编辑媒体import 'tinymce/plugins/wordcount'// 字数统计import Cookies from "js-cookie";const fonts = ["宋体=宋体","微软雅黑=微软雅黑","新宋体=新宋体","黑体=黑体","楷体=楷体","隶书=隶书","Courier New=courier new,courier","AkrutiKndPadmini=Akpdmi-n","Andale Mono=andale mono,times","Arial=arial,helvetica,sans-serif","Arial Black=arial black,avant garde","Book Antiqua=book antiqua,palatino","Comic Sans MS=comic sans ms,sans-serif","Courier New=courier new,courier","Georgia=georgia,palatino","Helvetica=helvetica","Impact=impact,chicago","Symbol=symbol","Tahoma=tahoma,arial,helvetica,sans-serif","Terminal=terminal,monaco","Times New Roman=times new roman,times","Trebuchet MS=trebuchet ms,geneva","Verdana=verdana,geneva","Webdings=webdings","Wingdings=wingdings,zapf dingbats"];export default {components: {Editor},props: {//内容value: {type: String,default: ''},//是否禁用disabled: {type: Boolean,default: false},//插件plugins: {type: [String, Array],default: 'advlist autolink link image lists charmap  media wordcount'},//工具栏toolbar: {type: [String, Array],default: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table'}},data() {return {//初始化配置tinymceId: 'tinymce',myValue :this.value,init: {selector: '#tinymce',language_url: '/tinymce/langs/zh_CN.js',//汉化路径是自定义的，一般放在public或static里面language: 'zh_CN',skin_url: '/tinymce/skins/ui/oxide',//皮肤plugins: this.plugins,//插件//工具栏toolbar: this.toolbar,toolbar_location: '/',fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px',  //字体大小font_formats: fonts.join(";"),height: 500,//高度placeholder: '在这里输入文字',branding: false,//隐藏右下角技术支持//图片上传images_upload_handler: function (blobInfo, success, failure) {//文件上传的formData传递，忘记为什么要用这个了const isAccord = blobInfo.blob().type === 'image/jpeg' || blobInfo.blob().type === 'image/png' || blobInfo.blob().type === 'image/GIF' || blobInfo.blob().type === 'image/jpg' || blobInfo.blob().type === 'image/BMP';if (blobInfo.blob().size/1024/1024>2) {failure("上传失败，图片大小请控制在 2M 以内")} else if (blobInfo.blob().type == isAccord) {failure('图片格式错误')} else {let formData = new FormData()// 服务端接收文件的参数名，文件数据，文件名formData.append('file', blobInfo.blob(), blobInfo.filename())axios({method: 'POST',headers: {Authorization: 'bearer ' + Cookies.get('access_token')},// 这里是你的上传地址url:  window.SITE_CONFIG['apiURL'] + '/oss/file/upload',data: formData,}).then((res) => {console.log(res)// 这里返回的是你图片的地址success(res.data.data.url)}).catch(() => {failure('上传失败')})}}}}},watch: {//监听内容变化value(newValue) {this.myValue = (newValue == null ? '' : newValue)},myValue (newValue) {if(this.triggerChange){this.$emit('change', newValue)}else{this.$emit('input', newValue)}}},mounted () {tinymce.init({})// console.log(this.toolbar,'======')},methods: {onClick(e) {this.$emit('onClick', e, tinymce)},//可以添加一些自己的自定义事件，如清空内容clear() {this.myValue = ''}}}
</script>

注：当遇到报错信息 Uncaught SyntaxError: Unexpected token ‘<‘ 时，检查引入的语言包和编辑器主题的路径是否正确

原文

Vue 富文本编辑器相关推荐

Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
vue富文本编辑器 Vue-Quill-Editor
主流富文本编辑器对比前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想.所以果断使用vue-quill-editor来实现. wangEditor( ...
Vue富文本编辑器vue-quill-editor-使用-bug问题-教程
vue-quill-editor npm install vue-quill-editor –save or yarn add vue-quill-editor 文件中使用 <template& ...
Element Tiptap Editor - 免费开源的 Vue 富文本编辑器，专门为搭配 Element UI 使用优化，使用很简单
一款很容易上手配置的富文本编辑器,和 Element plus 一起使用效果非常好,还能自定义功能. 关于 Element Tiptap Editor Element Tiptap Editor 是一 ...
Vue富文本编辑器代码高亮
之前在Vue-awesome上面找富文本编辑器的插件,找了排名第一的vue-quill-editor,排名第一应该是相对比较好用的. 首先下载到自己的项目中 npm install vue-quill ...
vue 富文本编辑器kindeditor使用粘贴图片自动上传图片功能
Kindeditor 的使用这里不再陈述,在KindEditor.create执行时,传入afterCreate方法,在afterCreate的方法里面进行图片上传的功能,这里使用的谷歌浏览器,其他浏 ...
特别好用的Vue富文本编辑器wangEditor自己使用案例组件，附源码，直接使用
前言:已组件化,引入即可使用,包含本地图片上传可拖拽大小.效果图如下:附源码 1.首先老规矩,引入下面两个包 npm i @wangeditor/editor --save npm i @wanged ...
vue富文本编辑器中样式冲突和不能修改的问题
在vue项目中,富文本回显通常采用的是v-html指令来渲染html字符串.但是在回显的过程中,发现了一些问题,以此记录下来. 1.富文本(tinyMec)在编辑的时候采用的是iframe隔离,这样的 ...
vue 富文本编辑器 quill （含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等）
基本使用安装依赖 npm i quill .vue文件 <div ref="editor" :style="finalStyle"></di ...
vue问题四：富文本编辑器上传图片
vue使用富文本编辑器上传图片: 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangedit ...

Vue 富文本编辑器

Vue 富文本编辑器相关推荐

最新文章

热门文章