描述
示例: 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显示时,检查工具栏按钮活动状态的回调 |
示例
注册 Bold inline tool
// 若非打包:在运行时不能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>