隨著人們對於網站內容要求的不斷提高，網站的內容編輯和優化也變得越來越重要。為了能夠讓網站擁有更好的內容編輯和優化，我們可以使用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/zh-tw/n/303545.html
微信掃一掃 
支付寶掃一掃 