tiptap 属性

tiptap 拥有 isEditable 和 isEmpty 两个属性，一个表示是否可编辑一个表示编辑器是否有内容。

isEditable

返回true表示编辑器可编辑，false表示不可编辑

let res=editor.isEditable;
// 设置编辑器只读
editor.setEditable(false);
// 设置编辑器可编辑
editor.setEditable(true)

isEmpty

返回编辑器是否有内容，有返回true没有返回false

let res=editor.isEmpty;

vue3 例子

<template>
  <div class="editor">
    <div class="tools"> 
      <label @click="getIsEditable">isEditable</label>
      <label @click="getIsEmpty">isEmpty</label> 
    </div>
    <editor-content :editor="state.editor" />
    <div>
      <code>
        {{ state.result }}
      </code>
    </div>
  </div>
</template>
<script setup lang="ts">
/*
 tiptap 中文文档
 https://www.itxst.com/tiptap/tutorial.html
*/
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { Editor, EditorContent } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit";
import Color from "@tiptap/extension-color";
import TextStyle from "@tiptap/extension-text-style";
const state = reactive({
  editor: new Editor({
    content: "<p>Tiptap 中文文档</p>",
    extensions: [
      StarterKit,
      TextStyle,
      Color.configure({
        types: ["textStyle"],
      }),
    ],
    autofocus: true,
    editable: true,
    injectCSS: false,
  }) as any,
  result: "",
});

onMounted(() => {
  setTimeout(() => {
    state.editor.commands.setContent(
      "<p>Tiptap 中文文档 <br> https://www.itxst.com</p>",
      false
    );
    //console.log(state.editor.getJSON());
  }, 3000);
});
//返回true表示编辑器可编辑，false表示不可编辑
const getIsEditable = () => {
  state.result= state.editor.isEditable;
};
//isEmpty
const getIsEmpty = () => {
  state.result= state.editor.isEmpty;
};
 
</script>
<style scoped>
.editor {
  margin: 10px 20px;
  width: 390px;
}
.editor:deep(.ProseMirror) {
  color: red;
  border: solid 1px #ddd;
  padding: 0px 6px;
}
.tools {
  display: flex;
  background-color: #eee;
  padding: 6px;
  justify-items: center;
}
.tools > label {
  color: #1512e6;
  cursor: pointer;
}
.tools > label + label {
  margin-left: 10px;
}
</style>

下载教程 Demo

本教程Demo的源码点击这里下载，Tiptap Demo，下载完成后运行npm i初始化依赖包。