I'm building a DotNetNuke module and I need to include the html editor. However, my modules are in a stand alone solution that xcopy's to my DNN install (I'm following the Visual Studio project templates for making modules). All the sample code I've seen references the text editor like so:
<%# Register TagPrefix="dnn" TagName="TextEditor" Src="~/controls/TextEditor.ascx" %>
<dnn:TextEditor ID="txtDescription" runat="server" Width="100%" Height="300px" />
The problem is that since the modules are being developed outside of DNN, the reference to TextEditor obviously breaks the build.
Plan B was to instantiate the editor dynamically through a placeholder control like so:
EditorProvider editorProvider = new EditorProvider();
var control = editorProvider.HtmlEditorControl;
control.ID = "txtDescription";
phEditor.Controls.Add(control);
This kind of works, but most of the toolbar buttons are messed up!
DNN Editor bug
Any help would be greatly appreciated!
After some swearing and headbanging, I found the easy answer of just instantiating the usercontrol instead of the editor server control.
var control = this.LoadControl("~/controls/TextEditor.ascx");
control.ID = "txtDescription";
phEditor.Controls.Add(control);
I am assuming you are developing a custom module for dotnetnuke, you can look at the example implementation in blog module source code on codeplex.com. EditEntry.ascx is the control that contains the same example.
Basically, You just need to reference DotNetNuke.dll and DotNetNuke.WebControls.dll to make it working inside ascx declaration.
Found a better answer at http://www.dnnsoftware.com/forums/forumid/203/postid/466819/scope/posts
from Hristo Evtimov.
His method lets you add attributes to the Text editor.
His code:
One way to do it is like this:
DotNetNuke.UI.UserControls.TextEditor editor = (DotNetNuke.UI.UserControls.TextEditor)LoadControl("~/controls/texteditor.ascx");
editor.ID = "Editor1";
this.Controls.Add(editor);
My code in VB.NET came out like this:
Dim txtDescription As DotNetNuke.UI.UserControls.TextEditor = DirectCast(LoadControl("~/controls/texteditor.ascx"), DotNetNuke.UI.UserControls.TextEditor)
txtDescription.ID = "txtAOneDescription" & intControlCounter.ToString
txtDescription.HtmlEncode = False
Related
I have a JSON file that has some simple fields and content. I want to make a 2sxc app that simply lists out the content of the JSON file using C# Razor. (Ultimately this json file will be hosted elsewhere).
Ideally, the content will be rendered as simple HTML in the page that I can see when I click view source in the browser so I know it's SEO friendly.
Is this possible? What kind of code would I need to do this?
I was able to figure it out using this example: https://2sxc.org/dnn-tutorials/en/razor/json/home
So my code looked something like this:
#inherits ToSic.Sxc.Dnn.RazorComponent
#inherits Custom.Hybrid.Razor12
#{
var someJson = System.IO.File.ReadAllText(App.PhysicalPath + "/json/UseCases.json");
var thing = AsDynamic(someJson);
}
#foreach(var useCase in thing.UseCases) {
#useCase.URLPart
<h3>Name: #useCase.Name</h3>
<h4>#useCase.Domain</h4>
<p>#useCase.ShortDescription</p>
#Html.Raw(useCase.Highlights)
}
I am using a git repository to display a chessboard:
https://github.com/shaack/cm-chessboard
An example of the displayed chessboard can be found here:
https://shaack.com/projekte/cm-chessboard/
My goal is to display some text over a square of my choice, which would display over the piece if it is present. So I presume that involves some kind of z-index on the svg.
I've done inspect on the chessboard to see what the source code looks like, but I am at a loss for how to add a function that works like this:
function(coordinate,text), where coordinate could be something like c2.
How would you go about creating this function?
I am at a loss of where to start. I've been looking at the source code in the git file and commenting the code to get a better understanding. Ideally I would like a function that doesn't alter the git repository, because then if they do an update, my code won't break. Maybe I need to add a function that modifies the instance of the board object.
Any help is greatly appreciated.
I did a modern Chessboard (only to show the power of Web Components)
Problem with the "traditional" approach is you can NOT extend on it;
without taking the source code and changing it.
Modern Web Components can be extended WITHOUT needing the source code.
Below is ALL code required to add the label( square , label ) functionality you are after.
Better yet, same code in: https://jsfiddle.net/WebComponents/jvpm875b/
One issue.. the square-label is still shown; because my CSS was created to hide the square-label when there is a Chess-Piece in the square. You have to dig into the CSS to change that.
ChessMeister was an experiment, meant to be a BaseClass for Web Component developers; it has the UNlicense on it.. so you are free to use it (and you can't sue me)
https://chessmeister.github.io/
<script src="https://chessmeister.github.io/elements.chessmeister.js"></script>
<script>
customElements.define( "chess-board",
class extends customElements.get("chessmeister-board") {
connectedCallback() {
super.connectedCallback(); // execute <chessmeister-board>
let style = document.createElement("style");
style.innerHTML = `#labels div{background:rgb(100,100,0,.5);font:16px Arial;color:red;display:flex;align-items:center;justify-content:center}`
this.shadowRoot.append(style);
this.labels = this.addlayer("labels");
this.label("A7", "Make");
this.label("B7", "Your");
this.label("C7", "Own");
this.label("D7", "Chess");
this.label("E7", "Board");
}
label(square = "A8", label = "LABEL") {
let div = document.createElement("div");
div.setAttribute("at", square);
div.innerHTML = label;
this.labels.append(div);
return div;
}
})
</script>
<chess-board fen="4r3/8/2p2PPk/1p6/pP2p1R1/P1B5/2P2K2/3r4"></chess-board>
This is such a great script called fullPage.js located here: https://github.com/alvarotrigo/fullPage.js
I managed to load the js file and css file and even with the Void Menu Module, managed to call anchor links, but I'm struggling with the data attributes part of the implementation of this cool code! Any help is greatly appreciated! How do I get data-attributes to work in Drupal 7.25? I mean, I need to add them to the menu, so that the html looks something like this:
<ul id="menu">
<li data-menuanchor="firstPage">First slide</li>
<li data-menuanchor="secondPage">Second slide</li>
<li data-menuanchor="3rdPage">Third slide</li>
<li data-menuanchor="4thpage">Fourth slide</li>
</ul>
Just want to add it to the Main Menu in Drupal. Any idea how? Am trying to implement this on my homepage and using the Adaptive Sub-Theme with Display Suite Module installed, if that helps any.
Have added the following to template.php, but it makes no difference at all:
function MY_THEME_NAME_menu_link(&$variables) {
$variables['element']['#attributes']['data-menuanchor'] = substr($variables['element']['href'], 1);
return theme_menu_link($variables);
}
What am I doing wrong here?
EDIT
You can download the sitemaniacs theme here: http://dream-portal.net/dpdowns/MyProblem.zip
You can just download Adaptive Theme from Drupal here and than copy sitemaniacs to your sites/all/themes folder and than just enable the theme and go to your homepage.
There is also a folder called fullPage that is the example of it working perfectly fine without Drupal.
Files to take note of:
/sites/all/themes/sitemaniacs/scripts/custom.js
/sites/all/themes/sitemaniacs/template.php
/sites/all/themes/sitemaniacs/css/example2.css
/sites/all/themes/sitemaniacs/sitemaniacs.info
Let me know if you need anything else, k?
And Thank YOU!!! What I've done is create 4 Basic Pages, and using the Field Formatter Class Module to give the body field a class (when managing the Display) defined as section, than promoted to front page. Than I used HTML within another Node Type and used NodeBlock Module to output it as a menu item within the Menu Bar section of the blocks, with url <front>. Let me know if you need anything else for this, but I can't get it to work using this simple approach. I've tried tons of ways of doing it also, but no go for me. If you find a method that works, or perhaps something is wrong somewhere else, please please let me know.... I'm pulling out my hair on this one.
Have tried straight HTML, and now getting this:
Uncaught TypeError: Cannot read property 'top' of undefined jquery.fullPage.js?mzf0rp:506
scrollPage jquery.fullPage.js?mzf0rp:506
doneResizing jquery.fullPage.js?mzf0rp:889
The first error seems to occur in the scrollPage function on this line here:
var dtop = dest !== null ? dest.top : null;
Looks like dest.top is not defined on .top. Any idea why?
Use the Menu Link Attributes module that will let you add custom attributes per menu item.
for "href" you can use <'front'>#4thpage(front without any “cotation”) in path in menu that you create in Structure > Menus and use the Menu Link Attributes module for other attributes
This is an unanswered question in some blogs... `
<< Please Click Here To This Unanswered Question In Other Blogs..>>
will greatfull if can..
am trying to retrive Combobox selected item into a TextBox..here is my code..
using AjaxControlToolKit.dll version - 4.5.7.1002 for ComboBox.
i need to run this code on IE11 for sure.
Please help me in getting solution.
~ Udai
For the difference in html mentioned in reference,you need to access your control using clientId, on of the ways is:-
var TextBoxXXXID = <%=textBoxXXXID .ClientID%>
var control= document.getElementById(TextBoxXXXID);
About the issue this can be because of browser compatibility issue, you would like to add meta tag and add app_brower folder specified in the link .
IN IE 11, use this code to find user input in the textbox in the AjaxComboBox.
It is working in Chrome as well.
ASPX -
<ajaxToolkit:ComboBox ID="cboMetric" runat="server"></ajaxToolkit:ComboBox>
Code behind -
TextBox textBox = cboMetric.FindControl("cboMetric_TextBox") as TextBox;
strMetric = textBox.Text;
Implementing EasyCaptions on my WordPress blog and I’ve hit a brick wall. Any help would be appreciated. I’m using SWFobject to embed videos. I’ve pasted this code: http://pastebin.com/0ZMSr0Bz into my header.php and this embed code in my posts:
<video id="video-html5" width="480" height="320" controls="controls"
source src="[url to video]" />
</video>
The problem is the implementation only works for the video defined here:
var flashvars = { file:'[video url]', ...
All other videos embeds do not work. I've tried using a playlist but that did not solve the problem. How do I solve this? Do I need additional JS or PHP code to add to the file parameter?
[edited post]
I just re-read your question and looked at the pastebin. The video URL you're using is an HTML file: http://vidbull.com/embed-iqkhawkkx1rn-640x318.html. You can't load an HTML file as a video.
Try it again using a proper video URL (MP4, F4V, OGG, etc).
-- UPDATED based on comment from OP --
The issue is that you're hard-coding the video URL in your WordPress header. What you'll need to do is use a variable instead. I suggest using WordPress' "shortcode" API, which will enable you to pass variables via a custom shortcode.
Define your shortcode in WordPress, something like:
//[easycaptions]
function embed_easycaptions( $atts ){
//your custom PHP code here, using the passed $atts
}
add_shortcode( 'easycaptions', 'embed_easycaptions' );
Then when authoring your WordPress blog post, you add the custom shortcode where desired, such as
[easycaptions url='http://localhost/wordpress1/wp-content/uploads/2012/10/Sheldon-in-a-Dress.mp4']
Check out the Shortcode API page for instructions and examples. It's a pretty powerful system.
The solution lies in NOT hard-cording the video url in the header.php. Here is what worked to solve this. I first created a custom field in wordpress, named it thinema, and then set the value of the custom field to be the embedded video url in the post. Then edited this code into my header.php
flashvars = { file: '<?php echo get_post_meta(get_the_ID(), thinema, true); ?>'...
I've updated the code in pastebin. Hope this is of use to someone! You can view the implementation here.