cherry-markdown编辑器使用简单案例

admin

cherry-markdown编辑器使用简单案例

• 引入cherry的css和js
• 定义编辑器要出现的区域（出现在哪个位置、宽度多少、高度多少等）
• 实例化cherry
  

下面是金黑分享的代码简单例子：

1. // 引入cherry的样式文件，样式文件包含编辑器样式、预览区样式，用户也可以自行覆盖
   
2. <link href="/dist/cherry-markdown.css" />
   
3. // 定义一个div，将cherry实例化到该div里
   
4. <div id="markdown-container" style="width:500px;height:600px"></div>
   
5. // 引入cherry的js文件
   
6. <script src="/dist/cherry-markdown.min.js"></script>
   
7. <script>
   
8.     // 方式一
   
9.     new Cherry({
   
10.         id: 'markdown-container',
    
11.         value: '## hello world',
    
12.     });
    
13.     // 方式二
    
14.     new Cherry({
    
15.         el: document.querySelector('#markdown-container'),
    
16.         value: '## hello world',
    
17.     });
    
18. </script>

复制代码