tui.editor所见即所得编辑器的使用

1. 官网网址

官网:https://nhn.github.io/tui.editor/latest/tutorial-example01-editor-basic
git: https://github.com/nhn/tui.editor/releases

2. vue中使用cnpm下载及引用

npm install --save @toast-ui/editor

2.1 页面引用

2.1.1 首先,您需要添加将在其中创建TOAST UI Editor(以下称为“ Editor”)的容器元素。
<body>
  <div id="editorChange"></div>
</body>
2.1.2 dom的使用
<script>
  import 'codemirror/lib/codemirror.css'; // Editor's Dependency Style
  import '@toast-ui/editor/dist/toastui-editor.css'; // Editor's Style
  import Editor from '@toast-ui/editor';
</script>
mounted () {
	const editor = new Editor({
        el: document.querySelector('#editorChange'), //定义的编辑器id
        previewStyle: 'vertical', // Markdown模式的预览样式
        initialEditType: 'markdown',  //显示的初始类型
        height: '500px', //编辑器高度
        initialValue: 'The first and last buttons are customized.',  //编辑器内容
        //编辑器菜单栏
        toolbarItems: [
          'heading',
          'bold',
          'italic',
          'strike',
          'divider',
          'hr',
          'quote',
          'divider',
          'ul',
          'ol',
          'task',
          'indent',
          'outdent',
          'divider',
          'table',
          'image',
          'link',
          'divider',
          'code',
          'codeblock',
          'divider',
        ]
      });
      //创建编辑器
      editor.getHtml()
}

3.效果图

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值