froala 相关问题

Froala是一个基于商业jQuery的WYSIWYG文本编辑器，它以最新技术和行业趋势为基础。

Froala 内容在页面加载后发生变化

我的页面中有一个 Froala 控件，该控件可能是空的，或者填充了以前保存的内容。当有

html angularjs froala

回答 1 投票 0

如何使用带有 React hook 表单的 froala 编辑器？ Next.js

我想使用带有 React hook 形式的 Froala 编辑器，但我有一些问题。当我开始在编辑器上写作时，出现以下错误。类型错误：无法读取未定义的属性（读取“tar...

next.js react-hook-form froala

回答 1 投票 0

未捕获的类型错误：$(...).froalaEditor 不是函数...这是我的问题

@型号列表 @{ 布局=“_Layout”； ViewData["标题"] = "索引"; } 委员会 ... @model List<jcperrestclient.JcpeRwebsitePageContentCommitteeDOA> @{ Layout = "_Layout"; ViewData["Title"] = "Index"; } <h2>Committee</h2> <body> <div> <main role="main" class="pb-3"> <div class="container-fluid box mt-5"> <div class="row"> @for (var i = 0; i < Model.Count; i++) { <div class="col-md-10" id="section1"> @Html.AntiForgeryToken() <input type="hidden" asp-for="@(Model[i].CreatedBy)" /> <input type="hidden" asp-for="@(Model[i].CreatedDate)" /> <input type="hidden" asp-for="@(Model[i].UpdatedDate)" /> <input type="hidden" asp-for="@(Model[i].UpdatedBy)" /> <div class="form-group row"> <div class="col-md-6"> <strong><label asp-for="@(Model[i].CreatedBy)"></label></strong> <input asp-for="@(Model[i].CreatedBy)" readonly style="border: none" /> <br /> <strong><label asp-for="@(Model[i].CreatedDate)"></label></strong> <input asp-for="@(Model[i].CreatedDate)" readonly style="border: none" /> </div> <div class="col-md-6"> <strong><label asp-for="@(Model[i].UpdatedBy)"></label></strong> <input asp-for="@(Model[i].UpdatedBy)" readonly style="border: none" /> <br /> <strong><label asp-for="@(Model[i].UpdatedDate)"></label></strong> <input asp-for="@(Model[i].UpdatedDate)" readonly style="border: none"> </div> </div> <div class="form-group row"> <label id="lblSuccess" style="color: red">@ViewBag.lblSuccess</label> </div> <div class="form-group row"> <label asp-for="@(Model[i].PageTitle)" class="control-label col-md-1"></label> <div class="col-md-5"> <textarea asp-for="@(Model[i].PageTitle)" class="form-control" placeholder="Enter your text here" id="txtEditor"></textarea> </div> </div> <div class="form-group row"> <span asp-validation-for="@(Model[i].HtmlContentCurrent)" class="text-danger">this is the spot?</span> <textarea asp-for="@(Model[i].HtmlContentCurrent)" id="froala-editor" name="Content"></textarea> </div> <div class="form-group row"> <div class="col-md-1 offset-md-1"> <input type="button" id="buttonCancel" name="stringValue" value="Cancel" title="Cancel these changes" class="btn btn-outline-dark" /> </div> <div class="col-md-2"> <input type="button" id="buttonSave" name="stringValue" value="Save" title="Save your changes" class="btn btn-outline-dark" /> </div> <div class="col-md-3"> <input type="button" value="Show/Hide Preview" title="Html Preview" onclick="showDiv()" class="btn btn-outline-dark" /> </div> </div> </div> <div class="col-md-2" id="section2" style="font-family: arial; text-align: left;"> <h4>Page Content Properties</h4> <strong><label asp-for="@(Model[i].AdminControllerName)"></label></strong> <input asp-for="@(Model[i].AdminControllerName)" readonly style="border: none" /> <br /> <strong><label asp-for="@(Model[i].AdminControllerAction)"></label></strong> <input asp-for="@(Model[i].AdminControllerAction)" readonly style="border: none" /> <br /> <strong><label asp-for="@(Model[i].PublicControllerName)"></label></strong> <input asp-for="@(Model[i].PublicControllerName)" readonly style="border: none" /> <br /> <strong><label asp-for="@(Model[i].PublicControllerAction)"></label></strong> <input asp-for="@(Model[i].PublicControllerAction)" readonly style="border: none" /> <br /> <strong><label asp-for="@(Model[i].PublicViewName)"></label></strong> <input asp-for="@(Model[i].PublicViewName)" readonly style="border: none" /> <br /> <strong><label asp-for="@(Model[i].HasRightSideBar)"></label></strong> <input asp-for="@(Model[i].HasRightSideBar)" readonly style="border: none" /> <br /> <strong><label asp-for="@(Model[i].RightSideBarName)"></label></strong> <input asp-for="@(Model[i].RightSideBarName)" readonly style="border: none" /> <br /> <strong><label asp-for="@(Model[i].HasPartialView)"></label></strong> <input asp-for="@(Model[i].HasPartialView)" readonly style="border: none" /> <br /> <strong><label asp-for="@(Model[i].PartialViewName)"></label></strong> <input asp-for="@(Model[i].PartialViewName)" readonly style="border: none" /> <br /> <strong><label asp-for="@(Model[i].IsDeleted)"></label></strong> <input asp-for="@(Model[i].IsDeleted)" readonly style="border: none" /> <br /> <strong><label asp-for="@(Model[i].DateDeleted)"></label></strong> <input asp-for="@(Model[i].DateDeleted)" readonly style="border: none" /> <br /> </div> <div id="previewDiv" style="display:none; border: 1px solid #ccc; padding: 10px; margin-top: 20px;"> <h4>HTML Preview</h4> <div id="previewContent"></div> </div> } </div> </div> </main> </div>  <link href="https://cdn.jsdelivr.net/npm/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdn.jsdelivr.net/npm/froala-editor/css/froala_style.min.css" rel="stylesheet" type="text/css" />  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/froala-editor/js/froala_editor.pkgd.min.js"></script>  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  <script src="~/js/site.js" asp-append-version="true"></script> <script> //This makes jquery a variable and i can implement it like dependency injection this way it does not interact with Froala--> var $j = jQuery.noConflict(); $j(document).ready(function () { setTimeout(function () { initializeFroala(); }, 1000); // 1 second delay to ensure Froala is fully loaded function initializeFroala() { new FroalaEditor('#froala-editor', { key: "xxxxxxxxxxxx", attribution: false, heightMin: 300, heightMax: 600, toolbarSticky: true, imageInsertButtons: ["imageBack", "|", "imageUpload", "imageByURL"], quickInsertButtons: ['image', 'table', 'ul', 'ol'], toolbarButtons: { 'moreText': { 'buttons': ['bold', 'italic', 'underline', 'textColor', 'insertHR', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'clearFormatting'], 'buttonsVisible': 5 }, 'moreLink': { 'buttons': ['|', 'insertLink'] }, 'moreParagraph': { 'buttons': ['|', 'outdent', 'indent', 'formatUL', 'formatOLSimple', 'align', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'quote'], 'buttonsVisible': 5 }, 'moreImage': { 'buttons': ['|', 'insertImage'] }, 'moreRich': { 'buttons': ['|', 'insertTable', 'emoticons', 'specialCharacters'] }, 'moreMisc': { 'buttons': ['undo', 'redo', 'spellChecker', 'fullscreen', 'selectAll', 'html', 'help'], 'align': 'right', 'buttonsVisible': 2 } }, imageUploadURL: getCurrentPath(), imageUploadParams: { id: 'my_editor' }, events: { 'contentChanged': function () { document.getElementById('previewContent').innerHTML = this.html.get(); } } }); } function getCurrentPath() { var uploadURL; switch (window.location.hostname) { case 'intranet': uploadURL = '/EditingPages/JCPeRServiceAPI/UploadFiles'; break; case 'devi': uploadURL = '/EditingPages-devi/JCPeRServiceAPI/UploadFiles'; break; case 'localhost': uploadURL = '/JCPeRServiceAPI/UploadFiles'; break; default: uploadURL = '/default-endpoint'; // Default upload URL } return uploadURL; } // Recognize the save button click event $j('#buttonSave').on('click', function (e) { e.preventDefault(); // This overrides the default form submission so that the following code can be implemented var formData = { createdBy: $j('#CreatedBy').val(), createdDate: $j('#CreatedDate').val(), updatedBy: $j('#UpdatedBy').val(), updatedDate: $j('#UpdatedDate').val(), pageTitle: $j('#PageTitle').val(), htmlContentCurrent: $j('#froala-editor').froalaEditor('html.get') }; // This is the save request with ajax $j.ajax({ url: '@Url.Action("SaveCommitteeContent", "Home")', // This is the backend endpoint type: 'POST', // What type of endpoint it is data: JSON.stringify(formData), // Converts the data to JSON format for the database to accept the information contentType: 'application/json; charset=utf-8', headers: { 'RequestVerificationToken': $j('input[name="__RequestVerificationToken"]').val() // Token for security }, success: function (response) { if (response.success) { $j('#lblSuccess').text('Content saved').css('color', 'green'); } else { $j('#lblSuccess').text('Content failed to save').css('color', 'red'); } }, error: function () { $j('#lblSuccess').text('An error has broken your existence, welcome to the Matrix Neo').css('color', 'blue'); } }); }); function showDiv() { var previewDiv = document.getElementById('previewDiv'); var previewContent = document.getElementById('previewContent'); // Add reference to content area if (previewDiv) { if (previewDiv.style.display === "none") { previewDiv.style.display = "block"; // Update the preview content with the HTML from Froala previewContent.innerHTML = FroalaEditor.INSTANCES[0].html.get(); } else { previewDiv.style.display = "none"; } } else { console.error("Preview div not found!"); } } }); </script> </body> 我有冲突的 jquery 版本，我相信是最新的 jquery 3.6.0 和 Froala 的 2.4.2。当进程加载 jquery，然后加载 Froala 时，它们进行交互，Froala 会覆盖 3.6.0。我需要两个版本协同工作，以便我可以保存到我的数据库中。过去几年我也遇到过类似的问题，这就是我没有冲突并设置超时的地方。如果我错过了更好地解释我的问题的对话，请为我指出方向，谢谢。我尝试过 noConflict() 但没有效果。尝试将所有代码移至实际页面，但没有成功。取出 Jquery 3.6.0，这进一步破坏了我的代码。我已经为没有胜利的 Froala 设定了暂停。满足您要求的另一种方法，您可以通过以下代码获取值： htmlContentCurrent: $j('#previewContent').text() 顺便说一句，您的视图包含 for 循环，您所做的无法在每个循环中获得正确的值。您需要为输入定义唯一的 id 并使用 data-index 定义当前索引，如下所示： <input type="hidden" asp-for="@(Model[i].CreatedBy)" id="CreatedBy_@i" /> <input type="hidden" asp-for="@(Model[i].CreatedDate)" id="CreatedDate_@i" /> <input type="hidden" asp-for="@(Model[i].UpdatedDate)" id="UpdatedDate_@i" /> <input type="hidden" asp-for="@(Model[i].UpdatedBy)" id="UpdatedBy_@i" /> //other code no need change.... <div class="form-group row"> <label asp-for="@(Model[i].PageTitle)" class="control-label col-md-1"></label> <div class="col-md-5"> <textarea asp-for="@(Model[i].PageTitle)" id="PageTitle_@i" class="form-control" placeholder="Enter your text here"></textarea> </div> </div> //other code no need change.... <div class="col-md-2"> <input type="button" data-index="@i" class="buttonSave" name="stringValue" value="Save" title="Save your changes" class="btn btn-outline-dark" /> </div> 然后获取如下数据值： var index = $j(this).data('index'); console.log(index) var formData = { createdBy: $j('#CreatedBy_' + index).val(), createdDate: $j('#CreatedDate_' + index).val(), updatedBy: $j('#UpdatedBy_' + index).val(), updatedDate: $j('#UpdatedDate_' + index).val(), pageTitle: $j('#PageTitle_' + index).val(), htmlContentCurrent: $j('#previewContent').text() };

