CKEditor - Custom word or phrase insertion function - javascript

I am using CKEditor so the user can easily enter texts. He also has to enter variables/tags that will be filled by the system afterwards like {foo}. To prevent error reports caused by minor typos I want to provide a dropdown list to insert those in the text. How can I achieve this?
I found a promising Plugin named StrInsert but it's not supported by newer CKEditor versions doess nor does it look well maintained. Any other known plugins?

I ended up using the placeholder plugin as described here. I just use the placeholder format [[foo]] instead or the original one. If you are using the nuget package like me you have to download the following plugins and copy them into the plugins folder: placeholder, widget and lineutils. The add the plugin to your CKEditor config: extraPlugins: 'placeholder'
Edit1:
You can also use this custom plugin

Related

Is it possible to add a custom spellchecker function to an HTML textarea?

Question:
I'd like to know if it is possible to add a custom spellchecker function to a Textarea.
Background:
I am currently using bootstrap-vue's b-form-textarea component to display a textarea that accepts a list of values from a user.
I am already validating state and displaying whether the textarea is valid or invalid. However, I'd like like to show a "red squiggly" (similar to spellcheck) under each "invalid" entry.
As an example, user enters (up to 1,000) car manufacturers
"Toyota, Honda, Dodge, Harley Davidson".
I'd like to display that "Harley Davidson" is an invalid car manufacturer.
It'd be nice to leverage the spellchecker's "red squiggly" to denote an "invalid" entry. If this is not possible would you have any other suggestions?
you can use String method(split) to transfer input text into array, and use the method of map to process the array.
From what I've read, it does not seem possible to add the spellchecker functionality I required to a textarea. What I ended up using instead was a package, found in npm, called "vue-codemirror". It is an extension of the CodeMirror project.
Using CodeMirror, I was able to add gutters with red error icons next to each line (similiar to an IDE displaying syntax errors). In my opinion, the CodeMirror documentation was lackluster and I spent more time looking at source code than I wanted. However, it does seem like very powerful tool.
Notes:
I am using Vue 2.x. As such, I was not able to use the latest version of vue-codemirror (which requires Vue 3).
Vue-codemirror 4.x uses CodeMirror 5

CKEDITOR : Wiris plugin Causing Issue

I'm using Wiris plugin for handling math Equations and all.
The official site of the WIRIS plugin is given below.
Wiris plugin page for CKEditor
Wiris plugin ckeditor Demo
** Problem:**
Whenever I'm using the wiris plugin it replaces the whole content(Because It needs to convert all MathML equation to IMG tag with SVG-base64 Image).
I'm using a lot of custom plugins which depends on event's that made in the document like click,keydown,keyup.
I try to found the solution but I can't.Can anyone please help me with this.

Add custom plugin mention to tinyMCE in joomla 2.5

I want to extend tinyMCE to add a custom plugin mention.
Its very straight forward to add it on standalone page. But I'm struggling to add the same into joomla site for the tinyMCE.
This is the link, to which I'm referring.
https://github.com/CogniStreamer/tinyMCE-mention
mention plugin is added to the plugins folder for tinyMCE.
So where and how do I add the source code for mention to tinyMCE?
Hoping for your quick response!
Either install your created plugin using extension manager or add your plugin in plugins->editors-xtd. Also don't forget to enable the plugin.

How to add javascript in addition to pure text in Joomla Article

More specifically I am trying to implement a wufoo form in a joomla article, but I need to add text, in addition to the code. I tried to just paste the code the article but all I get is the code as text. What am I missing? If it helps I have installed jCode, but I cannot find a way to add text as well in addition to the form.
I am open to other ways as well to solve this issue.
Joomla by default doesn't allow you to import code like PHP or Javascript through articles. For this, a plugin need to be used. I see you've tried using jCode, I've never used this before so can't provide any documentation on it.
I would strongly recommend using Sourcerer as a plugin for importing Javascript and PHP through your articles. It's free, well documented, well supported and easy to use. Once you've installed it, enable the plugin. Then in your article, you can use something like the following:
{source}
<script type="text/javascript">
alert('Hello world');
</script>
<?php
echo '<p>Hello world</p>!';
?>
{/source}
There will be a small button under the article textarea for Sourcerer which will bring up a popup window for you to enter all your code in.
Hope this helps
Alternate options are for your problem
If you are an admin user Remove filter option for article.
Go to article section -> Options -> Text Filter Options -> Choose your user group -> Apply no filter.
Another option is to create a module and assign that module to your article like below.
Create a module that have your forms. For module development tutorial
And create an article and set the module inside that like.
{loadposition contact_form_pos}
Inside your article just mention the module position like above
for more
Hope it make sense..

How to get jQuery code completion to work in Sublime Text 2?

I am doing some light jQuery based Javascript programming with Sublime Text 2. Is there such a thing as code completion for jQuery? I've installed SublimeCodeIntel, but getting nothing.
For instance, consider the following:
<div id="container">hello</div>
<script type="text/javascript">
function doStuff() {
$('#container').html('change it');
}
</script>
When I type $('#container'). I would expect a popup with things like html, val, etc... to popup. Has anyone gotten jQuery intellisense to work at all?
P.S. To be sure, I am not trying to get snippets working, but rather code completion.
Try package installer in sublime
search for jquery and install.
SublimeCodeIntel should work just fine with jQuery, you just need to tell it where to find it. Check out the docs on configuring search paths - basically, you create a ~/.codeintel/config file, and put something like
{
"JavaScript": {
"javascriptExtraPaths": ["/path/to/jquery.not-minified.js"]
}
}
in it. Remember to not use the minified version of jQuery, as some of the variable names can be changed (I think, don't hold me to it for v2). You also don't have the inline documentation. This file can also be created as /path/to/project_root/.codeintel/config if you're using different versions, different plugins, etc. Remember that SublimeCodeIntel can take a little while to index everything, so be patient the first time it runs. I've found it helpful to restart Sublime after indexing is done, just so everything is freshly loaded.
This jQuery package for Sublime text might help
https://github.com/mrmartineau/Jquery
If you have installed a jQuery syntax-file (there is one available from the link provided by Srikanth AD) then my AndyJS2 add-in is available via PackageControl.
AndyJS2 provides completions for both JavaScript and jQuery - use the syntax options by clicking the bottom-right of the ST window to switch between JavaScript and jQuery.
I doubt that it would work well, though, in parallel with SublimeCodeIntel. You can disable this Package, without having to uninstall it, from the Preferences menu, Package Control

Categories

Resources