vue项目实现富文本编辑器(实践用过)

实现网址: https://codepen.io/packy1980/pen/BayPrVO

官网文档: http://lpreterite.github.io/vue-tinymce/#/

1.下载安装

yarn add @packy-tang/vue-tinymce
# or
npm install @packy-tang/vue-tinymce

2.下载之后在 index.html 中引入

先将node_modules下的 tinymce 文件复制到static 下

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

下拉框层级可能不够看不到下拉框显示

就在上面那行代码下引入一下代码

覆盖原有样式

<style>.tox-tinymce-aux {// 未显示的下拉框class z-index: 3000 !important}
</style>

3.main.js 中引入

import VueTinymce from '@packy-tang/vue-tinymce' // 富文本编辑器
import 'tinymce/plugins/table' // 表格插件
import 'tinymce/icons/default/icons'import tinymce from 'tinymce'Vue.prototype.$tinymce = tinymce
// 安装组件
Vue.use(VueTinymce)

4.vue中直接使用

<vue-tinymce
id="textarea"
v-model="content"
:setup="setup"
:setting="setting">
</vue-tinymce>

5.在 vue 对应的 js 中

加入配置项 ---- 表格啥的乱七八糟的基本上想要的功能就全了

data () {return {content: "", // 这个是文本框里的内容setting: {menubar: true,toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright                     alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",toolbar_drawer: "sliding",quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",plugins: "link image media table lists fullscreen quickbars",language: 'zh_CN',language_url: 'https://lab.uxfeel.com/node_modules/tinymce/langs/zh_CN.js',height: 500}}
}

6.完成之后案例

安装使用 ------

配置表格 ------

下面是遇到的问题及解决

问题：先是为了回显 由于是在弹层中使用 所以加了v-if=”drawer” drawer是弹层是否弹出还是关闭的自定义属性(true/false) 加完之后回显没问题了 但是获取编辑器内容获取不到了 于是
解决办法：
加入change事件 是改变编辑器内容就会返回val 直接在事件下赋值 编辑器内容就会获取到, v-model 后端返回的值也要改编成 :content="contentTex"全部代码:
这是VUE中改法<vue-tinymce
id="textarea"
v-if="drawer"
:content="contentTex"
@change="changeTinyMce"
:setup="setup"
:setting="setting">
</vue-tinymce>// 富文本编辑器 编辑器内容改变就触发 获取VAL --- js中changeTinyMce (val) {this.contentTex = val // 把变化的值赋给this.contentTex
},// contentTex 是在data中命的空值
onSubmit () { // 编辑、新增提交this.ruleForm.contentTex = this.contentTex// 将 上面拿到的 值 赋给即将要传给后端的 form表单中 的contentTexRequest.onSubmit(this)},data() {
Return {
contentTex: “”, // 编辑器内容ruleForm: {contentTex: null // 内容
}
}
}以上代码要自上而下执行 按顺序赋值  按理说是不会出错了 不按理说 我也不会啊

再一个是啥呢就是这个步骤全部完事之后会报个错会说 setup 报错

解决一下就是  在初始化 mounted ()  加   this.setup()在事件函数里加 methods () 加 setup(editor) {}

vue项目实现富文本编辑器(实践用过)相关推荐

vue项目 vue-quill-editor富文本编辑器+图片上传
目录基础使用: 进阶版: 使用 el-upload 图片上传: 进阶版2.0: 可拖动调整图片大小: 基础使用: 富文本编辑器: 此方法得到的图片为base64编码,图片上传在下面. npm ins ...
vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
vue使用百度富文本编辑器（ueditor）
文章目录 vue使用百度富文本编辑器(ueditor) 1.进入官网或者github下载源码 2.使用grunt编译 4.安装`vue-ueditor-wrap` 5.组件中引入,自定义组件 6.后端 ...
wangeditor html编辑,Vue整合wangEditor富文本编辑器
最近在做项目时,客户有个发布新闻动态的功能,具体页面内容让客户自己编写,所以要选择富文本编辑器,这样用户体验好一点.网上有很多的富文本编辑器, 因为项目的功能并不是很复杂,所以选择了wangEdito ...
VUE+tinymce（富文本编辑器）
效果图: VUE项目引入tinymce 1.tinymce安装以及下载 npm install @tinymce/tinymce-vue -save npm install tinymce -save ...
vue使用ckeditor4富文本编辑器配置
使用场景: 本来最开始使用的是quill富文本编辑器,但是由于功能和项目得实际需求并不是怎么适合,因为我需要在Word文档里面把一些内容进行粘贴复制进去(复制的是图文),当出现这种场景的话quill就 ...
vue使用WangEditor富文本编辑器(批量上传图片到服务器)
最近要写一个官网,但是这个官网要写成活的可配置的项目,于是要先写一后台管理系统,用来配置官网的菜单和页面,配置菜单自然是vue+ElementUI表格表单的增删改查,但是配置页面就要有排版.样式等等, ...
vue集成vue-ueditor-wrap富文本编辑器
vue前言最近项目需要使用到富文本编辑器,因为项目关系需要使用到vue-ueditor-wrap富文本编辑器.经过了几小时的研究终于成功集成了. 1.install vue2 # vue-uedit ...
vue结合ueditor富文本编辑器（换肤分离）
需求 (PC端)做一个可以使用图片上传.视频上传.文件上传功能的富文本组件,简单的文本编辑发布功能,采用socket方式传输, 做法当时看到这个需求,我觉得是不难的,就去github上找富文本编辑器 ...
vue移动端富文本编辑器vue-html5-editor
简介 Intro Vue-html5-editor是一个Vue的富文本编辑器插件,简洁灵活可扩展,适用于vue2.0以上版本,支持IE11. Vue-html5-editor is an html5 ...

vue项目实现富文本编辑器(实践用过)

下面是遇到的问题及解决

vue项目实现富文本编辑器(实践用过)相关推荐

最新文章

热门文章