描述

示例： register_inline_tool(tool_type, options)

功能： 注册 richText inline tools 类型

参数

tool_type (String) (Required) richText inline tools类型关键字

options (Object) (Required)

tool (VueComponent) (Required) 编辑器toolbar显示的内容

(Void) 无

options.tool

编辑器 toolbar 显示的 Vue.js 组件。

Expose

名称	类型	说明
checkState	(selection)=>void	选中范围改变或Toolbar显示时，检查工具栏按钮活动状态的回调

示例

// 若非打包：在运行时不能import vue文件
// 此时可使用 nv.Vue._defineRemoteComponent 来引入url地址上的vue文件

// 若打包：需自行配置 webpack 或使用 vue-cli 来加载 vue 文件进行打包
// 打包时需注意：vue全部模块已经包含在 window.nv.Vue 中了，打包时合理配置外部扩展(Externals)可缩小打包体积并防止引入多个vue出现异常。

import BOLD  from "./bold.vue"
nv.editor.inlineTools.register_inline_tool("bold", {
    tool: BOLD,
})

bold.vue

<template>
    <button
    class="nvbe-toolbar__inline-button"
    data-nvbe-tooltip="加粗"
    :class="{'is-active': state_REF}"
    @click="handleClick"
    >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="12"><path d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"/></svg>
    </button>
</template>

<script setup>
var {getAncestorNode,unwrapNode,selectNode} = nv.editor.selection;
var {ref} = nv.Vue;
var TAG = "B";
var state_REF = ref(false);

var handleCheckState = selection => {
    // 判断当前选中的部分是否已经被处理过了
    var bold = getAncestorNode(TAG);
    var is_active = !!bold;
    state_REF.value = is_active;
}
var handleClick = ()=>{
    var selection = getSelection();
    var range = selection.getRangeAt(0);
    let termWrapper = getAncestorNode(TAG);
    if (termWrapper) {
        unwrapNode(termWrapper)
    } else if (selection.type == "Range") {
        wrap(range);
    }
}
var wrap = range =>{
    let span = document.createElement(TAG);
    span.appendChild(range.extractContents());
    range.insertNode(span);
    selectNode(span);
}

defineExpose({
    checkState: handleCheckState,
})
</script>