vue中如何使用富文本编辑器（TinyMce）

英文官网：https://www.tiny.cloud/
中文官网：http://tinymce.ax-z.cn/

安装

使用npm install tinymce --save命令下载完整的包

npm install tinymce --save

下载完成之后，在node_modules下找到tinymce包下的资源拷贝到项目本地

由于tinymce默认是英文界面，自己项目需要中文界面，所以需要下载中文的语言包。还可以下载自己需要的语言包

在static/tinymce目录下新建一个lang目录存放语言包

使用

首先在组件中引入下载好的包

ps: 强烈建议封装成组件使用

import Editor from "@tinymce/tinymce-vue";

在components下注册富文本组件

components: {"tinymce": Editor
},

在data里定义一个init变量来初始化我们的编辑器


props:{//传入的默认值value: {type: String,default: ''},//插件plugins: {type: [String, Array],default: 'lists fullscreen emoticons autosave image table colorpicker textcolor wordcount contextmenu emoticons'},//工具toolbar: {type: [String, Array],//如果显示的内容和配置的不符，表明插件未引入。需要去引入插件；default: 'bold italic underline strikethrough restoredraft image fullscreen emoticons | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | removeformat'},
}
init: {branding:false, // 去水印language_url: '/static/tinymce/lang/zh_CN.js',  //语言包路径地址language: 'zh_CN',height: 700,//编辑器高度width: '90%',//编辑器宽度plugins: this.plugins,  // 插件toolbar: this.toolbar,  // 工具栏// menubar:false,//顶部菜单是否显示content_style:'div,p{margin:5px 0;}'+'img{max-width:100%;}'+'*::-webkit-scrollbar{width:6px;height:6px;background:transparent;}'+'*::-webkit-scrollbar-thumb{border-radius: 3px;background: #bac3d9;}',// 此处为图片上传处理函数，这里就没用base64的图片形式上传图片// 因为base64存储到服务器数据库太庞大了images_upload_handler: (blobInfo, success, failure) => {// 自定义上传逻辑let formdata = new FormData();formdata.append("file", blobInfo.blob(),blobInfo.filename());// 改为自己接口路径axios.post(url, formdata).then(res => {// 我的接口返回数据格式//{code: 0,data: {url: ....},message: ""}if(res.data.code === 200){success(res.data.data.url)}else{failure('上传失败！'+res.data.code)}})},init_instance_callback : function(editor) {// 富文本初始化回调}},

我贴一些常用的配置属性值。列表来自tinymce中文文档。

newdocument（新文档）
bold（加粗）
italic（斜体）
underline（下划线）
strikethrough（删除线）
alignleft（左对齐）
aligncenter（居中对齐）
alignright（右对齐）
alignjustify（两端对齐）
styleselect（格式设置）
formatselect（段落格式）
fontselect（字体选择）
fontsizeselect（字号选择）
cut（剪切）
copy（复制）
paste（粘贴）
bullist（项目列表UL）
numlist（编号列表OL）
outdent（减少缩进）
indent（增加缩进）
blockquote（引用）
undo（撤销）
redo（重做/重复）
removeformat（清除格式）
subscript（下角标）
superscript（上角标）

使用toolbar来配置工具栏上可用的按钮，多个控件使用空格分隔，使用|来创建分组。

HTML 内容

<div><tinymce :init="init" v-model="myValue"></tinymce>
</div>

tinymce组件直接支持v-model指令，直接双向绑定数据。

在watch里接收传过来的value值

watch: {value (newValue) {this.myValue= newValue}}

本文源码

<template><div class="tinymce-editor"><editor v-model="myValue":init="init"></editor></div>
</template>

<script>
import axios from 'axios'
import Editor from '@tinymce/tinymce-vue';export default {components: {Editor},props: {//传入的默认值value: {type: String,default: ''},//插件plugins: {type: [String, Array],default: 'lists fullscreen emoticons autosave image table colorpicker textcolor wordcount contextmenu emoticons'},//工具toolbar: {type: [String, Array],//如果显示的内容和配置的不符，表明插件未引入。需要去引入插件；default: 'bold italic underline strikethrough restoredraft image fullscreen emoticons | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | removeformat'},//编辑器高度height:{default:400},// 上传文件地址mediaUrl:{type: String,default: 'http://.......'}},data () {return {// 初始化富文本init: {branding:false,language_url: '/static/tinymce/lang/zh_CN.js',  //语言包路径地址language: 'zh_CN',height: this.height,//编辑器高度width: '90%',//编辑器宽度plugins: this.plugins,  // 插件toolbar: this.toolbar,  // 工具栏// images_upload_url: this.mediaUrl, //上传路径elementpath:false,//标签路径是否显示// menubar:false,//顶部菜单是否显示paste_data_images: true,//可以粘贴图片，需要引入paste插件content_style:'div,p{margin:5px 0;}'+'img{max-width:100%;}'+'*::-webkit-scrollbar{width:6px;height:6px;background:transparent;}'+'*::-webkit-scrollbar-thumb{border-radius: 3px;background: #bac3d9;}',// 此处为图片上传处理函数，这里就没用base64的图片形式上传图片// 因为base64存储到服务器数据库太庞大了images_upload_handler: (blobInfo, success, failure) => {},init_instance_callback : function(editor) {}},myValue: '',}},mounted () {tinymce.init({})},methods: {},watch: {value (newValue) {this.myValue = newValue}}}</script>

效果

vue中如何使用富文本编辑器（TinyMce）相关推荐

如何使用富文本编辑器tinymce
TinyMC编辑器简介 TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器.跟其他富文本编辑器相比,有着丰富的插件,支持多种语言,能够满足日常的业务需求并且免费. TinyMCE的优势: ...
vue中如何使用富文本框组件
富文本框,就是可以在文本框里面输入文本并携带自我编辑的一种编辑器,使用vue做项目时少不了用到富文本框组件,下面就来说说该组件的使用步骤一.首先要在vue脚手架的依赖按钮中添加新的依赖vue-qui ...
【项目实战】vue+springboot项目使用富文本编辑器实现长文章发表和展示
本人前端烂,文章展示部分现在还弄的不好. 效果: 很想实现点击查看详情然后进入查看具体的文章内容,但还不知道怎么弄,有知道的兄弟可以教我一下. 首先npm下载: cnpm install vue-qu ...
element ui html编辑器,Vue + Element UI使用富文本编辑器
第一步下载组件 npm install vue-quill-editor 第二步在需要使用的组件内引入· 富文本组件 import { quillEditor } from 'vue-quill-ed ...
Vue + Element UI 使用富文本编辑器
第一步,先下载组件 npm install vue-quill-editor 第二步,在需要使用的位置引入(富文本组件) import { quillEditor } from 'vue-quill- ...
vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...
Django中使用富文本编辑器Uedit
Uedit是百度一款非常好用的富文本编辑器一.安装及基本配置官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...
学习日志day46（2021-09-10）（1、使用富文本编辑器simditor）
学习内容:学习JavaWeb(Day46) 1.使用富文本编辑器simditor 1.使用富文本编辑器simditor (1)常见的富文本编辑器有simditor.CKEditor.tinymce.k ...

vue中如何使用富文本编辑器（TinyMce）

安装

使用

HTML 内容

本文源码

效果

vue中如何使用富文本编辑器（TinyMce）相关推荐

最新文章

热门文章