后台系统富文本使用
我使用了 wangEditor 还挺好的
还想要其他功能的自己配置一下
http://www.wangeditor.com/doc/
这是官方文档
安装
npm i wangeditor --save
在富文本组件内引入
import E from '@/node_modules/wangeditor/dist/wangEditor.min.js';
然后上代码
子组件页
<template>
<view >
<view id="toolbar-container" class="w-e-toolbar toolbar"></view>
<view id="text-container" class="text" :style="'min-height:'+(type == 'help'?'300px':'800px')"></view>
<el-button v-show="isshow" @click="cancel" class="submitBtn submitBtn1">取 消</el-button>
<el-button v-show="isshow" type="primary" @click="submit(editorData.name)" class="submitBtn">修 改</el-button>
</view>
</template>
<script>
引入
import E from '@/node_modules/wangeditor/dist/wangEditor.min.js';
export default {
data() {
return {
editor:null,
editorContent: '',
editorCon:'',
isshow:true
}
},
props:['editorData','type'],
mounted() {
var that = this
实例化一个富文本
const editor = new E("#toolbar-container", "#text-container");
监听富文本内容变化
editor.config.onchange = (newHtml) => {
that.editorContent = newHtml
that.$emit('changecon',newHtml)
}
创建富文本
editor.create()
富文本赋值方法
editor.txt.html(this.editorData.con)
if (that.$props.type == 'help') {
that.isshow = false
}
传给模型数据
that.editor = editor
},
methods:{
submit(type){
var that = this;
获取富文本内容
let data = that.editor.txt.html()
var urlarr = ['接口1','接口2','接口3']
var url = '';
switch(type){
case '用户协议': url = urlarr[0];break;
case '隐私政策': url = urlarr[1];break;
case '行为规范': url = urlarr[2];break;
}
that.$request('接口',{
con:data
}).then((res)=>{
that.$message({
message:'修改成功',
type:'success'
})
})
uni.navigateBack()
},
清空富文本内容
clearEditCon(con){
var that = this
that.editor.txt.html(con)
},
cancel(){
uni.navigateBack()
}
},
beforeDestroy() {
var that = this
// 调用销毁 API 对当前编辑器实例进行销毁
that.editor.destroy()
that.editor = null
}
}
</script>
<style lang="scss">
.toolbar {
border: 1px solid #ccc;
}
.text {
border: 1px solid #ccc;
min-height: 300px;
}
.submitBtn{
float: right;
margin-top: 20px;
}
.submitBtn1{
margin-left: 10px;
}
</style>
引用子组件的页面
<template>
<view class="uni-container" v-if="editorData">//由于我这里需要拿到值再渲染组件 但是子组件会先渲染 父组件才会onload获取到值赋值给子组件 所以需要监听一下父组件是否拿到值了再让子组件显示
<edit :editorData="editorData"></edit>
</view>
</template>
<script>
import Edit from '../component/edit.vue'
export default{
data(){
return{
editorData:''
}
},
onLoad() {
var that = this;
that.getData()
},
components:{
'edit':Edit
},
methods:{
getData(){
var that = this;
that.$request('接口').then((res)=>{
that.editorData = res.data[0];
console.log(res.data[0])
})
}
}
}
</script>
<style lang="scss">
</style>
这是另外一个需要引入富文本子组件的页面
这里的需求是需要新增内容 于是需要父组件触发事件 先清空富文本 然后子组件要把富文本内容实时反馈给父组件 即父子通信；
<template>
<view>
<view class="uni-header">
<view class="uni-group">
<button type="default" size="mini" class="uni-button" @click="open">新增内容</button>
</view>
</view>
<view class="uni-container">
<uni-table>
<uni-tr>
<uni-th align="center">帮助标题</uni-th>
<uni-th align="center">创建时间</uni-th>
<uni-th align="center">操作</uni-th>
</uni-tr>
<uni-tr v-for="(item,index) in tableData" :key="index">
<uni-td align="center">{{item.name}}</uni-td>
<uni-td align="center">{{getTime(item.timestamp)}}</uni-td>
<uni-td align="center">
<button type="primary" size="mini" class="uni-button" @click="deleteCon(item._id)">删除内容</button>
<button type="primary" size="mini" class="uni-button" @click="checkCon(item._id)">查看详情</button>
</uni-td>
</uni-tr>
</uni-table>
</view>
<el-pagination
style="text-align: center;"
@current-change="handleCurrentChange"
:current-page.sync="currentPage1"
:page-size="5"
layout="total, prev, pager, next"
:total="total">
</el-pagination>
<template>
<view>
<!-- 编辑 -->
<el-dialog
:title="help.name[help.index]"
:model="help"
:visible.sync="help.dialogFromVisble"
:close-on-click-modal="false"
>
<el-form :model="help">
<el-form-item label="帮助内容标题">
<el-input v-show="help.index == 0" type="text" v-model="help.title"/>
<view v-show="help.index == 1">{{help.title}}</view>
</el-form-item>
<el-form-item label="帮助内容"></el-form-item>
<el-form-item v-show="help.index == 1">
<view>{{ToText(help.con)}}</view>
</el-form-item>
<el-form-item v-show="help.index == 0">
<edit ref="clearEdit" :editorData="editorData" :type="type" @changecon="getCon"></edit>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" v-show="help.index == 0" @click="submit">提 交</el-button>
<el-button @click="cancel">取 消</el-button>
</span>
</el-dialog>
</view>
</template>
</view>
</template>
<script>
import Edit from './component/edit.vue';
export default{
data(){
return{
tableData:{},
pageNum:1,
help:{
name:['新增帮助内容','查看详情'],
title:'',
con:'',
dialogFromVisble:false,
index:-1
},
editorData:'',
type:'help',
total:0,
currentPage1: 1
}
},
onLoad(){
var that = this;
that.getData(that.pageNum);
},
components:{
'edit':Edit
},
methods:{
getData(val){
var that = this
that.$request('接口',{
page:val
}).then((res)=>{
that.tableData = res.data
that.total = res.total
})
},
handleCurrentChange(val) {
this.getData(val)
},
getTime(time){
var d=new Date(time);
var year=d.getFullYear();
var month=d.getMonth()+1;
var date=d.getDate();
var hour=d.getHours();
var minute=d.getMinutes();
var second=d.getSeconds();
return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
},
open(){
var that = this;
that.help.dialogFromVisble = true;
that.help.index = 0;
that.help.con = '';
that.help.title = '';
},
getCon(con){
var that = this;
that.help.con = con
},
submit(){
var that = this;
if (that.help.con == '' || that.help.title == '') {
return that.$message.error('标题或内容不能为空')
}
that.$request('接口',{
name:that.help.title,
con:that.help.con
}).then((res)=>{
that.$message({
message:'新增成功',
type:'success'
})
that.help.dialogFromVisble = false;
that.getData(that.pageNum)
提交完成之后要清空子组件富文本的内容
其实组件就是父组件元素下的一个div 只是有一个div包裹了多个div而已
that.$refs.clearEdit.clearEditCon('')
})
},
deleteCon(id){
var that = this;
that.$request('接口',{
id
}).then((res)=>{
that.$message({
message:'删除成功',
type:'success'
})
that.getData(that.pageNum)
})
},
checkCon(id){
var that = this;
that.help.index = 1;
that.help.dialogFromVisble = true;
that.$request('接口',{
id
}).then((res)=>{
that.help.title = res.data[0].name
that.help.con = res.data[0].con
})
},
点击取消按钮也要清空
cancel(){
var that = this;
that.help.title = '';
that.help.dialogFromVisble = false;
if (that.help.index == 0) {
that.$refs.clearEdit.clearEditCon('');
}
},
存到数据库是html代码块 但是显示需要转成文本内容
ToText(HTML){
var con = HTML.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replace(/\s+/g,' ').replace(/ /g,' ').replace(/>/g,' ').replace(/ /g,' ');
return con;
}
}
}
</script>
<style>
</style>
浙公网安备 33010602011771号