How to use the tiptap.Editor function in tiptap

To help you get started, we’ve selected a few tiptap examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github scrumpy / tiptap / examples / Components / Routes / Collaboration2 / index.vue View on Github external
initEditor({ doc, version }) {
      if (this.editor) {
        this.editor.destroy()
      }

      this.editor = new Editor({
        content: doc,
        extensions: [
          new Collab({
            version,
            clientID: this.clientID,
          }),
        ],
        // onTransaction: transaction => {
        //   console.log('onTransaction')
        //   this.newState = this.editor.state.apply(transaction)
        //   this.editor.view.updateState(this.state.edit)
        //   return false
        // },
        onUpdate: ({ state }) => {
          this.getSendableSteps(state)
        },
github iliyaZelenko / tiptap-vuetify / src / components / TiptapVuetify.vue View on Github external
})
    const extensions = [
      ...this[PROPS.NATIVE_EXTENSIONS],
      ...nativeExtensionsInstances
    ]

    if (this[PROPS.PLACEHOLDER]) {
      // !!!!!!!!!!!!!!!!! TODO ONLY FOR TEST (update: не помню что это, возможно и не нужно убирать код ниже)
      extensions.push(new Placeholder({
        emptyNodeClass: 'tiptap-vuetify-editor__paragraph--is-empty',
        emptyNodeText: this[PROPS.PLACEHOLDER],
        showOnlyWhenEditable: true
      }))
    }

    this.editor = new Editor({
      extensions,
      ...this[PROPS.EDITOR_PROPERTIES],
      content: this[PROPS.VALUE],
      onUpdate: this.onUpdate.bind(this)
    })

    this.$emit(EVENTS.INIT, {
      editor: this.editor
    })
  }
github scrumpy / tiptap / examples / Components / Routes / Collaboration / index.vue View on Github external
onInit({ doc, version }) {
      this.loading = false

      if (this.editor) {
        this.editor.destroy()
      }

      this.editor = new Editor({
        content: doc,
        extensions: [
          new HardBreak(),
          new Heading({ levels: [1, 2, 3] }),
          new Bold(),
          new Code(),
          new Italic(),
          new History(),
          new Collaboration({
            // the initial version we start with
            // version is an integer which is incremented with every change
            version,
            // debounce changes so we can save some requests
            debounce: 250,
            // onSendable is called whenever there are changed we have to send to our server
            onSendable: ({ sendable }) => {
github Human-Connection / Human-Connection / webapp / components / Editor / Editor.vue View on Github external
created() {
    this.editor = new Editor({
      content: this.value || '',
      doc: this.doc,
      extensions: [
        // Hashtags must come first, see
        // https://github.com/scrumpy/tiptap/issues/421#issuecomment-523037460
        ...this.optionalExtensions,
        ...defaultExtensions(this),
        new EventHandler(),
        new History(),
      ],
      onUpdate: e => {
        clearTimeout(throttleInputEvent)
        throttleInputEvent = setTimeout(() => this.onUpdate(e), 300)
      },
    })
  },
github scrumpy / tiptap / examples / Components / Routes / CodeHighlighting / index.vue View on Github external
data() {
    return {
      editor: new Editor({
        extensions: [
          new CodeBlockHighlight({
            languages: {
              javascript,
              css,
            },
          }),
          new HardBreak(),
          new Heading({ levels: [1, 2, 3] }),
          new Bold(),
          new Code(),
          new Italic(),
        ],
        content: `
          <h2>
            Code Highlighting</h2>
github scrumpy / tiptap / examples / Components / Routes / Links / index.vue View on Github external
data() {
    return {
      editor: new Editor({
        extensions: [
          new Blockquote(),
          new BulletList(),
          new CodeBlock(),
          new HardBreak(),
          new Heading({ levels: [1, 2, 3] }),
          new ListItem(),
          new OrderedList(),
          new TodoItem(),
          new TodoList(),
          new Link(),
          new Bold(),
          new Code(),
          new Italic(),
          new History(),
        ],
github scrumpy / tiptap / examples / Components / Routes / MarkdownShortcuts / index.vue View on Github external
data() {
    return {
      editor: new Editor({
        extensions: [
          new Blockquote(),
          new BulletList(),
          new CodeBlock(),
          new HardBreak(),
          new Heading({ levels: [1, 2, 3] }),
          new ListItem(),
          new OrderedList(),
          new TodoItem(),
          new TodoList(),
          new Bold(),
          new Code(),
          new Italic(),
          new Link(),
          new History(),
        ],
github Human-Connection / Human-Connection / webapp / components / Editor / index.vue View on Github external
data() {
    return {
      lastValueHash: null,
      editor: new Editor({
        content: this.value || '',
        doc: this.doc,
        extensions: [
          new EventHandler(),
          new Heading(),
          new HardBreak(),
          new Blockquote(),
          new BulletList(),
          new OrderedList(),
          new HorizontalRule(),
          new Bold(),
          new Italic(),
          new Strike(),
          new Underline(),
          new Link(),
          new Heading({ levels: [3, 4] }),
github gitlabhq / gitlabhq / app / assets / javascripts / content_editor / services / create_editor.js View on Github external
const createEditor = async ({
  content,
  renderMarkdown,
  serializer: customSerializer,
  ...options
} = {}) => {
  if (!customSerializer && !isFunction(renderMarkdown)) {
    throw new Error(PROVIDE_SERIALIZER_OR_RENDERER_ERROR);
  }

  const editor = new Editor({
    extensions: [
      new Bold(),
      new Italic(),
      new Code(),
      new Link(),
      new Image(),
      new Heading({ levels: [1, 2, 3, 4, 5, 6] }),
      new Blockquote(),
      new HorizontalRule(),
      new BulletList(),
      new ListItem(),
      new OrderedList(),
      new CodeBlockHighlight(),
      new HardBreak(),
    ],
    editorProps: {
github area17 / twill / frontend / js / components / WysiwygTiptap.vue View on Github external
extensions.push(new CodeBlock())
            break
          }
          case 'table': {
            extensions.push(new Table({
              resizable: false
            }))
            extensions.push(new TableHeader())
            extensions.push(new TableCell())
            extensions.push(new TableRow())
            break
          }
        }
      })

      this.editor = new Editor({
        extensions: extensions,
        content: content,
        onUpdate: ({ getHTML }) => {
          this.value = getHTML()
          this.textUpdate()
          this.updateCounter()
        }
      })

      this.updateCounter()
    },
    beforeDestroy () {

tiptap

A rich-text editor for Vue.js

MIT
Latest version published 3 years ago

Package Health Score

71 / 100
Full package analysis