SegmentFault summernote的问题
2018-10-15T01:13:07+08:00
https://segmentfault.com/feeds/tag/summernote
https://creativecommons.org/licenses/by-nc-nd/4.0/
summernote insertImage 出現問題?
https://segmentfault.com/q/1010000016680206
2018-10-15T01:13:07+08:00
2018-10-15T01:13:07+08:00
火爆浪子
https://segmentfault.com/u/asys0512
0
<p><a href="https://link.segmentfault.com/?enc=GcSxPC%2BO7SwFe5%2F8vEa2Fg%3D%3D.XoLSlJbX2tBGrYuqrVErCNWyONC9A7pPPCFdFvqQ28%2FvhNHPaXdoS%2BUuWlAsaptj" rel="nofollow">https://summernote.org/deep-d...</a></p>
<pre><code>$('#summernote').summernote('insertImage', url, function ($image) {
$image.css('width', $image.width() / 3);
$image.attr('data-filename', 'retriever');
});</code></pre>
<p>他官方提供的 API是這樣做。<br>只是有個怪異的問題</p>
<pre><code> onImageUpload: function(files) {
sendFile(files[0]);
},</code></pre>
<p>$content 是我的編輯器~</p>
<pre><code>$content.summernote('insertImage', '/images/download.gif', function ($image) {
console.log('preview: ' + fileData);
$.ajax({
dataType: "json",
type: "POST",
url: "someurl",
data: data,
cache: false,
contentType: false,
processData: false,
enctype: 'multipart/form-data',
// timeout: timeoutVal,
success: function(data){
$image.attr('src', data.url);
}
});
});</code></pre>
<p>我是這樣使用他的 insertImage API<br>跟他上面寫的一樣<br>我可以成功利用 attr 替換已經上傳完成的圖片網址~這確定沒問題<br>只是假設上傳完成之後直接保存到數據庫時<br>即便他有成功替換 URL,他保存進去的網址卻還是 <code>/images/download.gif</code><br>除非<br>上傳完網址之後,等他 attr 替換成功時<br>必須要在編輯器內「動一下」,比如說按個回車之類的<br>然後保存進去的數據庫會是正確的網址。。。。這是什麼詭異問題?github也沒有人回我。。。</p>
summernote removeFormat ?清除格式该如何使用?
https://segmentfault.com/q/1010000016670277
2018-10-13T11:08:46+08:00
2018-10-13T11:08:46+08:00
火爆浪子
https://segmentfault.com/u/asys0512
0
<p><a href="https://link.segmentfault.com/?enc=gJa%2BaDxOer1Y0qFaD%2BmYlw%3D%3D.mNA%2Bk6YqFHR25rH2RnW7Envy2YtNu9QtkBLnO45on5gIpZUW7H5zyIUpPXlIyV4C" rel="nofollow">https://summernote.org/deep-d...</a></p>
<pre><code>$('#summernote').summernote('removeFormat');</code></pre>
<p>这是官方给的,只是我不太懂怎么用<br>我现在有自己做一个自定义按钮<br>我想做到的是当我选择文本的时候按下「按钮」,就能够把所有「已选取」的格式删除恢复成预设,<br>他虽然有预设的正常跟清可以使用,但是我文本(资料库的数据)的来源是其他地方,<br>所以他有很多自带的标签例如<code><span style =“XXXX”> </ span></code>之类的,<br>这个做法在summernote不给用。就是好像不是自己编辑器产生的标签好像就没办法做出清除的动作,<br>在网路上也找不到相关的作法,想问说有没有大神知道怎么处理这个问题?<br>非常感谢.....</p>
iframe instagram 高度如何自適應? via summernote
https://segmentfault.com/q/1010000016461868
2018-09-19T23:49:21+08:00
2018-09-19T23:49:21+08:00
火爆浪子
https://segmentfault.com/u/asys0512
0
<p>事由<br>我有用一個編輯器叫做 summernote (我試過一些編輯器,作法似乎都是這樣)<br>當我直接填入IG的連結時:<a href="https://link.segmentfault.com/?enc=mZ4okLkAS1brXActO9Qpiw%3D%3D.XrovWry0kawJs5cXPC%2BQdnhOBcjYxsN6C2gOW0umLAm7fNBPCRSatusCFvDdi5a37f1TlHBCX40xqZUfLCDr2Q%3D%3D" rel="nofollow">https://www.instagram.com/p/B...</a><br>他會產生這樣的程式碼:</p>
<pre><code><iframe frameborder="0" src="https://instagram.com/p/Bn43FsqjIC1/embed/" width="100%" height="672" scrolling="no" allowtransparency="true" class="note-video-clip">
// ...
</iframe>
</code></pre>
<p>直接帶入貼文的 ID 然後透過 IG 的 API 顯示。</p>
<p>只是我發現當被嵌入的內容的圖片或影片高度不一致時,此時 <code>iframe</code> 所設定的 <code>height</code> 因為已經固定,就無法完整呈現該IG貼文。</p>
<p>無論把它改成 <code>auto</code> or <code>100%</code> 等等,他都無法完整呈現貼文,都會被切邊,又或者是當圖片很小時,下面就會有一大片空白,無法得知嵌入內容的高度!</p>
<p>目前編輯器的做法是:不使用IG提供的嵌入語法,僅透過絕對網址來抓ID並產生 <code>iframe</code> 並透過IG的 <code>Embedding</code> API來顯示貼文內容。</p>
<p>問題<br>我要如何解決這個問題?能用 <code>iframe</code> 也能順利嵌入、自適應高度、貼文不會被切掉,完美契合。</p>
<p>補充<br>我有去 IG 開發者查詢:<a href="https://link.segmentfault.com/?enc=Exae403KYDCzR2%2FJ0A4qzA%3D%3D.eKSqgxzPTAn1T3WRug5OUtf8Dfj0FjtZ44fJlsCBi%2BRlM3Q9pvsppO8h8liiSEQUAQ5gC%2Fr%2BpXTR37UUuLVMKw%3D%3D" rel="nofollow">https://www.instagram.com/dev...</a><br>我發現他寫的好像是只有叫你選擇 「嵌入」,會得到一串他的專屬語法,貼上去時的顯示才是沒有問題的。但透過 iframe 他好像就沒有教學或說明了。</p>
<p>資源<br>範例網址:<a href="https://link.segmentfault.com/?enc=940HbVPd2TlsmxQKJRbX1Q%3D%3D.cZOtVMQsOnH8VjYD96XA18xtczrWcLA2vik7dWlxJBaP0Mj6LXLvQs8YG15JpcuZOLo5RbirJhFRSAjQmFqfLg%3D%3D" rel="nofollow">https://www.instagram.com/p/B...</a><br>IG開發者:<a href="https://link.segmentfault.com/?enc=5pLJbMUl3pdc3lNzo78vMQ%3D%3D.teuhtiiYBwhLkZQd9RWxuVsE5FSCn27SAnSnIrsniWft%2Bu0%2F3dk2y1aUL8zlFhUMobGmadnA%2Bdja7CtLYwBEUw%3D%3D" rel="nofollow">https://www.instagram.com/dev...</a></p>
summernote editor 抓取 youtube ID 丟給 editor 、客製化輸入框?
https://segmentfault.com/q/1010000016486282
2018-09-21T16:52:36+08:00
2018-09-21T16:52:36+08:00
火爆浪子
https://segmentfault.com/u/asys0512
0
<p><strong>事由</strong><br>我目前使用第三方套件編輯器: <strong>summernote</strong> 。<br>我看了一下官方API文件,可以新增按鈕 :<a href="https://link.segmentfault.com/?enc=VrcUDFzb3thiOz00agHQ4w%3D%3D.lxRIoicahWsXnGCririhmyRlTFQXxVOqG2yBH%2BG%2FViE6VvyTVoLRWJ0vMBSkPKKt" rel="nofollow">https://summernote.org/deep-d...</a><br><img src="/img/bVbhkUD?w=166&h=75" alt="clipboard.png" title="clipboard.png"></p>
<p><strong>問題</strong><br>這是 IG 提供的內嵌代碼如下</p>
<pre><code><blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/Bn-X2IgB0R9/?utm_source=ig_embed_loading" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/p/Bn-X2IgB0R9/?utm_source=ig_embed_loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div><div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"> 在 Instagram 查看這則貼文</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div></a> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/Bn-X2IgB0R9/?utm_source=ig_embed_loading" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">Older is Better 老的就是屌 #vintage #vintagewatch #classic #watchporn #rolex #explorer #explorer2 #explorerii #1655 #mk1 #orangehand #stevemcqueen #porsche #carrera #911 #993 #993s #993turbo #993turbos #gemballa #widebody #classiccar #modernclassic #vintagecar #carporn</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/sunnyboyyy/?utm_source=ig_embed_loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> Sunny Wang 王陽明</a>(@sunnyboyyy)分享的貼文 於 <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2018-09-21T04:21:54+00:00">PDT 2018 年 9月 月 20 日 下午 9:21</time> 張貼</p></div></blockquote> <script async defer src="//www.instagram.com/embed.js"></script></code></pre>
<p>我的想像是:利用 prompt 出現的輸入框貼上語法,再丟入編輯器<br>確實成功了...<br>但我不解,</p>
<pre><code>var url = prompt('instagram 代碼', '');
var node = document.createElement('span');
node.innerHTML = '';
context.invoke('editor.insertNode', node);</code></pre>
<li><ol><li>這段是什麼意思?這是我從其他 github 中,有人提問的問題拿過來用的。</li></ol></li>
<ol><li>假設我要將 <code>node.innerHTML</code> 改成</li></ol>
<pre><code>node.innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/ '+ url +'?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';</code></pre>
<p>假設用同樣的 <code>prompt</code> 方式取得youtube網址,我要如何抓到youtube網址 的 YoutubeID 給 node?</p>
<ol><li>有辦法客製化輸入語法的表單嗎?就很像他內建的視窗,按下去有一樣的效果,不用透過 prompt ?</li></ol>
<p><img src="/img/bVbhkZD?w=598&h=290" alt="clipboard.png" title="clipboard.png"></p>
<pre><code> var button = ui.button({
contents: '<i class="fa fa-child"/> Hello',
tooltip: 'hello',
click: function () {
var url = prompt('IG代碼貼此', '');
var node = document.createElement('span');
node.innerHTML = url;
context.invoke('editor.insertNode', node);
}
});
</code></pre>
<p><strong>資源</strong><br><a href="https://link.segmentfault.com/?enc=NUQt%2B7Rq3ebhQB7HqFAX7Q%3D%3D.HV8fsD5hJQxzvmB9V10YWAmVA34sekD2qIS3f8rybT8%3D" rel="nofollow">https://www.instagram.com/</a><br><a href="https://link.segmentfault.com/?enc=IN%2Fp8kjDNTVrSodmpva0Fg%3D%3D.JR3VODFXYGNqQcsMWf%2BETeiN47ilmdi515fk36U6jTsnV67i9NTPDb1KhSElB1yZ" rel="nofollow">https://summernote.org/deep-d...</a></p>
django后台使用summernote,MEDIA路径问题
https://segmentfault.com/q/1010000016139494
2018-08-24T16:26:12+08:00
2018-08-24T16:26:12+08:00
rotateX
https://segmentfault.com/u/rotatex
0
<h3>题目描述</h3>
<p>DEBUG = False 时找不到图片路径,其他样式文件都能加载</p>
<p>setting.py 文件</p>
<pre><code>BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
DEBUG = False
STATIC_URL = '/static/'
if DEBUG:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
else:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/media')</code></pre>
<h3>路由信息</h3>
<pre><code>urlpatterns = [
...
path('summernote/', include('django_summernote.urls')),
path('archives/<str:year>/<str:month>', blog_views.archives, name='archives'),
path('category/<str:id>', blog_views.category, name='category'),
]
# 处理 DEBUG = False情况找不到静态资源
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
else:
urlpatterns += [
url(r'^static/(?P<path>.*)$', serve,
{'document_root': settings.STATIC_ROOT}),
]</code></pre>
<p><img src="/img/bVbfVWe?w=300&h=325" alt="clipboard.png" title="clipboard.png"></p>
<p>目录结构<br>网上查找相关问题试了下还是没解决, DEBUG = True 时才可以正常显示</p>
<p>初学,有点不太懂</p>
使用summernote编辑器,如何在粘贴图片时将图片保存到自己的服务器
https://segmentfault.com/q/1010000011364094
2017-09-26T15:17:06+08:00
2017-09-26T15:17:06+08:00
liucz
https://segmentfault.com/u/liucz
0
<p>在做文章的编辑发布时,发现如果直接将外网复制的图片保存起来,会将外网url也保存下来,从效率和安全的角度来讲都是不正确的。</p>
<p>调查了一下微信公众平台的图文发布功能,发现是在图片粘贴过来的时候,就会把图片保存到以mmbiz开头的图片服务器中,并抛出保存临时图片的错误,保证了安全稳定性。</p>
<p>找summernote官方文档,找到了监听粘贴事件的方法,也能取出粘贴的内容</p>
<pre><code>callbacks: {
onPaste: function(e) {
debugger;
}
}
</code></pre>
<p><img src="/img/bVVQsA?w=1261&h=287" alt="clipboard.png" title="clipboard.png"></p>
<p>但是不知道怎么将所有图片上传到服务器,并改变粘贴内容</p>
<p><strong>希望有大神能给点思路,谢谢~</strong></p>
summernote插件如何增加更多的字体
https://segmentfault.com/q/1010000008527890
2017-03-01T14:32:42+08:00
2017-03-01T14:32:42+08:00
邰相贤more
https://segmentfault.com/u/xiangxianmore
0
<p>1.我想增加更多的字体(font-family),如微软雅黑,我该怎么做?</p>
vuejs+summernote出现好多问题~
https://segmentfault.com/q/1010000007119704
2016-10-10T15:45:05+08:00
2016-10-10T15:45:05+08:00
fonglezen
https://segmentfault.com/u/fonglezen
0
<p>问题如下:</p>
<p>1、不能上传视频<br><img src="/img/bVD2gM?w=1018&h=335" alt="图片描述" title="图片描述"></p>
<p>项目中使用的方式:</p>
<p>1、通过npm install summernote --save 加入到项目node_modules和package.json中</p>
<p><img src="/img/bVD2g9?w=572&h=313" alt="clipboard.png" title="clipboard.png"></p>
<p>2、vue-cli创建的项目,main.js中import进来</p>
<p><img src="/img/bVD2hp?w=568&h=98" alt="clipboard.png" title="clipboard.png"></p>
<p>3、页面中的使用:</p>
<p><img src="/img/bVD2ht?w=823&h=174" alt="clipboard.png" title="clipboard.png"></p>
<p><img src="/img/bVD2jw?w=582&h=219" alt="clipboard.png" title="clipboard.png"></p>
<blockquote><p>这样的用法不对吗?</p></blockquote>
laravel中,使用summernote插件,如何在插件中使用图片上传?
https://segmentfault.com/q/1010000006233046
2016-08-10T23:29:48+08:00
2016-08-10T23:29:48+08:00
simonxm
https://segmentfault.com/u/simonxm
0
<p>我成功的在项目中使用summernote,但是,按了图片上传却没有然而有效动作,只是弹出一个框,却不能进行任何操作,请问该怎么办呢?还有就是我在文中添加图片,我该怎么保存这个图片到数据库?<br><img src="/img/bVAjER" alt="clipboard.png" title="clipboard.png"></p>
webpack方式引用summernote提示require错误
https://segmentfault.com/q/1010000005962654
2016-07-14T11:46:30+08:00
2016-07-14T11:46:30+08:00
jiangzm
https://segmentfault.com/u/jiangzm
0
<p>引用summernote提示如下错误, 不知道怎么解决</p>
<blockquote><p>require function is used in a way in which dependencies cannot be statically extracted</p></blockquote>
<p>webpack.config.js</p>
<pre><code>var webpack = require("webpack");
module.exports = {
entry: {
app: './src/main.js', //vue系
vendor: [ //依赖系
'bootstrap/dist/css/bootstrap.css',
'summernote/dist/summernote.css',
'jquery', 'vue-strap',
'bootstrap/dist/js/bootstrap.js',
'summernote/dist/summernote.min.js'
],
},
resolve: {
alias: {
jquery: "jquery/dist/jquery.js"
}
},
externals: {
// require("jquery") is external and available
// on the global var jQuery
//"jquery": "jQuery"
},
output: {
path: './build',
publicPath: '/build/',
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue' },
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel'},
{ test: /\.(png|jpg)$/, loader: 'file' },
{ test: /\.(png|jpg)$/, loader: 'url?limit=10000'},
{ test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /summernote\.(woff|eot|ttf)(\?.*)?$/, loader: 'url?limit=100000' }
]
},
vue: {
loaders: {
scss: 'style!css!sass?indentedSyntax',
exclude: /node_modules/,
cssSourceMap: false
}
},
noParse: [
/summernote\.min\.js/
],
plugins: [
new webpack.ProvidePlugin({
"$" : "jquery",
"jQuery" : "jquery",
"window.jQuery" : "jquery"
}),
new webpack.optimize.CommonsChunkPlugin(/* chunkName = */"vendor", /* filename= */"vendor.bundle.js"),
],
devtool: '#source-map'
}</code></pre>
<p>main.js</p>
<pre><code>import Vue from 'vue'
import app from './app.vue'
import VueRouter from 'vue-router'
import 'bootstrap/dist/css/bootstrap.css'
import 'summernote/dist/summernote.css'
import './styles.css'
import 'jquery/dist/jquery.js'
import 'bootstrap/dist/js/bootstrap.js'
import 'summernote/dist/summernote.min.js'
Vue.config.debug = process.env.NODE_ENV !== 'production'
Vue.use(VueRouter)
const router = new VueRouter()
const App = Vue.extend(app)
router.start(App, 'body')</code></pre>
<p>报错提示:</p>
<pre><code>./~/summernote/dist/summernote.min.js
Critical dependencies:
2:2826-2833 require function is used in a way in which dependencies cannot be statically extracted
2:2837-2844 require function is used in a way in which dependencies cannot be statically extracted
2:2929-2936 require function is used in a way in which dependencies cannot be statically extracted
2:2969-2976 require function is used in a way in which dependencies cannot be statically extracted
@ ./~/summernote/dist/summernote.min.js 2:2826-2833 2:2837-2844 2:2929-2936 2:2969-2976</code></pre>
<pre><code>./~/summernote/dist/summernote-0.8.1-dist.zip
Module parse failed: E:\Projects\vuexsample\node_modules\summernote\dist\summernote-0.8.1-dist.zip Unexpected character '' (1:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:2)
at Parser.pp.raise (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:923:13)
at Parser.pp.getTokenFromCode (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:2831:8)
at Parser.pp.readToken (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:2526:15)
at Parser.pp.nextToken (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:2518:71)
at Parser.pp.next (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:2467:8)
at Parser.pp.parseIdent (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:682:8)
at Parser.pp.parseExprAtom (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:286:21)
at Parser.pp.parseExprSubscripts (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:228:19)
at Parser.pp.parseMaybeUnary (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:207:17)
at Parser.pp.parseExprOps (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:154:19)
at Parser.pp.parseMaybeConditional (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:136:19)
at Parser.pp.parseMaybeAssign (E:\Projects\vuexsample\node_modules\webpack\node_modules\acorn\dist\acorn.js:112:19)
@ ./~/summernote/dist ^\.\/.*$</code></pre>
<pre><code>./~/summernote/dist/summernote.js
Critical dependencies:
397:40-47 require function is used in a way in which dependencies cannot be statically extracted
398:8-15 require function is used in a way in which dependencies cannot be statically extracted
407:15-22 require function is used in a way in which dependencies cannot be statically extracted
408:22-29 require function is used in a way in which dependencies cannot be statically extracted
@ ./~/summernote/dist/summernote.js 397:40-47 398:8-15 407:15-22 408:22-29</code></pre>
summernote怎么修改文字大小?
https://segmentfault.com/q/1010000004382940
2016-01-28T21:46:04+08:00
2016-01-28T21:46:04+08:00
wangsun300
https://segmentfault.com/u/shaun
0
<p>前端开发使用的是bootstrap,用了summernote富文本编辑器,但是客户使用不满意,客户需要将网页中找到的各种新闻粘贴到富文本编辑器中,然后改变部分文字字体大小,发现改不了</p>
summernote 的pre问题
https://segmentfault.com/q/1010000004337464
2016-01-20T11:55:37+08:00
2016-01-20T11:55:37+08:00
lingshanjun
https://segmentfault.com/u/lingshanjun
0
<p>我用summernote作为编辑器,发现有两个问题,请教大神帮我解决:<br>1.每次插入pre样式,输入一部分代码,然后想换行,按enter,结果跳出了pre,效果如下</p>
<p><img src="/img/bVsmtN" alt="clipboard.png" title="clipboard.png"><br>请问有什么方法在pre中换行吗?<br>2.针对上面的问题,我先选用</p>
<p>标签将代码编辑好,如图:</p>
<p><img src="/img/bVsmut" alt="clipboard.png" title="clipboard.png"><br>查看其源代码为<br><img src="/img/bVsmuK" alt="clipboard.png" title="clipboard.png"><br>然后我再选中它,切换其标签为pre,效果如下:</p>
<p><img src="/img/bVsmuY" alt="clipboard.png" title="clipboard.png"></p>
<p>查看其源代码为:</p>
<p><img src="/img/bVsmvc" alt="clipboard.png" title="clipboard.png"><br>很明显其源代码中多了个<br>,实现了pre内的换行。<br>到这里貌似一切ok,接着我用prettify做了个代码高亮,就有问题了,加了个行号,结果只识别为一行,效果如下:</p>
<p><img src="/img/bVsmvZ" alt="clipboard.png" title="clipboard.png"><br>请问是什么原因呀?<br>补充:我在网上直接粘贴了一段代码到我的summernote编辑器,其效果如下:</p>
<p><img src="/img/bVsmws" alt="clipboard.png" title="clipboard.png"><br>其源代码为</p>
<p><img src="/img/bVsmwy" alt="clipboard.png" title="clipboard.png"><br>由此可见,在粘贴的时候直接把pre粘过来了,其源码内,并没有<br>,加prettify的显示效果如下:</p>
<p><img src="/img/bVsmw9" alt="clipboard.png" title="clipboard.png"></p>
<p>能实现断行分号了。<br>鉴于上面遇到的问题,请大神不吝赐教!</p>
summernote的plugin问题
https://segmentfault.com/q/1010000003856083
2015-10-14T14:14:12+08:00
2015-10-14T14:14:12+08:00
Apo_conquest
https://segmentfault.com/u/apo_conquest
0
<p>最近一个项目用到可编辑div,公司使用的是bootstrap作为主要框架,故选用了summernote插件<br>现需要实现自定义按钮功能,类似点击插入表情(我这是要点击插入一条预设规则、运算符等)<br>summernote给出了plugin,链接在此<a href="https://link.segmentfault.com/?enc=sqD1txABYXvBFOMKtAbhCA%3D%3D.hFb0KaONEVKLNG72gB5t0Eff1aH5shcyx4ANrR2pQCsD33I4vKfiGfigVpAB10j3" rel="nofollow">summernote</a>。</p>
<p>也给出了实例,链接在此<a href="https://link.segmentfault.com/?enc=xjF39KaOI%2Fb%2F2%2BNgQL%2Fz3A%3D%3D.r5iMqMwVuN8pTAL9ZF%2FIBlJe14EIe0q2R%2Ftl7kCQBf5rztIb0HNa2%2BwGuyPHcn%2FkdTB6nhS1lX4cnD3RDkVa23GBcxXBea0NKkka7gzJR5o%3D" rel="nofollow">自定义plugin:hello</a><br>但是当我将代码原封不动搬下来的时候,得到的结果是报错:如图<br><img src="/img/bVqliK" alt="clipboard.png" title="clipboard.png"><br>那个renderer到底是什么?<br>我在这行前面加了一个console,这个summernote对象的具体情况如图所示</p>
<p><img src="/img/bVqlmE" alt="clipboard.png" title="clipboard.png"></p>
<p>我的代码结构是这样的:</p>
<pre><code>//先引入
$(document).ready(function() {
setSummernote();
});
//初始化
function setSummernote(){
$("#summernote").summernote({
lang: 'zh-CN',
height:300,
focus:true,
toolbar:[
['group', ['hello']]
]
});
//此行报错,我不知道这个renderer是什么。
var tmpl = $.summernote.renderer.getTemplate();
var editor = $.summernote.eventHandler.getEditor();
// add hello plugin
$.summernote.addPlugin({
// plugin's name
name: 'hello',
init : function(layoutInfo) { // run init method when summernote was initialized
// layoutInfo.holder() is current summernote's jquery instance.
var $note = layoutInfo.holder();
// you can use jquery custom event.
$note.on('summernote.update', function(customEvent, nativeEvent) {
var $boldButton = $(this).summernote('toolbar.get', 'bold');
$boldButton.toggleClass('active').css({
color : 'red'
});
});
$note.on('summernote.blur', function(customEvent, nativeEvent) {
var $boldButton = $(this).summernote('toolbar.get', 'bold');
$boldButton.removeClass('active').css({
color : 'inherit'
});
});
$note.summernote('insertText', 'plugin start.');
},
buttons: { // define button that be added in the toolbar
// "hello" button (key is a button's name)
hello: function () {
// create button template
return tmpl.iconButton('fa fa-header', {
// set event's name to used as callback when this button is clicked
// add data-event='hello' in button element
event : 'hello',
title: 'hello',
hide: true
});
}
},
events: { // events
// run callback when hello button is clicked
hello: function (event, editor, layoutInfo, value) {
// Get current editable node
var $editable = layoutInfo.editable();
// Call insertText with 'hello'
editor.insertText($editable, 'hello ');
// or
layoutInfo.holder().summernote("insertText", "Hello");
}
}
});
}</code></pre>