随着人们对于网站内容要求的不断提高，网站的内容编辑和优化也变得越来越重要。为了能够让网站拥有更好的内容编辑和优化，我们可以使用ueditor来实现。而使用ueditor来编辑网站内容的好处在于ueditor的灵活性和多样化，例如可以添加视频、图片等多媒体内容。本文将从多个方面对于AVue插件的使用ueditor来实现网站内容编辑和优化进行详细阐述。
一、开发环境
在使用ueditor插件之前，首先需要将AVue项目下载至本地，并安装vue-cli。然后，通过npm安装相应的插件：
<!-- 安装vue-ueditor-wrap -->
npm i vue-ueditor-wrap -S
<!-- 安装ueditor -->
npm i ueditor -S
<!-- 解决iOS环境问题 -->
npm install babel-plugin-transform-remove-strict-mode --save-dev
二、引入ueditor插件并进行配置
为了使用ueditor插件来编辑网站内容，需要在组件中引入相应的代码：
<!-- 引入ueditor代码 -->
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test ue</title>
<style>
*{margin:0;padding:0;}
</style>
<!-- 配置文件 -->
<script type="text/javascript" src="./static/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="./static/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="./static/ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<div id="editor" style="width:100%;height:520px;"></div>
<button id="btn"></button>
</body>
</html>
引入代码后，需要进行相关的配置，例如ueditor.config.js配置：
window.UEDITOR_HOME_URL = "/static/ueditor/";
module.exports = {
UEDITOR_HOME_URL: '/static/UEditor/',
configUrl: '/api/ueditor/getConfig',
imageUrl: '/api/ueditor/uploadImage',
imagePath: '',
videoUrl: '/api/ueditor/uploadVideo'
}
三、如何进行富文本编辑
使用ueditor插件进行富文本编辑非常简单。只需要在组件中引入相应的代码即可：
<template>
<div>
<vue-ueditor-wrap
v-model="editorContent"
:config="editorConfig"
:init="editorInit">
</vue-ueditor-wrap>
</div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap';
export default {
data() {
return {
editorContent: '',
editorConfig: {
// todo editor config
},
editorInit: {
// todo
}
}
},
components: {
'vue-ueditor-wrap': VueUeditorWrap
}
}
</script>
代码中的vue-ueditor-wrap组件需要在组件中进行引入，同时需要设置相应的参数：
- v-model: 绑定富文本编辑器的内容
- config: 配置ueditor的参数
- init: 编辑器初始化时的一些配置
四、将富文本内容渲染在页面上
在使用ueditor插件进行富文本编辑之后，需要将编辑器中的内容在网站中进行渲染。这需要使用v-html进行渲染：
<div v-html="editorContent"></div>
以上代码会将编辑器中的内容进行渲染，并且在网站中进行显示。
五、添加多媒体文件
ueditor插件不仅仅可以添加文本，还可以添加多媒体文件，如图片、视频等。首先，在ueditor.config.js中进行相关的配置：
// 配置图片模块
imageUrl: '/api/ueditor/uploadImage',
imagePath: '',
imageFieldName: 'file',
imageMaxSize: 2048000,
imageAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'],
imageCompressEnable: true,
imageCompressBorder: 1600,
imageInsertAlign: 'none',
imageUrlPrefix: '',
然后，在代码中加入相应的代码：
<template>
<div>
<el-button size="small" @click="insertImageDialogVisible = true">选择图片</el-button>
<el-dialog
title="插入图片"
:visible.sync="insertImageDialogVisible"
:append-to-body="true">
<el-form :model="insertImage" ref="insertImageForm" :rules="insertImageRules">
<el-form-item label="图片">
<el-upload
class="avatar-uploader"
name="avatar"
:show-file-list="false"
:before-upload="beforeUpload"
:action="imageAction"
:headers="headers"
v-model="insertImage.imageUrl">
<img v-if="insertImage.imageUrl" :src="insertImage.imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<el-button size="small" @click="insertImage.imageUrl = ''">移除图片</el-button>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="insertImageDialogVisible = false">取消</el-button>
<el-button size="small" type="primary" @click="insertImageHandler">插入</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
insertImageDialogVisible: false,
insertImage: {
imageUrl: ''
},
insertImageRules: {
imageUrl: [
{ required: true, message: '请选择图片', trigger: 'change' }
]
}
}
},
computed: {
imageAction() {
return `${process.env.VUE_APP_BASE_API}/aliyun/oss/policy/image`
},
headers() {
return {
Authorization: getToken()
}
}
},
methods: {
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传文件只能是 JPG 或 PNG 格式!');
return false;
}
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 2MB!');
return false;
}
return true
},
insertImageHandler() {
this.insertImageDialogVisible = false;
this.$refs['editor'].insertImg(this.insertImage.imageUrl)
}
}
}
</script>
以上代码中添加了一个选择图片的按钮，选择完图片后会弹出一个dialog，将选择的图片插入到ueditor插件中。
六、使用ueditor实现网站内容编辑和优化的完整代码：
<template>
<div>
<el-row>
<el-col :span="18">
<vue-ueditor-wrap
v-model="editorContent"
:config="editorConfig"
:init="editorInit"
ref="editor"
/>
</el-col>
<el-col :span="6">
<el-button size="small" @click="insertImageDialogVisible = true">选择图片</el-button>
<el-dialog
title="插入图片"
:visible.sync="insertImageDialogVisible"
:append-to-body="true">
<el-form :model="insertImage" ref="insertImageForm" :rules="insertImageRules">
<el-form-item label="图片">
<el-upload
class="avatar-uploader"
name="avatar"
:show-file-list="false"
:before-upload="beforeUpload"
:action="imageAction"
:headers="headers"
v-model="insertImage.imageUrl">
<img v-if="insertImage.imageUrl" :src="insertImage.imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<el-button size="small" @click="insertImage.imageUrl = ''">移除图片</el-button>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="insertImageDialogVisible = false">取消</el-button>
<el-button size="small" type="primary" @click="insertImageHandler">插入</el-button>
</span>
</el-dialog>
</el-col>
</el-row>
<el-button type="primary" @click="submit"></el-button>
</div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap';
export default {
data() {
return {
editorContent: '',
editorConfig: {
UEDITOR_HOME_URL: '/static/ueditor/',
serverUrl: '/api/ueditor/server',
toolbars: [
[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'strikethrough', 'blockquote', 'forecolor', 'backcolor', '|',
'fontfamily', 'fontsize', 'paragraph', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
'link', 'unlink', 'anchor', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', '|',
'simpleupload', 'insertimage', 'imagecrop', 'horizontal', 'date', 'time', 'spechars', '|',
'map', 'gmap', 'background', 'insertvideo', 'attachment', 'insertframe', '|',
'searchreplace', 'pasteplain', '|',
'preview', 'help', 'drafts'
]
],
autoHeightEnabled: true,
emotionLocalization: true,
elementPathEnabled: false,
enableContextMenu: false,
serverParam: {
csrf_token: '',
port: ''
}
},
editorInit: {
// mediaUrl: '/ueditor/php/controller.php?action=media',
// videoUrl: '/ueditor/php/controller.php?action=video',
// fileUrl: '/ueditor/php/controller.php?action=file'
},
insertImageDialogVisible: false,
insertImage: {
imageUrl: ''
},
insertImageRules: {
imageUrl: [
{ required: true, message: '请选择图片', trigger: 'change' }
]
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/303545.html
微信扫一扫 
支付宝扫一扫 