ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix basic example

Browse Source
This commit is contained in:
Philipp Kühn
2018-10-22 08:43:48 +02:00
parent b7bda1bae3
commit 9ec3d82d12
2 changed files with 128 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
examples/Components/Routes/Basic/index.vue
View File

@@ -1,8 +1,5 @@
<template>
<div>
<div class="editor">
<menu-bar class="menubar" :editor="editor">
<template slot-scope="{ nodes, marks }">
@@ -115,144 +112,6 @@
<editor-content class="editor__content" :editor="editor" />
</div>
<!-- <editor class="editor" :extensions="extensions">
<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
<div v-if="nodes && marks">
<button
class="menubar__button"
:class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command"
>
<icon name="bold" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command"
>
<icon name="italic" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': marks.strike.active() }"
@click="marks.strike.command"
>
<icon name="strike" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': marks.underline.active() }"
@click="marks.underline.command"
>
<icon name="underline" />
</button>
<button
class="menubar__button"
@click="marks.code.command"
:class="{ 'is-active': marks.code.active() }
">
<icon name="code" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active() }"
@click="nodes.paragraph.command"
>
<icon name="paragraph" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
@click="nodes.heading.command({ level: 1 })"
>
H1
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
@click="nodes.heading.command({ level: 2 })"
>
H2
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
@click="nodes.heading.command({ level: 3 })"
>
H3
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.bullet_list.active() }"
@click="nodes.bullet_list.command"
>
<icon name="ul" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.ordered_list.active() }"
@click="nodes.ordered_list.command"
>
<icon name="ol" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.blockquote.active() }"
@click="nodes.blockquote.command"
>
<icon name="quote" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }"
@click="nodes.code_block.command"
>
<icon name="code" />
</button>
</div>
</div>
<div class="editor__content" slot="content" slot-scope="props">
<h2>
Hi there,
</h2>
<p>
this is a very <em>basic</em> example of tiptap.
</p>
<pre><code>body { display: none; }</code></pre>
<ul>
<li>
A regular list
</li>
<li>
With regular items
</li>
</ul>
<blockquote>
It's amazing 👏
<br />
– mom
</blockquote>
</div>
</editor> -->
</div>
</template>
<script>
@@ -305,18 +164,28 @@ export default {
new UnderlineMark(),
new HistoryExtension(),
],
content: {
type: 'doc',
content: [{
type: 'paragraph',
content: [
{
type: 'text',
text: 'This is some inserted text. 👋',
},
],
}],
},
content: `
<h2>
Hi there,
</h2>
<p>
this is a very <em>basic</em> example of tiptap.
</p>
<pre><code>body { display: none; }</code></pre>
<ul>
<li>
A regular list
</li>
<li>
With regular items
</li>
</ul>
<blockquote>
It's amazing 👏
<br />
– mom
</blockquote>
`,
}),
}
},

26
packages/tiptap/src/utils/Editor.js
View File

@@ -133,7 +133,14 @@ export default class Editor {
return this.schema.nodeFromJSON(content)
}
// return DOMParser.fromSchema(this.schema).parse(this.contentNode.elm)
if (typeof content === 'string') {
const element = document.createElement('div')
element.innerHTML = content.trim()
return DOMParser.fromSchema(this.schema).parse(element)
}
return false
}
createView() {
@@ -187,25 +194,10 @@ export default class Editor {
return this.state.doc.toJSON()
}
getDocFromContent(content) {
if (typeof content === 'object') {
return this.schema.nodeFromJSON(content)
}
if (typeof content === 'string') {
const element = document.createElement('div')
element.innerHTML = content.trim()
return DOMParser.fromSchema(this.schema).parse(element)
}
return false
}
setContent(content = {}, emitUpdate = false) {
this.state = EditorState.create({
schema: this.state.schema,
doc: this.getDocFromContent(content),
doc: this.createDocument(content),
plugins: this.state.plugins,
})