经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
vue-froala-wysiwyg 富文本编辑器
来源:cnblogs  作者:筱狐狸624  时间:2019/9/19 9:12:27  对本文有异议

近期需要在vue3项目上做一个富文本编辑器,找了很多插件组件,最终决定用 froala。虽然不是免费的,但是功能实在是太强大了。

froala 文档:https://www.froala.com/wysiwyg-editor/docs/overview

froala 官方demo: https://www.froala.com/wysiwyg-editor/examples

下面介绍在vue3.中如何安装使用froala。

Step1:

  froala 依赖于jQuery。所以要安装jQuery;

  1. yarn add jquery
    或者
    npm install jquery --save

  froala 依赖于 babel-runtime。所以也要安装。

  1. yarn add babel-runtime@6.26.0
    或者
    npm install babel-runtime@6.26.0 --save

Step2:

   安装froala-editor 和  vue-froala-wysiwyg。

  1. yarn add froala or npm install froala-editor --save
  2. yarn add vue-froala-wysiwyg or npm i vue-froala-wysiwyg --save

Step3:

在main.js 里引入jQuery。

  1. import jquery from 'jquery'
  2. window.jquery = window.$ = jquery

在main.js里引入froala相关的文件并且进行相应的配置。

  1. require('froala-editor/js/froala_editor.pkgd.min')
  2. require('froala-editor/css/froala_editor.pkgd.min.css')
  3. require('font-awesome/css/font-awesome.css')
  4. require('froala-editor/css/froala_style.min.css')
  5.  
  6. import VueFroala from 'vue-froala-wysiwyg'
  7. Vue.use(VueFroala)

Step4 : 

这个时候就可以使用froala这个组件啦~。

在某个.vue文件中:

  1. <template>
  2. <div>
  3. <froala :tag="'textarea'" :config="config" v-model="model"></froala>
  4. </div>
  5. </template>
  6.  
  7. <script>
  8. import VueFroala from 'vue-froala-wysiwyg';
  9. export default {
  10. name: 'app',
  11. data () {
  12. return {
  13. config: {
  14. events: {
  15. 'froalaEditor.initialized': function () {
  16. console.log('initialized')
  17. }
  18. }
  19. },
  20. model: 'Edit Your Content Here!'
  21. }
  22. }
  23. }
  24. </script>

其他相关的config配置 和 事件操作 可以查看文档。

 

原文链接:http://www.cnblogs.com/ordinary-yolanda/p/11543833.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号