Editor编辑器(三上)自定义脚本关联编辑器-基础

本文介绍了如何在Unity中使用CustomEditor关联并自定义脚本编辑器,通过EditorGUILayout实现编辑器界面的自动布局。讲解了CustomEditor的用法以及EditorGUILayout的区别和应用场景,并提供了基本的布局代码示例。
摘要由CSDN通过智能技术生成

Chinar blog www.chinar.xin

Editor编辑器(三上)自定义脚本关联编辑器-基础


本文提供全流程,中文翻译。

Chinar 的初衷是将一种简单的生活方式带给世人

使有限时间 具备无限可能

Chinar —— 心分享、心创新!

助力快速完成 Unity 服务器的购买、配置、以及网站的搭建

为初学者节省宝贵的时间,避免采坑!


全文高清图片,点击即可放大观看 (很多人竟然不知道)


1

CustomEditor —— 关联你需要编辑的脚本


CustomEditor —— 用于关联你要自定义的脚本

1:既然要关联就需要一个正常继承 MonBehaviour的脚本

2:需要一个制作自定义编辑器的脚本,该脚本需要放在Editor文件夹中,并且要继承Editor

1:正常继承MonoBehaviour的脚本

 public class Chinar : MonoBehaviour
{
   
    public int a;//字段a
    public string b;//字段b
}

不关联自定义脚本前在 Inspector 如下所示:
在这里插入图片描述
下面我们在Editor文件夹在建立一个新的脚本名字教ChinarEditor 的脚本(上面说过了)

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEditor;
[CustomEditor(typeof(Chinar))]//关联脚本Chinar
public class ChinarEditor : Editor//自定义编辑器需要继承Editor
{
   
    Chinar chinar;
//在Editor类中OnEnable与MonoBehaviour的OnEnable不一样
//MonoBehaviour-OnEnable调用条件1脚本初始化,2脚本绑定的gameObject setActive(flase)后再setActive(true)调用
//Editor-OnEnable调用条件1每次切换后台程序重新进入Unity引擎时。2点击绑定关联脚本的GameObject时3我们点击Inspector
//后接着点击其他模块(例如scene面板)后会调用一次
    private void OnEnable()
    {
   
        chinar = (Chinar) target; //获取当前编辑自定义Inspector的对象(官方解释授检查的对象)
    }

    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element UI的vue-quill-editor富文本编辑器支持插入图片,但是默认的图片上传功能可能不能满足所有需求,需要进行自定义。 首先,在vue-quill-editor的配置中添加`imageHandler`方法,用于处理图片上传: ```javascript <template> <quill-editor v-model="content" :options="editorOption"></quill-editor> </template> <script> import { quillEditor } from 'vue-quill-editor' export default { components: { quillEditor }, data () { return { content: '', editorOption: { imageHandler: this.imageHandler // 添加imageHandler方法 } } }, methods: { imageHandler () { // 处理图片上传 } } } </script> ``` 然后,可以使用第三方上传组件(如`el-upload`)进行图片上传,上传完成后将图片地址返回给`quill-editor`。可以在`imageHandler`方法中实现该逻辑: ```javascript <template> <div> <el-upload class="upload-demo" :action="uploadUrl" :on-success="handleSuccess" :show-file-list="false" :headers="headers" ref="upload" > <el-button size="small" type="primary">上传图片</el-button> </el-upload> </div> </template> <script> import { quillEditor } from 'vue-quill-editor' import { mapGetters } from 'vuex' export default { components: { quillEditor }, data () { return { content: '', editorOption: { imageHandler: this.imageHandler }, uploadUrl: 'https://www.example.com/upload' // 图片上传地址 } }, computed: { ...mapGetters(['getToken']) // 获取token }, methods: { imageHandler () { const self = this const uploadImg = this.$refs.upload uploadImg.click() uploadImg.$refs.input.onchange = function () { const file = uploadImg.$refs.input.files[0] const formData = new FormData() formData.append('file', file) self.$axios.post(self.uploadUrl, formData, { headers: { 'Authorization': self.getToken // 设置token } }).then(res => { const url = res.data.url // 获取图片地址 const editor = self.$refs.editor.quill // 获取quill对象 const index = (editor.getSelection() || {}).index || editor.getLength() editor.insertEmbed(index, 'image', url) // 插入图片 }).catch(err => { console.log(err) }) } } } } </script> ``` 在这个例子中,使用了`el-upload`组件进行图片上传,上传完成后将图片地址返回给`quill-editor`。在`imageHandler`方法中,通过`this.$refs.editor.quill`获取到了`quill`对象,然后调用`insertEmbed`方法插入图片。 需要注意的是,由于`quill`对象是异步创建的,所以需要在`mounted`生命周期中获取到`quill`对象才能进行图片插入。可以使用`$nextTick`方法来确保获取到了`quill`对象: ```javascript <template> <quill-editor v-model="content" :options="editorOption" ref="editor"></quill-editor> </template> <script> import { quillEditor } from 'vue-quill-editor' export default { components: { quillEditor }, data () { return { content: '', editorOption: { imageHandler: this.imageHandler } } }, mounted () { this.$nextTick(() => { // 获取quill对象 const editor = this.$refs.editor.quill // 在quill对象中添加图片上传功能 editor.getModule('toolbar').addHandler('image', () => { this.$refs.upload.click() }) }) }, methods: { imageHandler () { // 处理图片上传 } } } </script> ``` 在这个例子中,通过`editor.getModule('toolbar').addHandler`方法,在`quill`对象中添加了一个`image`按钮,点击该按钮时触发了上传图片的逻辑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值