今天需要用到富文本编辑器,所以选择了Vue-Quill-Editor,网上大多都是npm使用介绍,而github上的cdn 演示又需要翻墙,所以这里给大家演示下如何通过cdn引入Vue-Quill-Editor使用。
在这里插入图片描述
引入

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Quill JS Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.4/quill.bubble.css" rel="stylesheet">

使用

<div id="vueapp">
  <quill-editor
    v-model="content"
  />
</div>
Vue.use(VueQuillEditor)
var vm = new Vue({
	 el: '#vueapp',
	 data: {
     	content: '',
     }
})

如果遇到了输入时首字母重复的问题,把版本更新到1.3.6就可以解决

Logo

前往低代码交流专区

更多推荐