在 vue.js 2 中使用summernote [英] using summernote with vue.js 2

查看：108 发布时间：2021/12/26 16:55:52 javascript vuejs2 vue-component summernote

本文介绍了在 vue.js 2 中使用summernote的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在我的 vue.js 2 spa 中使用summernote，因为不是我的所有页面都使用summernote，所以我通过添加

使summernote成为一个组件

出口默认{editor_function(){//summernote.min.js中的summernote函数}}

然后我只是将它导入我需要summernote的.vue文件中，并在mounted()函数上调用editor_function，但我得到了错误unknown codemirror 当 npm 将我的 vue 项目编译成单个 app.js 文件时.

所以我只在我的 index.html 中包含了 summernote.min.js，这意味着它将在 vue js spa 启动之前加载(这不是很理想，因为只有一些页面需要这个插件，但我需要这工作)

所以在那之后它就可以工作了，但是现在我不知道如何将summernote的输出数据获取到vuejs中，我正在像这样将v-model添加到textarea中

我也尝试过像这样自定义输入但不起作用

</pre><p>但它只是没有绑定到我的 v-model 内容中，这意味着当我从 summernote/content 发布输出时，它将是空的...</p><p>那么如何让summernote 与vue js 2 一起工作?我找到了一些用于 Summernote 和 vue js 的包，但它仅适用于旧版本的 vue js(可能是 v.1?)，并且与 vue js 2 不兼容.</p><div class="h2_lin"> 解决方案</div><p>我在这里回答，因为评论不太擅长显示代码.</p><pre><code><template><div id="应用程序"><夏日笔记名称=编辑器":模型=内容"v-on:change="value => { content = value }"></summernote></div><p></模板><脚本>导出默认{数据() {返回 {内容:空}},组件: {'summernote' : require('./Summernote')}}</script></code></pre><p>我认为你可以使用 <a href="https://github.com/StefanNeuser/vuejs2-summernote-component/blob/master/src/Summernote.js" rel="nofollow noreferrer">summernote 模块</a> 以这种方式.<br>我查看了源代码.它非常简单和简短，因为它只是 Summernote 的一个包装.</p><p><strong>更新</strong><br>我 fork 了项目并更改了一些代码，以便更轻松地设置 Summernote 的配置和插件.使用 <a href="https://github.com/cho0o0/vuejs2-summernote-component" rel="nofollow noreferrer">这个版本</a>，您可以将您的配置作为对象道具传递.您还可以通过在 html <code>script</code> 标签中导入插件来添加插件.<br>请参阅下面的示例代码.</p><pre><code><template><div id="应用程序"><夏日笔记名称=编辑器":模型=内容"v-on:change="value => { content = value }":config="配置"></summernote></div><p></模板><脚本>导出默认{数据() {返回 {内容:空，//↓ 就是配置对象的样子.↓配置:{高度:100，工具栏: [//[groupName, [按钮列表]]['style', ['bold', 'italic', 'underline', 'clear']],['字体', ['删除线', '上标', '下标']],['字体大小'，['字体大小']]，['颜色', ['颜色']],['para', ['ul', 'ol', 'paragraph']],['insert', ['gxcode']],//插件配置:summernote-ext-codewrapper],},}},组件: {'summernote' : require('./Summernote')}}</script></code></pre><p>我希望你能明白我的想法.您还可以查看分叉项目以获取更多信息.</p><p>i want to use summernote in my vue.js 2 spa, and because not all my page using summernote so i make summernote to be a component by adding </p><pre><code>export default {
    editor_function(){
     //summernote function in summernote.min.js
    }
}
</code></pre><p>and then i just import it in my .vue file that need summernote and call <code>editor_function</code> on <code>mounted()</code> function but i got error <code>unknown codemirror</code> when npm compile my vue project into single app.js file.</p>

<p>so i went into just include summernote.min.js in my index.html and thats mean it will be loaded before vue js spa is started (which is not very ideal since only some page need this plugin, but well i need this to work)</p>

<p>so after that it is working, but now i got no idea how to get ouput data from summernote into vuejs, i am adding v-<code>model</code> into <code>textarea</code> like this</p><pre><code><textarea class="summernote" v-model="content"></textarea>
</code></pre><p>i also tried to make custom input like this but not working</p><pre><code><textarea class="summernote" 
          :value="content"
          @input="content = $event.target.value"></textarea>
</code></pre><p>but it just not binded into my v-model content and that's mean when i post the output from summernote/content it will be empty...</p>

<p>so how to make summernote works with vue js 2? i found some package for summernote and vue js but it's works only with old version vue js( v.1 maybe?) and not compatible with vue js 2.</p><div class="h2_lin"> 解决方案 </div><p>I answered here since comments are not very good at displaying code.</p><pre><code><template>
<div id="app">
  <summernote
    name="editor"
    :model="content"
    v-on:change="value => { content = value }"
  ></summernote>
</div>
</template>

<script>
export default {
  data() {
    return {
        content: null   
    }
  },
  components: {
    'summernote' : require('./Summernote')
  }
}
</script>
</code></pre><p>I think you can use the <a href="https://github.com/StefanNeuser/vuejs2-summernote-component/blob/master/src/Summernote.js" rel="nofollow noreferrer">summernote module</a> in this way.<br>
I looked into the source code. It's quite simple and short since it's just a wrapper of summernote.</p>

<p><strong>Update</strong><br>
I forked the project and changed some code to make it easier to set summernote's configuration and plugins. With <a href="https://github.com/cho0o0/vuejs2-summernote-component" rel="nofollow noreferrer">this version</a>, you can pass your configuration as an object prop. 
You can also add a plugin by importing it in html <code>script</code> tag.<br>
See sample code below.  </p><pre><code><template>
<div id="app">
  <summernote
    name="editor"
    :model="content"
    v-on:change="value => { content = value }"
    :config="config"
  ></summernote>
</div>
</template>

<script>
export default {
  data() {
    return {
        content: null,
        // ↓ It is what the configuration object looks like. ↓
        config: {
            height: 100,
            toolbar: [
                // [groupName, [list of button]]
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['gxcode']], // plugin config: summernote-ext-codewrapper
          ],
        }, 
    }
  },
  components: {
    'summernote' : require('./Summernote')
  }
}
</script>
</code></pre><p>I wish you could get my idea. You can also look into the forked project for more information.</p>

                        <p>这篇关于在 vue.js 2 中使用summernote的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p>
                        
                    </div>
                    <div class="arc-body-main-more">
                        <span onclick="unlockarc('2722562');">查看全文</span>
                    </div>
                </div>
				<div>
                            
                        </div>
                <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div>
            </div>
        </article>
        <div id="arc-ad-2" class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
        <div class="widget bgwhite radius-1 mb-1 shadow widget-rel">
            <h5>相关文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="vue.js - 在vue 中使用 Clipboard.js" href="/699383.html">
                            vue.js - 在vue 中使用 Clipboard.js;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在选择选项中使用 @click - Vue.js 2" href="/2475632.html">
                            在选择选项中使用 @click - Vue.js 2;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在Vue.js中使用CKeditor实例" href="/1490539.html">
                            在Vue.js中使用CKeditor实例;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在js服务模块中使用Vue.js插件" href="/1952878.html">
                            在js服务模块中使用Vue.js插件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="vue.js - vue render函数中使用iwitch" href="/698305.html">
                            vue.js - vue render函数中使用iwitch;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在 Vue.js 中使用 async/await 模式" href="/2474680.html">
                            在 Vue.js 中使用 async/await 模式;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Vue.js - 在组件中使用父数据" href="/2868740.html">
                            Vue.js - 在组件中使用父数据;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在Shopify液体模板中使用vue.js" href="/1563655.html">
                            在Shopify液体模板中使用vue.js;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在 Vue.js 中使用环境变量" href="/2648596.html">
                            在 Vue.js 中使用环境变量;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Vue.js  - 在组件中使用父数据" href="/1015741.html">
                            Vue.js  - 在组件中使用父数据;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在Vue.js中使用环境变量" href="/1684965.html">
                            在Vue.js中使用环境变量;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="使用summer与vue.js 2" href="/1024228.html">
                            使用summer与vue.js 2;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在 vue.js 2 中使用 lang 类 laravel?" href="/2722613.html">
                            如何在 vue.js 2 中使用 lang 类 laravel?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="vue.js - 如何在vue中使用d3.js" href="/711367.html">
                            vue.js - 如何在vue中使用d3.js;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在 Vue.js 中使用 dotenv" href="/2473984.html">
                            如何在 Vue.js 中使用 dotenv;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在Vue.js中使用MaterializeCss?" href="/2296566.html">
                            如何在Vue.js中使用MaterializeCss?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在Nginx中使用vue.js?" href="/1680457.html">
                            如何在Nginx中使用vue.js?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在 Nginx 中使用 vue.js?" href="/2648824.html">
                            如何在 Nginx 中使用 vue.js?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在 vue.js 中使用 puppeteer" href="/2347011.html">
                            如何在 vue.js 中使用 puppeteer;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在Vue.js中使用组合API扩展组件" href="/2886300.html">
                            在Vue.js中使用组合API扩展组件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="是否可以在 Vue.js 中使用 python 脚本?" href="/2474187.html">
                            是否可以在 Vue.js 中使用 python 脚本?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在vue.js 2中使用lang类laravel?" href="/1540847.html">
                            如何在vue.js 2中使用lang类laravel?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何使用 TypeScript 在 Vue.js 中使用提供/注入" href="/2474015.html">
                            如何使用 TypeScript 在 Vue.js 中使用提供/注入;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="vue.js - vue 中使用 new FormData()  提示 FormData is not defined" href="/719345.html">
                            vue.js - vue 中使用 new FormData()  提示 FormData is not defined;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="vue.js - Vue img使用@路径报错，import中使用正常" href="/700246.html">
                            vue.js - Vue img使用@路径报错，import中使用正常;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
    </div>
    <div class="side">
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>前端开发最新文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html">
                            为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html">
                            错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html">
                            如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html">
                            如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html">
                            警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html">
                            如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html">
                            此请求已被阻止;内容必须通过HTTPS提供;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html">
                            资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html">
                            通过HTTPS加载页面但请求不安全的XMLHttpRequest端点;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html">
                            拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门教程
            </h5>
            <ul>
                <li>
                    <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html">
                        Java教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html">
                        Apache ANT 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html">
                        Kali Linux教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html">
                        JavaScript教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html">
                        JavaFx教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html">
                        MFC 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html">
                        Apache HTTP客户端教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html">
                        Microsoft Visio 教程
                    </a>
                </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门工具
            </h5>
            <ul>
                
                <li>
                    <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4">
                        Java 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6">
                        C(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8">
                        PHP 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1">
                        C# 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5">
                        Python 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33">
                        MySQL 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2">
                        VB.NET 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14">
                        Lua 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35">
                        Oracle 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7">
                        C++(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20">
                        Go 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45">
                        Fortran 在线工具
                    </a>
                </li>
            </ul>
        </div>
        
    </div>
</div>
<script type="text/javascript">var eskeys = '在,vue.js,2,中,使用,summernote'; var cat = 'cc';';//qianduan</script>
    </div>
<div id="pop" onclick="pophide();">
    <div id="pop_body" onclick="event.stopPropagation();">
        <h6 class="flex flex101">
            登录
            <span onclick="pophide();">关闭</span>
        </h6>
        <div class="pd-1">
            <div class="wxtip center">
                <span>扫码关注<em>1秒</em>登录</span>
            </div>
            <div class="center">
                <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" />
            </div>
            <div style="margin-top:10px;display:flex;justify-content: center;">
                <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" />
                <input id="btngo" type="button" onclick="chk()" value="GO" />
            </div>
            <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;">
                发送“验证码”获取
                <em style="padding: 0 .5rem;">|</em>
                <span style="color: #01a05c;">15天全站免登陆</span>
            </div>
            <div id="chkinfo" class="tip"></div>
        </div>
    </div>
</div>    <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script>
<footer class="footer">
    <div class="container">
		<div class="flink mb-1">
			友情链接：
            <a href="https://www.it1352.com/" target="_blank">IT屋</a>
            <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a>
            <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a>
        </div>
        <section class="copyright-section">
            <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a>
            ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a>
            <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a>
            <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a>
            <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a>
            <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a>
            本站内容来源互联网,如果侵犯您的权益请联系我们删除.
        </section>
        
<!--统计代码-->
<script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
<script type="text/javascript">
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
    </div>
</footer>
</body>
</html>