47 |
47 | 
47 | 
48 | 
new Vditor('vditor', {
72 | height: 360
73 | })
74 | new Vditor('vditor', {
69 | height: 360
70 | })
71 | new Vditor('vditor', { mode: 'sv', height: 360 });
77 | new Vditor('vditor', {
80 | height: 360
81 | })
82 | 1.创建项目并添加vditor库
$ ng new PROJECT_NAME
67 | $ cd PROJECT_NAME
68 | $ npm install vditor --save
69 | 2.在angular.json添加vditor样式表
{
72 | ...
73 | "styles":[
74 | ...,
75 | "node_modules/vditor/src/assets/less/index.less"
76 | ]
77 | }
78 | 3.在app.component.html中添加代码
<div id="vditor"></div>
81 | 4.在 app.component.ts中添加代码
import {Component, OnInit} from '@angular/core';
84 | import Vditor from 'vditor';
85 |
86 | @Component({
87 | selector: 'app-root',
88 | templateUrl: './app.component.html',
89 | })
90 |
91 | export class AppComponent implements OnInit{
92 | vditor: Vditor;
93 |
94 | ngOnInit(): void {
95 | this.vditor = new Vditor('vditor', {
96 | height: 360,
97 | toolbarConfig: {
98 | pin: true,
99 | },
100 | cache: {
101 | enable: false,
102 | },
103 | after: () => {
104 | this.vditor.setValue('Hello, Vditor + Angular!');
105 | }
106 | });
107 | }
108 | }
109 |
110 | new Vditor('vditor', {
74 | mode: 'sv',
75 | cache: {
76 | enable: false
77 | },
78 | height: 360,
79 | value: '所见即所得模式对不熟悉 Markdown 的用户较为友好，熟悉 Markdown 的话也可以无缝使用。'
80 | })
81 | new Vditor('vditor', {
84 | typewriterMode: true,
85 | height: 360,
86 | })
87 | new Vditor('vditor', {
76 | height: 360,
77 | cache: {
78 | enable: false,
79 | },
80 | value: '可选图标：ant, material',
81 | })
82 | new Vditor('vditor', {
72 | height: 360,
73 | lang: 'zh_CN'
74 | })
75 | new Vditor('vditor', {
83 | cache: {
84 | enable: false,
85 | },
86 | value: '可选模式：sv, ir, wysiwyg',
87 | })
88 | new Vditor('vditor')
76 | new Vditor('vditor', {
65 | toolbarConfig: {
66 | pin: true
67 | },
68 | counter: {
69 | enable: true
70 | },
71 | height: window.innerHeight / 2,
72 | toolbar: [
73 | 'emoji',
74 | 'link',
75 | 'upload',
76 | 'edit-mode',
77 | {
78 | name: 'more',
79 | toolbar: [
80 | 'insert-after',
81 | 'fullscreen',
82 | 'preview',
83 | 'info',
84 | 'help',
85 | ],
86 | },
87 | ],
88 | })
89 | new Vditor('vditor', {
65 | toolbarConfig: {
66 | pin: true,
67 | },
68 | height: 360,
69 | counter: {
70 | enable: true,
71 | max: 1024,
72 | },
73 | })
74 |
75 | new Vditor('vditor2', {
76 | height: 200,
77 | counter: {
78 | enable: true,
79 | max: 512,
80 | },
81 | })
82 | new Vue({
66 | el: '#app',
67 | data: {
68 | contentEditor: '',
69 | },
70 | mounted () {
71 | this.contentEditor = new Vditor('vditor', {
72 | height: 360,
73 | toolbarConfig: {
74 | pin: true,
75 | },
76 | cache: {
77 | enable: false,
78 | },
79 | after: () => {
80 | this.contentEditor.setValue('hello, Vditor + Vue!')
81 | },
82 | })
83 | },
84 | })
85 | ${code}
32 | `
33 | Vditor.highlightRender({lineNumber: true, enable: true}, demoCodeElement, "https://cdn.jsdelivr.net/npm/vditor")
34 | Vditor.codeRender(demoCodeElement)
35 | }
36 |
37 | const autoType = () => {
38 | const typeElement = document.getElementById('autoType')
39 | if (!typeElement) {
40 | return
41 | }
42 | const texts = [
43 | '实现 CommonMark 和 GFM 规范',
44 | '支持数学公式、图表、五线谱、脑图等14+渲染',
45 | '所见即所得（wysiwyg）',
46 | '即时渲染（ir）',
47 | '分屏预览（sv）',
48 | '易于使用的 Markdown 编辑器，为适配不同的应用场景而生',
49 | ]
50 | let textLength = 0
51 | let time = 0
52 | texts.forEach((text, i) => {
53 | if (i > 0) {
54 | textLength += text[i - 1].length + 20
55 | }
56 | for (let j = 0; j < text.length; j++) {
57 | time += 200
58 | setTimeout(() => {
59 | typeElement.innerHTML = text.substr(0, j + 1) +
60 | ``
63 | }, time)
64 | }
65 | if (i !== texts.length - 1) {
66 | time += 2000
67 | for (let k = 0; k < text.length; k++) {
68 | time += 50
69 | setTimeout(() => {
70 | typeElement.innerHTML = typeElement.textContent.substr(0,
71 | typeElement.textContent.length - 1) + ''
72 | }, time)
73 | }
74 | } else {
75 | setTimeout(() => {
76 | document.querySelector('.caret').style.animationName = 'flash'
77 | }, time + 1)
78 | }
79 | })
80 | }
81 |
82 | addStyle('https://cdn.jsdelivr.net/npm/vditor@3.9.7/dist/index.css')
83 | document.addEventListener('DOMContentLoaded', function () {
84 | autoType();
85 |
86 | if (document.getElementById('vditorComments')) {
87 | addScript('https://cdn.jsdelivr.net/npm/vditor@3.9.7/dist/index.min.js',
88 | () => {
89 | const demoCodeElement = document.getElementById('vditorDemoCode')
90 | if (demoCodeElement) {
91 | Vditor.highlightRender({lineNumber: true, enable: true},
92 | demoCodeElement, "https://cdn.jsdelivr.net/npm/vditor")
93 | Vditor.codeRender(demoCodeElement)
94 | }
95 | if (typeof vditorScript !== 'undefined') {
96 | vditorScript()
97 | }
98 | addScript(
99 | 'https://cdn.jsdelivr.net/npm/vcmt@1.3.2/dist/index.min.js',
100 | () => {
101 | const vcomment = new Vcomment({
102 | id: 'vditorComments',
103 | postId: '1549638745630',
104 | url: 'https://ld246.com',
105 | userName: 'Vanessa',
106 | currentPage: 1,
107 | vditor: {
108 | hljsEnable: true,
109 | hljsStyle: 'github',
110 | },
111 | after () {
112 | const commentCntElement = document.getElementById(
113 | 'commentsCount')
114 | document.getElementById(
115 | 'commentCnt').innerText = commentCntElement.innerText +
116 | ' 个讨论'
117 | commentCntElement.nextSibling.remove()
118 | commentCntElement.remove()
119 | },
120 | error () {
121 | document.getElementById('comments').remove()
122 | },
123 | })
124 |
125 | vcomment.render()
126 | })
127 | })
128 | }
129 |
130 | const dynamicElement = document.getElementById('dynamic')
131 | if (dynamicElement) {
132 | const xhr = new XMLHttpRequest()
133 | xhr.open('GET', 'https://ld246.com/api/index/articles/tag/vditor?p=1')
134 | xhr.withCredentials = true
135 | xhr.onreadystatechange = () => {
136 | if (xhr.readyState === XMLHttpRequest.DONE) {
137 | if (xhr.status === 200) {
138 | const responseJSON = JSON.parse(xhr.responseText)
139 | const articles = responseJSON.data.articles
140 | if (responseJSON.code !== 0 || 0 === articles.length) {
141 | dynamicElement.innerHTML = '无新闻'
142 | dynamicElement.style.backgroundImage = 'none'
143 | return
144 | }
145 |
146 | let listHTML = '