jquery froala

回答 1 投票 0

如何在Froala Editor中实现多级下拉菜单？

我在我的项目中使用Froala Editor，并且我已经使用编辑器的API成功实现了自定义简单下拉列表。但是，我需要创建一个多级下拉菜单（手风琴样式），其中...

froala

回答 1 投票 0

Froala 编辑器的中心工具栏按钮

Froala 编辑器工具栏上的按钮全部左对齐。是否可以将它们居中？在附图中看到所有按钮都左对齐，我希望能够将它们居中。

position froala

回答 1 投票 0

在 Froala 链接插件中禁用链接文本

我在解决方案中使用 Froala 编辑器来创建要发送给 PDF 编写器的 html。 PDF 编写器不支持可点击的链接。这意味着完整的 url 必须显示为文本。所以...

javascript froala

回答 2 投票 0

当我将 froala edit 设置为“关闭”时，编辑器中的链接停止工作

在 froala 编辑器中显示带有链接的文本时，如果编辑器设置为不可编辑，则链接不起作用。 function loadEditor(){ var frEditor = new FroalaEditor('#imessage'...</desc> <question vote="0"> <p>在 froala 编辑器中显示带有链接的文本时，如果编辑器设置为不可编辑，则该链接不起作用。</p> <pre><code><script>function loadEditor(){ var frEditor = new FroalaEditor('#imessage', { height: 350, width: 500},function(){frEditor.edit.off();});}</script><body onload="loadEditor()"><div id="imessage"><p>Some text</p><p><a href="https://stackoverflow.com/" rel="noopener noreferrer" target="_blank">StackOverFlow</a></p></div></body> </code></pre> <p>是否需要进行设置才能使链接在只读模式下响应鼠标单击？</p> </question> <answer tick="false" vote="0"> <p>初始化编辑器时，在'initialized'事件中添加点击函数来打开链接：</p> <pre><code>events: { 'initialized': function () { this.edit.off(); //froala link doesn't work in readonly - workaround if ($('.fr-element').find('a').length > 0) { var linkobj = $('.fr-element').find('a')[0]; var link = $(linkobj).prop('href'); $('div.fr-element.fr-view.fr-disabled').click(function () { window.open(link); }) } } } </code></pre> </answer> <answer tick="false" vote="0"> <p>谢谢你维克！抱歉，我似乎没有 15 点声誉来支持你的答案。这有助于解决与打开 Froala 中通过链接添加的 YouTube 视频相关的问题，在初始化函数中，我为视频添加了此内容（也针对多个视频进行了测试）：</p> <pre><code>if ($('.fr-element').find('iframe').length > 0) { $('div.fr-element.fr-view').eq(0).on('click', function (e) { if ($(e.target).is('span') && $(e.target).find('iframe').length > 0) { var iframeSrc = $(e.target).find('iframe').attr('src'); console.log('IFrame src:', $(e.target).find('iframe')); window.open(iframeSrc); } }); </code></pre> <p>}</p> </answer> </body></html>

froala

回答 0 投票 0

抑制导入的node_modules CSS 中的 eslint 警告

某些依赖项要求您将 CSS 从 node_modules 导入到您的文件中。 // 编辑器.js 导入 'froala-editor/css/froala_editor.pkgd.css'; 从 'react-froala-wysiwyg' 导入 FroalaEditor；出口

javascript eslint froala

回答 1 投票 0

Froala Editor 在清理文本编辑器时不会删除图像

我使用 Froala 制作 HTML 文件并将其存储在服务器中。我在 Angular 1 中使用 Froala 模块。当我添加页面时，我有一个按钮可以清理 Froala 编辑器，但是当我点击它时，所有的一切都......

javascript jquery angularjs froala

回答 1 投票 0

如何去掉 Froala WYSIWYG 编辑器的文本水印（Yii2 小部件）

我正在为我的非盈利项目使用 Yii2 的 Froalla 所见即所得小部件。我承认我缺乏研究，并且事先不知道这是一项付费服务，因此我正在努力应对多重“