{"rsdb":{"rid":"372580","subhead":"","postdate":"0","aid":"261525","fid":"107","uid":"1","topic":"1","content":"<div id=\"cnblogs_post_body\" class=\"blogpost-body \"> \n <p>\u8fd1\u671f\u9700\u8981\u5728vue3\u9879\u76ee\u4e0a\u505a\u4e00\u4e2a\u5bcc\u6587\u672c\u7f16\u8f91\u5668\uff0c\u627e\u4e86\u5f88\u591a\u63d2\u4ef6\u7ec4\u4ef6\uff0c\u6700\u7ec8\u51b3\u5b9a\u7528 froala\u3002\u867d\u7136\u4e0d\u662f\u514d\u8d39\u7684\uff0c\u4f46\u662f\u529f\u80fd\u5b9e\u5728\u662f\u592a\u5f3a\u5927\u4e86\u3002<\/p> \n <p>froala \u6587\u6863\uff1a<a>https:\/\/www.froala.com\/wysiwyg-editor\/docs\/overview<\/a><\/p> \n <p>froala \u5b98\u65b9demo\uff1a&nbsp;<a>https:\/\/www.froala.com\/wysiwyg-editor\/examples<\/a><\/p> \n <p>\u4e0b\u9762\u4ecb\u7ecd\u5728vue3.\u4e2d\u5982\u4f55\u5b89\u88c5\u4f7f\u7528froala\u3002<\/p> \n <p><strong>Step1\uff1a<\/strong><\/p> \n <p>\u3000\u3000froala \u4f9d\u8d56\u4e8ejQuery\u3002\u6240\u4ee5\u8981\u5b89\u88c5jQuery\uff1b<\/p> \n <div class=\"cnblogs_code\"> \n  <pre>yarn add jquery <br \/>\u6216\u8005 <br \/>npm install jquery --save<\/pre> \n <\/div> \n <p>\u3000\u3000froala \u4f9d\u8d56\u4e8e babel-runtime\u3002\u6240\u4ee5\u4e5f\u8981\u5b89\u88c5\u3002<\/p> \n <div class=\"cnblogs_code\"> \n  <pre>yarn add babel-runtime@6.26.0<br \/>\u6216\u8005<br \/>npm install babel-runtime@6.26.0 --save<\/pre> \n <\/div> \n <p><strong>Step2:<\/strong><\/p> \n <p><strong>\u3000\u3000 <\/strong>\u5b89\u88c5froala-editor \u548c&nbsp;&nbsp;vue-froala-wysiwyg\u3002<\/p> \n <div class=\"cnblogs_code\"> \n  <pre>yarn add froala or npm install froala-editor --<span style=\"color: #000000;\">save  <br \/>\r\nyarn add vue<\/span>-froala-wysiwyg or npm i vue-froala-wysiwyg --save<\/pre> \n <\/div> \n <p><strong>Step3\uff1a<\/strong><\/p> \n <p>\u5728main.js \u91cc\u5f15\u5165jQuery\u3002<\/p> \n <div class=\"cnblogs_Highlighter\"> \n  <pre class=\"brush:java script;gutter:true;\">import jquery from 'jquery'\r\nwindow.jquery = window.$ = jquery<\/pre> \n <\/div> \n <p>\u5728main.js\u91cc\u5f15\u5165froala\u76f8\u5173\u7684\u6587\u4ef6\u5e76\u4e14\u8fdb\u884c\u76f8\u5e94\u7684\u914d\u7f6e\u3002<\/p> \n <div class=\"cnblogs_Highlighter\"> \n  <pre class=\"brush:java script;gutter:true;\">require('froala-editor\/js\/froala_editor.pkgd.min')\r\nrequire('froala-editor\/css\/froala_editor.pkgd.min.css')\r\nrequire('font-awesome\/css\/font-awesome.css')\r\nrequire('froala-editor\/css\/froala_style.min.css')\r\n\r\nimport VueFroala from 'vue-froala-wysiwyg'\r\nVue.use(VueFroala)\r\n<\/pre> \n <\/div> \n <p><strong>Step4 :&nbsp;<\/strong><\/p> \n <p>\u8fd9\u4e2a\u65f6\u5019\u5c31\u53ef\u4ee5\u4f7f\u7528froala\u8fd9\u4e2a\u7ec4\u4ef6\u5566~\u3002<\/p> \n <p>\u5728\u67d0\u4e2a.vue\u6587\u4ef6\u4e2d\uff1a<\/p> \n <div class=\"cnblogs_code\"> \n  <pre>&lt;template&gt;\r\n  &lt;div&gt;\r\n    &lt;froala :tag=&quot;'textarea'&quot; :config=&quot;config&quot; v-model=&quot;model&quot;&gt;&lt;\/froala&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/template&gt;\r\n\r\n&lt;script&gt;<span style=\"color: #000000;\">\r\nimport VueFroala from <\/span>'vue-froala-wysiwyg'<span style=\"color: #000000;\">;\r\n\r\nexport <\/span><span style=\"color: #0000ff;\">default<\/span><span style=\"color: #000000;\"> {\r\n  name: <\/span>'app'<span style=\"color: #000000;\">,\r\n  data () {\r\n    <\/span><span style=\"color: #0000ff;\">return<\/span><span style=\"color: #000000;\"> {\r\n      config: {\r\n        events: {\r\n          <\/span>'froalaEditor.initialized': <span style=\"color: #0000ff;\">function<\/span><span style=\"color: #000000;\"> () {\r\n            console.log(<\/span>'initialized'<span style=\"color: #000000;\">)\r\n          }\r\n        }\r\n      },\r\n      model: <\/span>'Edit Your Content Here!'<span style=\"color: #000000;\">\r\n    }\r\n  }\r\n}\r\n<\/span>&lt;\/script&gt;<\/pre> \n <\/div> \n <p>\u5176\u4ed6\u76f8\u5173\u7684config\u914d\u7f6e \u548c \u4e8b\u4ef6\u64cd\u4f5c \u53ef\u4ee5\u67e5\u770b\u6587\u6863\u3002<\/p> \n <p>&nbsp;<\/p> \n<\/div>","orderid":"0","title":"vue-froala-wysiwyg \u5bcc\u6587\u672c\u7f16\u8f91\u5668","smalltitle":"","mid":"0","fname":"Web","special_id":"0","bak_id":"0","info":"0","hits":"47","pages":"1","comments":"0","posttime":"2019-09-19 11:11:48","list":"1568862708","username":"admin","author":"","copyfrom":"","copyfromurl":"","titlecolor":"","fonttype":"0","titleicon":"0","picurl":"https:\/\/www.cppentry.com\/upload_files\/","ispic":"0","yz":"1","yzer":"","yztime":"0","levels":"0","levelstime":"0","keywords":"<A HREF='https:\/\/www.cppentry.com\/do\/search.php?type=keyword&keyword=vue-froala-wysiwyg' target=_blank>vue-froala-wysiwyg<\/A> <A HREF='https:\/\/www.cppentry.com\/do\/search.php?type=keyword&keyword=%CE%C4%B1%BE' target=_blank>\u6587\u672c<\/A> <A HREF='https:\/\/www.cppentry.com\/do\/search.php?type=keyword&keyword=%B1%E0%BC%AD%C6%F7' target=_blank>\u7f16\u8f91\u5668<\/A>","jumpurl":"","iframeurl":"","style":"","template":"a:3:{s:4:\"head\";s:0:\"\";s:4:\"foot\";s:0:\"\";s:8:\"bencandy\";s:0:\"\";}","target":"0","ip":"14.17.22.32","lastfid":"0","money":"0","buyuser":"","passwd":"","allowdown":"","allowview":"","editer":"","edittime":"0","begintime":"0","endtime":"0","description":"vue-froala-wysiwyg \u5bcc\u6587\u672c\u7f16\u8f91\u5668","lastview":"1711907191","digg_num":"0","digg_time":"0","forbidcomment":"0","ifvote":"0","heart":"","htmlname":"","city_id":"0"},"page":"1"}